D3 Module 6 (Multiple Line Chart)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 4 Exercise</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: Helvetica, sans-serif;
			}

h1 {
				font-size: 28px;
				margin: 0;
			}

p {
				font-size: 14px;
				margin: 5;
			}

svg {
				background-color: silver;
			}

path:hover {
				stroke-width:4;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>

<h1>The Race of the Scottish Parliament</h1>

<p>How the four biggest political parties in Scotland squared off in the campaign spending stakes during the last Scottish Parliament elections. Source: <a href="https://search.electoralcommission.org.uk">The Electoral Commission</a> as of April 2015.</p>

var w = 650;
			var h = 500;
			var padding = [ 10, 20, 40, 75];  //Top, right, bottom, left

var dateFormat = d3.time.format("%-m/%-d/%y");

var xScale = d3.time.scale()
								.range([padding[3],w - padding[1]]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

var commasFormatter = d3.format(",.0f");

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10)
							.tickFormat(function(d) { return dateFormat(d);})
							.outerTickSize(0);

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							. ticks(10)
							.tickFormat(function(d) { return "£" + commasFormatter(d);})
							.outerTickSize(0);

var line = d3.svg.line()
				.x(function(d){
					return xScale(dateFormat.parse(d.date));
					})
				.y(function(d){
					return yScale(+d.amount);
				})

var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

d3.csv("CampaignSpending3.csv", function(data) {

xScale.domain([d3.min(data,function(d) {
					return dateFormat.parse(d.SpendingDate);}),d3.max(data, function(d) {
					return dateFormat.parse(d.SpendingDate);
				}) ]);

yScale.domain([d3.max(data,function(d) {
					return +d.ScotlandSpending;}),d3.min(data, function(d) {
					return +d.ScotlandSpending;
				}) ]);

var parties = ['Conservative Party','Labour Party','Liberal Democrats','Scottish National Party (SNP)'];

var newData = [];

for(var i=0;i<parties.length;i++){
					newData[i]={
						party: parties[i],
						spending: []
					};
					for (var j=0;j<data.length;j++){
						if(data[j].PoliticalParty==parties[i]){
									newData[i].spending.push({
									date:data[j].SpendingDate,
									amount:data[j].ScotlandSpending
							});
						}
						
					}
				
				}
				
				var groups = svg.selectAll("g")
								.data(newData)
								.enter()
								.append("g");

groups.append("title")
					.text(function(d) {
						return d.party
					});

groups.append("path")
					.attr("class","line")
					.attr("d",function(d){return line(d.spending);})
					.attr("fill","none")
					.attr("stroke",function(d){
						if (d.party=="Conservative Party"){
							return "blue"}
						else if (d.party=="Labour Party"){
							return "red"}
						else if (d.party=="Liberal Democrats"){return "orange"}
						else if (d.party=="Scottish National Party (SNP)"){return "yellow"}
					;})
					.attr("stroke-width",2)
					.attr("data-legend",function(d){return d.party});

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
					.call(yAxis);

legend = svg.append("g")
  						.attr("class","legend")
  						.attr("transform","translate(125,75)")
 						 .style("font-size","10px")
 						 .style("stroke","black")
 						 .style("fill","white")
 						 .call(d3.legend)

});

//d3.legend hack courtesy of https://bl.ocks.org/ZJONSSON/3918369

(function() {
d3.legend = function(g) {
  g.each(function() {
    var g= d3.select(this),
        items = {},
        svg = d3.select(g.property("nearestViewportElement")),
        legendPadding = g.attr("data-style-padding") || 5,
        lb = g.selectAll(".legend-box").data([true]),
        li = g.selectAll(".legend-items").data([true])

lb.enter().append("rect").classed("legend-box",true)
    li.enter().append("g").classed("legend-items",true)

svg.selectAll("[data-legend]").each(function() {
        var self = d3.select(this)
        items[self.attr("data-legend")] = {
          pos : self.attr("data-legend-pos") || this.getBBox().y,
          color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke") 
        }
      })

items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})

li.selectAll("text")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("text")})
        .call(function(d) { d.exit().remove()})
        .attr("y",function(d,i) { return i+"em"})
        .attr("x","1em")
        .text(function(d) { ;return d.key})
    
    li.selectAll("circle")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("circle")})
        .call(function(d) { d.exit().remove()})
        .attr("cy",function(d,i) { return i-0.25+"em"})
        .attr("cx",0)
        .attr("r","0.4em")
        .style("fill",function(d) { console.log(d.value.color);return d.value.color})  
    
    // Reposition and resize the box
    var lbbox = li[0][0].getBBox()  
    lb.attr("x",(lbbox.x-legendPadding))
        .attr("y",(lbbox.y-legendPadding))
        .attr("height",(lbbox.height+2*legendPadding))
        .attr("width",(lbbox.width+2*legendPadding))
  })
  return g
}
})()

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js