How can one append a string of text to the right of each bar? Let's find out!

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var data = [1.19209289551e-05, 3.70760703087, 0.162719964981, 0.159816026688, 0.159816026688, 6.00016117096];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 1024]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

</script>

I am looking to include additional descriptive text alongside each bar in the chart created by this code. How can I achieve that?

Thank you!

javascripthtmlcssd3.js

Answer №1

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart div {
  font: 12px sans-serif;
  background-color: steelblue;
  text-align: left;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var data = [1.19209289551e-05, 3.70760703087, 0.162719964981, 0.159816026688, 6.00016117096];
var data_tex =   {1.19209289551e-05 :'getCurrentID' , 3.70760703087: 'initialize OPK', 0.162719964981 :'GetSharedData', 0.159816026688 :'SetSharedData',  6.00016117096:'Synchronize resource'};

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 1024]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d)+ "px"; })
    .append("div").text(function (d) {return data_tex[d] + ": " + d + "s";}).style("margin-left", function (d) {return x(d) + 3 + "px";}).style("background-color", "white").style("color", "brown");;

</script>

JSBob really delivered with this solution - it's exactly what I needed.

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

Implementing Button Activation and Deactivation Upon Checkbox Selection in JQuery

When a single checkbox is selected, the Edit and Delete buttons are enabled while the Add button is disabled. If two or more checkboxes are selected, the Delete button is enabled while the Add and Edit buttons are disabled. This is my HTML code: < ...

javascriptjquery

What could be causing the console to display undefined?

Can anyone help me with an issue I'm having while making an AJAX call using fetch and promises? I have successfully displayed the temperatures, but for some reason, the location is showing up as undefined. Here is the code snippet: function getWeat ...

javascriptajax

Arranging information within an ExpansionPanelSummary component in React Material-UI

https://i.stack.imgur.com/J0UyZ.png It seems pretty clear from the image provided. I've got two ExpansionPanelSummary components and I want to shift the icons in the first one to the right, next to ExpandMoreIcon. I've been playing around with C ...

javascriptreactjsmaterial-ui

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

javascripthtmldebugging

Transferring a variable between a JavaScript function and a Java class

Currently, I am working with STS and building an application that includes HTML files and JavaScript. Within this file, there is a function that configures variables. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www ...

javajavascripthtmlspring

Learn the effective way to style ul elements within @mui/material/Menu using CSS

When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...

cssmaterial-ui

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

cssinternet-explorersvginternet-explorer-11

Developing in Node.js involves setting a specific timezone while creating a date

I feel like I'm overcomplicating things here. My server is running on nodejs, and the front-end is sending me an offset. What I need is to determine the UTC equivalent of yesterday (or today, or last week) based on this offset. Currently, my code l ...

javascriptnode.js

Generate div elements dynamically for each object being populated in JSON using JavaScript

I have a main container that displays a list of JSON objects. Each object should be displayed as a separate DIV element with specific details, one after the other. Additionally, I have a comments section on a webpage where the details are stored in JSON f ...

javascriptjson

Obtain data from a single module and incorporate it into a different one

In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...

javascripthtmlangulartypescript

Issue arises when attempting to render a component while utilizing window.location.pathname and window.location.hash in conjunction with a navigation bar

I am encountering a problem when attempting to render a react component using a navigation bar. I have experimented with both Switch case and if-statement methods. The first approach involves using window.location.hash, which successfully alters the URL u ...

javascriptreactjswindow.location

The negation functionality in the visible binding of Knockout.js is not functioning properly

I'm having trouble using the visible data binding with a negation and it's not functioning as expected. I've come across various posts on stackoverflow suggesting that the NOT binding should be used as an expression. However, in my scenario, ...

javascriptknockout.js

Create dynamic automatic titles in HTML with JavaScript

Below is the code snippet to add an image with a link to the home-page and an h1 with the document name (if there isn't one already). This HTML code includes a JavaScript file reference in the <head> section and uses a <h1> tag for the ti ...

javascripthtmldom

Creating a dynamic slider using jQuery

Here is the code snippet I have been working on: var current_slide = 1, animation_time = 1000, pause = 3000, slide_container = $('.slide_container'), interval, height = slide_container.height(), slides ...

javascriptjqueryslider

Exploring AngularJS: A closer look at ngOptions expressions

I have been struggling to populate a Select element with a list of objects for ngOptions. Despite confirming that the data structure is correct and accessible, I cannot get the Select to show the options. Even when rendering the options expression on the p ...

javascriptangularjs

Is it possible to utilize Vue.js' v-if directive to validate if a certain value is present within an array

In my form, I have a checkbox and I want to be able to use v-if directly to display or hide sections based on the selected checkbox values. Can this be done using v-if, or do I need to use watch:? ...

javascriptvue.js

Select element from Material UI displaying horizontally

I'm brand new to Material Ui and currently tackling the implementation of their SELECT component. However, I am running into an issue where it is displaying in a row instead of a column. Am I overlooking something important here? const SelectDropDownC ...

cssreactjsmaterial-ui

Custom options titled MUI Palette - The property 'primary' is not found in the 'TypeBackground' type

I am currently working on expanding the MUI palette to include my own custom properties. Here is the code I have been using: declare module '@mui/material/styles' { interface Palette { border: Palette['primary'] background: Pa ...

javascriptreactjstypescriptmaterial-ui

What is the reason behind only the initial click boosting the vote count while subsequent clicks do not have the same

In this snippet of code: //JS part echo "<script> function increasevotes(e,location,user,date,vote) { e.preventDefault(); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState ...

javascriptphpmysqlajax

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Currently, I am working on a Next.js project that involves using the Context API. The data fetched from the Context API works perfectly fine, but I am encountering errors with TypeScript and I'm not sure how to resolve them. Error: Property openDialo ...

javascriptreactjsnext.jsreact-context