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

Maintaining the image's aspect ratio while cropping it to fit within the maximum or minimum height

Is there a way to make an image responsive by resizing it while keeping its aspect ratio intact at all sizes? I want the height of the image to stay fixed above 650px, cropping the top and bottom to maintain the ratio without stretching. Additionally, I do ...

cssimageresponsive-design

Utilizing jQuery to Calculate Tab Scores

Last week, my teacher and I collaborated on a fun game called rEAndom game (). The game is created using javascript, jQuery, and HTML5. One interesting feature of the game is that when you press the TAB key, a div displaying the score appears. You can chec ...

javascriptjqueryhtmlcss

Change the marquee scrolling back to its original starting point

I am trying to implement a continuous image scroll (marquee) in HTML. My goal is to have the marquee stop scrolling when the mouse hovers over it, with the images returning to their initial position. Once the mouse moves away, I want the marquee to resume ...

jqueryhtmlcssimagemarquee

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

Challenge with uploading Minio presigned URLs

I am encountering a problem with the Minio presigned URL. While I have successfully obtained the URL and used the PUT method to insert my file into my Minio bucket, I am unable to open certain file types such as jpg, png, or pdf. This is due to Minio autom ...

javascriptnode.jsexpressstorageminio

Create a login <div> that appears to float effortlessly on the screen

Seeking assistance in creating a login div similar to the one on ups.com. Upon clicking the login button on www.ups.com, a floating login div appears. How can I generate a similar div? Any help would be greatly appreciated. Thank you. ...

htmlcss

Determine the current position of the cursor within a contenteditable division

I came across this code snippet on a forum to determine the cursor position in a contenteditable div, but unfortunately it consistently returns 0. Here is the function responsible for retrieving the cursor position: new function($) { $.fn.getCursorPo ...

jqueryhtmlcontenteditablecaretcursor-position

Transferring files with Node.js via UDP connections

I'm currently working on setting up a basic Node.js server that is designed to receive files from clients through UDP. The challenge I'm facing is that whenever I attempt to send a large file (anything over 100kb), the server appears unresponsive ...

javascriptnode.jsfilestreamudp

Apache Wicket - Utilizing HTML5 details element within a RepeatingView to save open property

In my repeatingview, I have HTML5 detail elements that can be opened or collapsed by the user. However, when I remove certain elements from the repeatingview and then reload it using target.add(container), all elements end up being collapsed again. How c ...

javahtmlwicket

Syntax error: Your code encountered an unexpected closing curly brace

Here is the code snippet I am working with: <?php session_start();?> <!DOCTYPE html> <html> <head> <title>Narcis Bet</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css"&g ...

javascriptphphtml

Navigating router queries within Nuxt: A step-by-step guide

One of the challenges I am facing is passing value parameters in my URL with the mounted function looking like this: mounted () { this.$router.push({ path: '/activatewithphone', query: { serial: this.$route.params.serial, machin ...

javascriptvue.jsnuxt.js

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

javascripthtmlcssvue.js

Trouble arises when trying to insert a script tag into a live code editor using HTML

A few days ago, I successfully created a live code editor using the ace 1.2.9 library for my website guides. Now, I'm attempting to create a basic example, but when I try to enter text in the designated text area for the guides, the studio code compil ...

javascriptace-editor

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...

javajavascriptjqueryhtmlfile-upload

Incorporate Vue into a template using variables and props

Currently in the process of building a vue app and wondering how I can seamlessly integrate it into a template while passing variables (props) into it. When I execute npm run dev, the app and all its components are coded with no issues. After running npm ...

javascriptvue.js

Activating the loader dismiss command will transition the swiper to the current page

Having a swiper and loader makes the scenario very straightforward. The loader is initialized whenever calculations are performed, and after successfully obtaining the result, the loader turns off and swipes to the second slide. <swiper-container #sl ...

javascriptangularionic-frameworkswiper.jsloader

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

After implementing ES6 features such as template strings, arrow functions, and destructuring in a TypeScript file, I compile the code to regular JavaScript... Does the TypeScript compiler also compile the ES6 syntax, or do I need to utilize another compil ...

javascripttypescriptecmascript-6

Unable to make a POST request using axios

I'm having trouble populating a table using vue.js and axios in my visual studio project. Every time I run the solution, I see an empty table with just the heading Title. I experimented with another POST request method but unfortunately, it didn&apos ...

c#htmljsonvue.jsaxios

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs