D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lsquaredleland
Full window
Github gist
2 Level Diverging Bar Chart - 1 Data Set Implementation
2 Level Diverging Bar Chart, can only use one dataset
<!-- Implementation via individual variables, rather than classes, less flexible, can only use 1 dataset--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>2 Level Diverging Bar Chart - 1 DataSet Implimentation</title> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <style type="text/css"> #chart { border: 2px dashed black; } /*styling of the text here instead of text.attr */ text { font-family: sans-serif; font-size: 11px; fill: black; text-anchor: middle; } </style> <body> <div id="chart"></div> <!-- div where the chart is located --> <script> var dataSet = [ { key: 1, val1: 5, val2: 10}, { key: 2, val1: 7, val2: 11}, { key: 3, val1: 9, val2: 13}, { key: 4, val1: 13, val2: 14}, { key: 5, val1: 14, val2: 15}, { key: 6, val1: 15, val2: 25}, { key: 7, val1: 21, val2: 24}, { key: 8, val1: 18, val2: 18}, { key: 9, val1: 5, val2: 21}, { key: 10, val1: 11, val2: 17}, { key: 11, val1: 25, val2: 14}, { key: 12, val1: 5, val2: 10}, { key: 13, val1: 5, val2: 10}, { key: 14, val1: 5, val2: 12}, { key: 15, val1: 12, val2: 12}, { key: 16, val1: 11, val2: 15}, { key: 17, val1: 9, val2: 10}, { key: 18, val1: 6, val2: 17}, { key: 19, val1: 3, val2: 21}, { key: 20, val1: 5, val2: 8}, { key: 21, val1: 5, val2: 12}, { key: 22, val1: 7, val2: 10}, { key: 23, val1: 10, val2: 14}, { key: 24, val1: 12, val2: 10}, { key: 25, val1: 5, val2: 9} ]; var w = 700; h = 450; barPadding = 1; var svg = d3.select("#chart").append("svg") .attr({ width: w, height: h }); var key = function(d) { return d.key; }; var maxRange = d3.max(dataSet, function(d) { return d.val1/2}) + d3.max(dataSet, function(d) { return d.val2/2}); var xScale = d3.scale.ordinal() .domain(d3.range(dataSet.length)) .rangeRoundBands([0, w], 0.05);//calculate even bands + add spacing var yScale = d3.scale.linear() .domain([0, maxRange]) .range([0, h]); function color1(d){ return "rgb(150," + d * 10 + "," + d * 15 + ")"; }; function color2(d){ return "rgb("+(256 - d*2)+"," + d * 12 + "," + d * 5 + ")"; }; var bars = svg.selectAll("rect") .data(dataSet, key) .enter(); bars.append("rect") .attr({ "class": "valueTop", //assign a class, so can modift easier x: function(d, i) { return xScale(i); }, y: function(d) { return h - yScale(d.val1)/2 - h/2; }, width: xScale.rangeBand(), height: function(d){ return yScale(d.val1) / 2; }, fill: function(d){ return color1(d.val1); } }); bars.append("rect") .attr({ "class": "valueBottom", x: function(d, i) { return xScale(i); }, y: function(d) { return h/2; }, width: xScale.rangeBand(), height: function(d){ return yScale(d.val2) / 2; }, fill: function(d){ return color2(d.val2); } }); var texts = svg.selectAll("text") .data(dataSet) .enter(); texts.append("text") //top .text(function(d) { return d.val1; }) .attr({ "class": "valueTop", x: function(d,i) { return xScale(i) + xScale.rangeBand() / 2 }, y: function(d) { return h - yScale(d.val1)/2 - h/2 + 14; }, }); texts.append("text") //bottom .text(function(d) { return d.val2; }) .attr({ "class": "valueBottom", x: function(d,i) { return xScale(i) + xScale.rangeBand() / 2 }, y: function(d) { return h + yScale(d.val2)/2 - h/2 - 7; }, }); </script> </body> </html>
https://d3js.org/d3.v3.min.js