Guide on showing the D3 Color legend in a horizontal orientation instead of a vertical one

I'm currently in the process of creating a color legend using d3, and I've managed to display it vertically. However, I would like it to be shown horizontally instead. Below is a snippet of the code I've been working on along with a link to the corresponding jsfiddle.

    var svg = d3.select(selector_id)
    .append("svg")
    .attr("height", (legendheight) + "px")
    .attr("width", (legendwidth) + "px")
    .style("position", "absolute")
    .style("left", "0px")
    .style("top", "0px")

  svg
    .append("g")
    .attr("transform", "translate(" + (legendwidth - margin.left - margin.right + 3) + "," + (margin.top) + ")")
    .call(legendaxis);
};

Here's an example of what I'm aiming for: https://i.stack.imgur.com/cCxSa.png

For further information, you can also check out the fiddle link provided below:

https://jsfiddle.net/shru90/e42vcLy0/17/

cssd3.jslegend

Answer №1

Learn how to perform a 90-degree rotation using CSS or JavaScript with this technique

Ideal for working with canvas and SVG elements

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you turn off CSS3 animations for browsers that don't support them

Upon page load, a fade-in animation is applied to the main container. Although it functions properly in most browsers, it seems to have an issue in IE(9). Is there a method to identify if the user's browser does not support CSS3 animations and disabl ...

javascriptjqueryhtmlcss

Is there a way for me to retrieve the icons through a content query?

Currently, I am working on customizing a background slider. However, in the CSS file: span.cbp-binext:before { content: "\e000";} The issue I am facing is that I am only getting squares as icons. Is there a way for me to replace these squares with a ...

javascriptcsshtml

Access the style of the first script tag using document.getElementsByTagName('script')[0].style or simply refer to the style of the document body with document.body.style

Many individuals opt for: document.getElementsByTagName('script')[0].style While others prefer: document.body.style. Are there any notable differences between the two methods? EDIT: Here's an example using the first option: ...

javascriptcssstyles

Enigmatic void found beneath image surfacing

Similar Question: Dealing with Additional Space at the Bottom of an Anchor Tag Take a look at this example page here.. There seems to be a mysterious gap below the picture of the family, just before the gray-bordered (5px #333) div that holds the ima ...

htmlcssimage

Opacity of background color only applies to the color

So, here's the scenario - I currently have a background that looks like this: background:url(../img/arrow_lch.png) right no-repeat #2e443a; The challenge I'm facing is how to decrease the opacity of only the background color (#2e443a). Any sugg ...

csscolorsopacity

Material-UI LeftNav with a sticky header

I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav ...

cssmaterial-ui

Creating visually appealing layouts with CSS floats and divs while ensuring responsiveness

As I work on bringing my vision to life, I'm experimenting with a mix of floats and divs, along with using a responsive image for the background and text. There's quite a bit involved in this process. 1. To start off, check out this example with ...

htmlcssresponsive-designcss-floatresponsive-images

Creating a Stylish Side Navigation and Content Layout with Materialize CSS

Seeking assistance with my portfolio design using Materialize CSS, I am encountering some issues. The current appearance of my website can be seen in the screenshot below: The problem lies in the positioning of the About section, which is currently locate ...

htmlcssmaterialize

Safari does not support font-face rendering, unlike Chrome

I am in the process of creating a typewriter-style font page using a local font. I have used @font-face to import it, and while it displays correctly on Google Chrome, it does not render properly in Safari. You can view the web page here: (you will need ...

css

What is the method to show a tag while dragging content in html5?

How can I make a div element track the mouse movement while dragging an item on my website? I need the div to only appear when the user drags content that has been enabled for dragging. I'm looking for a straightforward method to customize the appea ...

jqueryhtmlcssdrag-and-drop

Hovering over an element and eliminating any extra space

Hey there, I'm looking for some assistance with removing the whitespace on hover. Below is the code along with a screenshot for reference: div.show_sizes_onhover { background: rgba(255,255,255,.9); bottom: -1px; color: #a1a1a1; left: 0; padding: 5px ...

htmlcsswebshop

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

http://jsfiddle.net/vmKVS/ I need some help understanding the functionality of slideToggle using a small example. After toggling for the first time, the options element changes color to green. However, I expected the menu element to turn red when I togg ...

javascriptjqueryhtmlcssslidetoggle

Expanding the navbar with Bootstrap 3.0 by using the navbar-brand class

I'm facing an issue with the navbar-brand while adding my logo. I am using the latest version of bootstrap CSS from getbootstrap.com, and the problem is also evident there: The navbar becomes slightly oversized when the logo is included. However, if I ...

csstwitter-bootstrapnavbar

What are the steps to restrict a user from accessing a specific website?

In my Vue.js project, I've implemented a function that hides a specific menu item for users with insufficient permissions: <a :href="href" @click="navigate" v-if="hideMenuItem()"> // some code </a> hideMe ...

javascripthtmlcsstypescriptvue.js

What is the best way to stack several elements on top of each other?

<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...

javascripthtmlcssreactjs

Ways to modify the color of every appearance of a term in an html grid using css

My HTML code includes an AngularJS table as shown below: <table id="searchTable"> <thead> <tr> <th>Index</th> <th>Observation</th> <th>Reported By</th> ...

htmlcssangularjs

What is a method to position an <img> on top of text without obscuring the text or resorting to CSS background or text-indent

To view the related code snippet, click on this link: http://jsfiddle.net/Ws8ux/ Is there a way to position the text under the logo without hiding it through display:none or text-indent? I am aiming to bring the image up while keeping the logo in the back ...

htmlcss

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

A guide on verifying the percentage value of an element's height in Selenium with Java

I was able to retrieve the element's height in pixels using: element.getCssValue("height") However, the height returned was: Height: 560px What I actually need is for the height to be displayed as: Height: 100% Or perhaps Height: 50% ...

javacssseleniumselenium-webdriver

What steps can I take to stop my Details element from moving a nearby Div?

Within this setup, there is a div containing Details and Summaries to the left. Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward. Is there a way to prevent this from happening? I ...

htmlcss