Last active
April 13, 2016 22:08
-
-
Save lmatteis/b22af80b7d7a136a65b6b1bbaf45e50c to your computer and use it in GitHub Desktop.
Horizontal stacked bar charts with 3-level nested data structure
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .bar--positive { | |
| fill: #9BCCF5; | |
| } | |
| .bar--negative { | |
| fill: pink; | |
| } | |
| text { | |
| font: 10px sans-serif; | |
| } | |
| .tick text { | |
| fill: #000; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #909090; | |
| shape-rendering: crispEdges; | |
| } | |
| .title { | |
| font-size: 13px; | |
| font-weight:bold; | |
| } | |
| </style> | |
| <body> | |
| <p id="chart"></p> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var data ={"interactions":245100,"unique_authors":212600,"analysis":{"analysis_type":"freqDist","parameters":{"target":"fb.parent.topics.name","threshold":10},"results":[{"key":"BMW","interactions":90300,"unique_authors":77000,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"18-24","interactions":34200,"unique_authors":31700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":28300,"unique_authors":25200},{"key":"female","interactions":5900,"unique_authors":5700}],"redacted":false}},{"key":"25-34","interactions":26300,"unique_authors":24400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":20700,"unique_authors":18400},{"key":"female","interactions":5400,"unique_authors":5100}],"redacted":false}},{"key":"35-44","interactions":16200,"unique_authors":14400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":12100,"unique_authors":10600},{"key":"female","interactions":3900,"unique_authors":3600}],"redacted":false}},{"key":"45-54","interactions":8000,"unique_authors":7100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":5300,"unique_authors":4700},{"key":"female","interactions":2600,"unique_authors":2300}],"redacted":false}},{"key":"55-64","interactions":3200,"unique_authors":2800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1900,"unique_authors":1700},{"key":"female","interactions":1200,"unique_authors":1100}],"redacted":false}},{"key":"65+","interactions":2000,"unique_authors":1700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1200,"unique_authors":1000},{"key":"female","interactions":700,"unique_authors":600}],"redacted":false}}],"redacted":false}},{"key":"Ford Mustang","interactions":35300,"unique_authors":32400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"25-34","interactions":11300,"unique_authors":10600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":9600,"unique_authors":8700},{"key":"female","interactions":1600,"unique_authors":1500}],"redacted":false}},{"key":"18-24","interactions":10700,"unique_authors":9600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":9100,"unique_authors":8200},{"key":"female","interactions":1600,"unique_authors":1600}],"redacted":false}},{"key":"35-44","interactions":7100,"unique_authors":6000,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":5800,"unique_authors":4900},{"key":"female","interactions":1300,"unique_authors":1100}],"redacted":false}},{"key":"45-54","interactions":3500,"unique_authors":3100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2600,"unique_authors":2300},{"key":"female","interactions":900,"unique_authors":800}],"redacted":false}},{"key":"55-64","interactions":1500,"unique_authors":1300,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1100,"unique_authors":900},{"key":"female","interactions":400,"unique_authors":300}],"redacted":false}},{"key":"65+","interactions":800,"unique_authors":700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":600,"unique_authors":500},{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}}],"redacted":false}},{"key":"Honda Civic","interactions":28900,"unique_authors":25200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"18-24","interactions":10800,"unique_authors":9400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":8500,"unique_authors":7500},{"key":"female","interactions":2300,"unique_authors":1900}],"redacted":false}},{"key":"25-34","interactions":10200,"unique_authors":9500,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":8100,"unique_authors":7500},{"key":"female","interactions":2000,"unique_authors":1800}],"redacted":false}},{"key":"35-44","interactions":4500,"unique_authors":3800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":3100,"unique_authors":2600},{"key":"female","interactions":1300,"unique_authors":1100}],"redacted":false}},{"key":"45-54","interactions":1900,"unique_authors":1600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":900,"unique_authors":800},{"key":"female","interactions":900,"unique_authors":700}],"redacted":false}},{"key":"55-64","interactions":700,"unique_authors":600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"female","interactions":400,"unique_authors":300},{"key":"male","interactions":200,"unique_authors":200}],"redacted":false}},{"key":"65+","interactions":400,"unique_authors":400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":200,"unique_authors":200},{"key":"female","interactions":200,"unique_authors":100}],"redacted":false}}],"redacted":false}},{"key":"Ford Motor Company","interactions":17400,"unique_authors":15600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"25-34","interactions":5400,"unique_authors":5000,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":4400,"unique_authors":4100},{"key":"female","interactions":900,"unique_authors":900}],"redacted":false}},{"key":"18-24","interactions":5000,"unique_authors":4600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":4200,"unique_authors":3800},{"key":"female","interactions":700,"unique_authors":700}],"redacted":false}},{"key":"35-44","interactions":3500,"unique_authors":3100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2800,"unique_authors":2500},{"key":"female","interactions":700,"unique_authors":600}],"redacted":false}},{"key":"45-54","interactions":1900,"unique_authors":1700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1300,"unique_authors":1200},{"key":"female","interactions":500,"unique_authors":500}],"redacted":false}},{"key":"55-64","interactions":900,"unique_authors":800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":500,"unique_authors":500},{"key":"female","interactions":300,"unique_authors":300}],"redacted":false}},{"key":"65+","interactions":500,"unique_authors":400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":300,"unique_authors":300},{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}}],"redacted":false}},{"key":"Cars","interactions":15600,"unique_authors":14200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"25-34","interactions":4400,"unique_authors":4200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2900,"unique_authors":2700},{"key":"female","interactions":1400,"unique_authors":1300}],"redacted":false}},{"key":"18-24","interactions":3900,"unique_authors":3600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2800,"unique_authors":2600},{"key":"female","interactions":1100,"unique_authors":1000}],"redacted":false}},{"key":"35-44","interactions":3000,"unique_authors":2700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1800,"unique_authors":1600},{"key":"female","interactions":1200,"unique_authors":1000}],"redacted":false}},{"key":"45-54","interactions":2200,"unique_authors":2100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1300,"unique_authors":1100},{"key":"female","interactions":800,"unique_authors":700}],"redacted":false}},{"key":"55-64","interactions":1100,"unique_authors":1000,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":600,"unique_authors":500},{"key":"female","interactions":500,"unique_authors":400}],"redacted":false}},{"key":"65+","interactions":600,"unique_authors":600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":300,"unique_authors":300},{"key":"female","interactions":300,"unique_authors":200}],"redacted":false}}],"redacted":false}},{"key":"Forgiato Wheels","interactions":12800,"unique_authors":11200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"25-34","interactions":4600,"unique_authors":4200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":3900,"unique_authors":3500},{"key":"female","interactions":600,"unique_authors":600}],"redacted":false}},{"key":"18-24","interactions":3800,"unique_authors":3400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":3300,"unique_authors":3000},{"key":"female","interactions":500,"unique_authors":400}],"redacted":false}},{"key":"35-44","interactions":3000,"unique_authors":2800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2500,"unique_authors":2300},{"key":"female","interactions":400,"unique_authors":400}],"redacted":false}},{"key":"45-54","interactions":900,"unique_authors":800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":700,"unique_authors":600},{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"55-64","interactions":200,"unique_authors":200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"65+","interactions":100,"unique_authors":100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":100,"unique_authors":100}],"redacted":false}}],"redacted":false}},{"key":"Honda","interactions":12200,"unique_authors":10800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"25-34","interactions":4400,"unique_authors":4000,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":3400,"unique_authors":3000},{"key":"female","interactions":1000,"unique_authors":900}],"redacted":false}},{"key":"18-24","interactions":4200,"unique_authors":3900,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":3500,"unique_authors":3300},{"key":"female","interactions":600,"unique_authors":600}],"redacted":false}},{"key":"35-44","interactions":1900,"unique_authors":1700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1400,"unique_authors":1300},{"key":"female","interactions":400,"unique_authors":400}],"redacted":false}},{"key":"45-54","interactions":900,"unique_authors":800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":500,"unique_authors":400},{"key":"female","interactions":300,"unique_authors":300}],"redacted":false}},{"key":"55-64","interactions":300,"unique_authors":300,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"female","interactions":100,"unique_authors":100},{"key":"male","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"65+","interactions":200,"unique_authors":200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":100,"unique_authors":100}],"redacted":false}}],"redacted":false}},{"key":"BMW 2 Series","interactions":11000,"unique_authors":9700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"18-24","interactions":6500,"unique_authors":5800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":6300,"unique_authors":5700},{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"25-34","interactions":2900,"unique_authors":2600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2800,"unique_authors":2500}],"redacted":false}},{"key":"35-44","interactions":900,"unique_authors":800,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":900,"unique_authors":800}],"redacted":false}},{"key":"45-54","interactions":300,"unique_authors":300,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":300,"unique_authors":200}],"redacted":false}},{"key":"65+","interactions":100,"unique_authors":100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[],"redacted":false}},{"key":"55-64","interactions":100,"unique_authors":100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[],"redacted":false}}],"redacted":false}},{"key":"Ford GT","interactions":7700,"unique_authors":6700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"18-24","interactions":2900,"unique_authors":2700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":2700,"unique_authors":2500},{"key":"female","interactions":200,"unique_authors":100}],"redacted":false}},{"key":"25-34","interactions":2100,"unique_authors":1900,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1900,"unique_authors":1700},{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"35-44","interactions":1300,"unique_authors":1200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1100,"unique_authors":1000},{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"45-54","interactions":700,"unique_authors":600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":600,"unique_authors":500}],"redacted":false}},{"key":"55-64","interactions":300,"unique_authors":200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":200,"unique_authors":200}],"redacted":false}},{"key":"65+","interactions":100,"unique_authors":100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":100,"unique_authors":100}],"redacted":false}}],"redacted":false}},{"key":"Honda Accord","interactions":7500,"unique_authors":6300,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.age","threshold":10},"results":[{"key":"25-34","interactions":2500,"unique_authors":2200,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1600,"unique_authors":1300},{"key":"female","interactions":900,"unique_authors":700}],"redacted":false}},{"key":"18-24","interactions":1800,"unique_authors":1600,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":1100,"unique_authors":1000},{"key":"female","interactions":600,"unique_authors":600}],"redacted":false}},{"key":"35-44","interactions":1700,"unique_authors":1400,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"male","interactions":800,"unique_authors":700},{"key":"female","interactions":800,"unique_authors":600}],"redacted":false}},{"key":"45-54","interactions":800,"unique_authors":700,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"female","interactions":400,"unique_authors":400},{"key":"male","interactions":300,"unique_authors":300}],"redacted":false}},{"key":"55-64","interactions":300,"unique_authors":300,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"female","interactions":200,"unique_authors":100},{"key":"male","interactions":100,"unique_authors":100}],"redacted":false}},{"key":"65+","interactions":200,"unique_authors":100,"child":{"analysis_type":"freqDist","parameters":{"target":"fb.author.gender","threshold":2},"results":[{"key":"female","interactions":100,"unique_authors":100}],"redacted":false}}],"redacted":false}}],"redacted":false}}; | |
| render(data) | |
| function render(data) { | |
| var margin = {top: 0, right: 10, bottom: 20, left: 100}, | |
| width = 960 - margin.left - margin.right, | |
| height = 480 - margin.top - margin.bottom; | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1); | |
| var x1 = d3.scale.linear(); | |
| var y = d3.scale.ordinal() | |
| .rangeRoundBands([0, height], 0.1); | |
| var data = data.analysis.results | |
| x.domain(data[0].child.results.map(function(d) { return d.key; })); | |
| y.domain(data.map(function(d) { return d.key; })); | |
| var x1domain = [0, d3.max(data, function(d) { return d3.max(d.child.results, function(d) { return d.interactions; }); })] | |
| x1.domain(x1domain).range([0, x.rangeBand()]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(7) | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickSize(0) | |
| var t = d3.transition() | |
| .duration(750); | |
| var click; | |
| var svg = d3.select('#chart'), | |
| g = svg.select('g'); | |
| if (g.empty()) { | |
| g = svg.append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
| g.append('g') | |
| .attr('class', 'x axis') | |
| .attr('transform', 'translate(0,' + height + ')') | |
| .call(xAxis); | |
| g.append('g') | |
| .attr('class', 'y axis') | |
| .call(yAxis) | |
| } | |
| var rows = g.selectAll(".row") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", 'row') | |
| .attr('transform', function (d) { return 'translate(0, ' + y(d.key) + ')'; }); | |
| var columns = rows.selectAll('.column') | |
| .data(function (d) { return d.child.results; }) | |
| .enter().append('g') | |
| .attr('class', 'column') | |
| .attr('transform', function (d) { return 'translate(' + x(d.key)+ ',0)'; }); | |
| columns.selectAll('rect') | |
| .data(function (d) { | |
| var prevInteractions = null; | |
| d.child.results.map(function (o) { | |
| o.prevInteractions = prevInteractions | |
| prevInteractions = o.interactions | |
| }) | |
| return d.child.results; | |
| }) | |
| .enter().append('rect') | |
| .attr("class", function(d) { return "bar bar--" + (d.key == 'female' ? "negative" : "positive"); }) | |
| .attr('x', function (d) { if (d.prevInteractions) return x1(d.prevInteractions) }) | |
| .attr("width", function(d) { return x1(d.interactions); }) | |
| .attr("height", function(d) { return y.rangeBand() }) | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment