Fellowship of the ring movie character occurence

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js