D3 - Bar Chart

Card Puncher Data Processing

About

Data Visualization - Bar Chart in D3

Example

Html

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
var data= [ 4, 8, 15, 16, 23, 42 ];
d3.select("body")  // We need to get an element
  .append("div").classed("chart", true) // We add the chart graph container element (The div .chart element)
  .selectAll("div") // We select all div but we will get a null selection because their is no div element
  .data(data) // We join the empty selection with the data
  .enter() // Their is no data, therefore only the enter set of the data join contains nodes without element
  .append("div") // We append for each data a div element with the below style
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });

The div .chart element acts as a chart container that lets you position and style the chart without affecting the rest of the page.





Discover More
Card Puncher Data Processing
D3 (Data-Driven Documents)

“D3” stands for Data-Driven Documents. The data refers to the thing you want to visualize, and the document refers to its visual representation. It’s called a “document” because D3 is based on...
HTML - Bar Chart

HTML in HTML and CSS. HTMLd3 2436698The story of the teapot



Share this page:
Follow us:
Task Runner