D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
as-eldlc
Full window
Github gist
D3 aggregation tutorial
Built with
blockbuilder.org
<!DOCTYPE html> <head> <style> .axis .domain { display: none; } </style> </head> <body> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // Chart initialization var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // X axis var x = d3.scaleBand() .rangeRound([0, width]) .paddingInner(0.1); // y axis var y = d3.scaleLinear() .rangeRound([height, 0]); //load data d3.csv("data_task_100.csv", function(data){ //console.log(data); // Group by status var nested_data = d3.nest() .key(function(d) { return d.status; }) .entries(data); //console.log(nested_data); // Color scale var z = d3.scaleOrdinal(d3.schemeCategory10); // Set domains of axes scales x.domain(nested_data.map(function(d) { return d.key; })); y.domain([0, d3.max(nested_data, function(d) { return d.values.length; })]); z.domain(nested_data.map(function(d) { return d.key; })) // Draw rect g.selectAll("rect") .data(nested_data) .enter().append("rect") .attr("x", function(d) { return x(d.key); }) .attr("y", function(d) { return y(d.values.length); }) .attr("height", function(d) { return height - y(d.values.length);}) .attr("width", x.bandwidth()) //.attr("fill", "red") .attr("fill", function(d,i) { return z(d.key); }) // Draw x axis g.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Draw y axis g.append("g") .attr("class", "axis") .call(d3.axisLeft(y).ticks(null, "s")) }); </script> </body>
https://d3js.org/d3.v4.min.js