Basically a small multiples vis of the Fellowship of the Ring characters (the 'Fellows' in the fellowship)
The script is from http://www.ageofthering.com/atthemovies/scripts/ and I used html-parser in nodejs to parse the script to get the character occurence.
Mainly an experiment for small multiples... And I do realise that I've missed out Aragon ;)
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| /* svg { width:100%; height: 100% } */ | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .half-width-div{ | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="multiplesContainer" class="chart-container"></div> | |
| <script> | |
| var fellows = { | |
| "frodo": [0, 0, 10, 10, 5, 0, 5, 10, 3, 17, 6, 26, 6, 4, 14, 28, 2, 0, 4, 6, 0, 4, 10, 0, 0, 0, 1, 1, 1, 1, 0, 3, 6, 5, 2, 16, 0], | |
| "sam": [0, 0, 0, 0, 1, 0, 0, 1, 2, 5, 4, 11, 8, 4, 4, 18, 0, 0, 5, 5, 6, 0, 7, 0, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 5, 9, 1], | |
| "legolas": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 1, 2, 2, 0, 2, 6, 1], | |
| "gimli": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 2, 3, 7, 1, 4, 13, 6], | |
| "pippin": [0, 0, 0, 0, 4, 0, 0, 4, 1, 0, 0, 1, 4, 7, 5, 19, 0, 0, 2, 2, 2, 0, 0, 0, 0, 0, 2, 2, 0, 0, 4, 4, 2, 4, 0, 6, 0], | |
| "merry": [0, 0, 0, 0, 5, 0, 0, 5, 0, 0, 0, 0, 8, 6, 2, 21, 1, 0, 3, 4, 2, 0, 0, 0, 0, 0, 3, 3, 0, 0, 2, 2, 3, 4, 0, 7, 0], | |
| "gandalf": [0, 0, 10, 20, 1, 15, 6, 22, 0, 24, 0, 36, 0, 0, 0, 0, 0, 0, 0, 1, 0, 4, 3, 5, 0, 0, 5, 5, 0, 2, 2, 9, 14, 12, 5, 42, 0], | |
| "boromir": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 9, 13, 0, 0, 4, 8, 4, 0, 1, 10, 1] | |
| }; | |
| </script> | |
| <script> | |
| function barChart(){ | |
| var width = 500, | |
| height = 160, | |
| margins = {top: 40, bottom: 40, left:40, right:40}; | |
| var xScale, yScale, xAxis, yAxis; | |
| var data, | |
| fillColor; | |
| function chart(selection){ | |
| var svg, barSVG, xSVG, ySVG; | |
| function setScales(data){ | |
| xScale = d3.scale.ordinal().rangeBands([0, (width - margins.left - margins.right)]).domain(d3.range(data.length)), | |
| yScale = d3.scale.linear().range([(height - margins.bottom - margins.top), margins.top]).domain([0, d3.max(data)]) | |
| } | |
| function drawBars(data, svg){ | |
| var bars = svg.selectAll('rect') | |
| .data(data) | |
| bars.enter() | |
| .append('rect'); | |
| bars.attr('y', function (d, i) { | |
| return yScale(d) + margins.top}) | |
| .attr('x', function(d, i){ | |
| return xScale(i) | |
| }) | |
| .attr('width', 0.8 * width / data.length) | |
| .attr('height', function (d, i) { | |
| return height - margins.bottom - margins.top - yScale(d)} ) | |
| .attr("fill", fillColor); | |
| bars.exit().remove() | |
| } | |
| function drawXAxis(svg){ | |
| xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom").tickValues(xScale.domain().filter(function(d, i) { return !(i % 4); })) | |
| // .tickFormat(function(d,i){ | |
| // if(i % 2 == 0){ | |
| // return | |
| // } | |
| // }); | |
| svg.call(xAxis); | |
| } | |
| var drawYAxis = function(svg){ | |
| yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left").ticks(3); | |
| svg.call(yAxis) | |
| } | |
| //assuming data is in an array | |
| selection.each(function (data) { | |
| svg = d3.select(this).selectAll("svg").data([data]) | |
| newSVG = svg.enter().append('svg'); | |
| console.log(data) | |
| newSVG.append('g').attr('class', 'bars') | |
| .attr('transform', 'translate(' + margins.left + ',' + '0' + ')'); | |
| newSVG.append('g').attr('class', 'x axis') | |
| .attr('transform', 'translate(' + margins.left + ',' + (height - margins.bottom) + ')'); | |
| newSVG.append('g').attr('class', 'y axis') | |
| .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); | |
| svg.attr("width" , width) | |
| .attr("height", height); | |
| setScales(data); | |
| drawBars(data, svg.select('.bars')); | |
| drawXAxis(svg.select('.x.axis')); | |
| drawYAxis(svg.select('.y.axis')); | |
| }); | |
| } | |
| chart.width = function(val) { | |
| if (!arguments.length) { | |
| return width; | |
| }; | |
| width = val; | |
| return chart; | |
| }; | |
| chart.height = function(val) { | |
| if (!arguments.length) { | |
| return height; | |
| }; | |
| height = val; | |
| return chart; | |
| }; | |
| chart.margins = function(val) { | |
| if (!arguments.length) { | |
| return margins; | |
| }; | |
| margins = val; | |
| return chart; | |
| } | |
| chart.fill = function(fill){ | |
| if (!arguments.length) { | |
| return fillColor; | |
| }; | |
| fillColor = fill; | |
| return chart; | |
| } | |
| chart.xScale = function(scale){ | |
| if (!arguments.length) { | |
| return xScale | |
| } | |
| xScale = scale; | |
| return chart | |
| } | |
| chart.yScale = function(domain){ | |
| if (!arguments.length) { | |
| return yScale.domain() | |
| } | |
| chart.yScale.domain = domain; | |
| return chart | |
| } | |
| chart.xAxis = function(axis){ | |
| if (!arguments.length) { | |
| return xAxis | |
| } | |
| xAxis = axis; | |
| return chart; | |
| } | |
| chart.yAxis = function(axis){ | |
| if (!arguments.length) { | |
| return yAxis | |
| } | |
| yAxis = axis; | |
| return chart; | |
| } | |
| return chart | |
| } | |
| var chartWidth = 0.35 * document.getElementById("multiplesContainer").offsetWidth, | |
| chartHeight = 120; | |
| var chars = Object.keys(fellows) | |
| var maxIndivdual = []; | |
| chars.forEach(function(d){ | |
| maxIndivdual.push(d3.max(d)) | |
| }) | |
| var max = d3.max(maxIndivdual) | |
| var barplot = barChart().width(chartWidth).height(chartHeight).margins({top: 10, bottom: 30, left:40, right:40}).fill('blue') | |
| barplot.yScale([0, max]) | |
| chars.forEach(function(d){ | |
| var id = d + 'chart' | |
| d3.select("#multiplesContainer").append('div').attr('class', 'half-width-div').attr('id', id); | |
| d3.select('#' +id).append('span').text(d) | |
| d3.select('#' +id).datum(fellows[d]).call(barplot) | |
| }) | |
| </script> | |
| </body> |