D3 - Bar Chart

1 - About

3 - Example

3.1 - 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.


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap