D3 test right data

Please note, data will be randomised until December 2014. It is based on Ipsos MORI's long term Issues Index survey 1974 - 2014.

forked from DStruths's block: d3.js Multi-series line chart interactive

forked from allenwko's block: d3.js Multi-series line chart interactive

forked from nadinagerlach's block: D3 test final

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart with Multiple Lines</title>
		<style type="text/css">
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}
			h1 {
				font-size: 24px;
				margin: 0;
			}
			p {
				font-size: 14px;
				margin: 10px 0 0 0;
				width: 700px;
			}
			svg {
				background-color: white;
			}
			path.line {
				fill: none;
				stroke: gray;
			}
			.unfocused {
				opacity: .5;
				stroke-width: 1px;
			}
			.focused {
				opacity: 1;
				stroke-width: 2px;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				stroke-width: 1px;
			}
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			text.linelabel {
				font-size: 9pt;
				color: gray;
			}
			circle {
				fill: gray;
			}
			.tooltip {
				position: absolute;
				z-index: 10;
			}
			.tooltip p {
				background-color: white;
				border: gray 1px solid;
				padding: 2px;
				max-width: 180px;
			}
		</style>
	</head>
	<body>
		<p>Mouse over the lines to see data points and highlight a line.</p>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<script type="text/javascript">
			//Dimensions and padding
			var fullwidth = 700;
			var fullheight = 600;
			var margin = {top: 20, right: 100, bottom: 40, left:100};
			var width = fullwidth - margin.left - margin.right;
			var height = fullheight - margin.top - margin.bottom;
			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");
			//Set up scales
			var xScale = d3.time.scale()
								.range([ 0, width ]);
			var yScale = d3.scale.linear()
								.range([ 0, height ]);
			//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							})
							.outerTickSize([0])
							.innerTickSize([0]);
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.outerTickSize([0]);
			//Configure line generator
			// each line dataset must have a d.year and a d.amount for this to work.
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);
				});
			//Create the empty SVG image
			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullwidth)
						.attr("height", fullheight)
						.append("g")
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
			var tooltip = d3.select("body")
      	.append("div")
      	.attr("class", "tooltip");
			//Load data
			d3.csv("co2_emissions.csv", function(data) {
				//New array with all the years, for referencing later
				var years = ["1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010"];
				// or you could get this by doing:
// 				var years = d3.keys(data[0]).slice(0, 54-4); //
				//Create a new, empty array to hold our restructured dataset
				var dataset = [];
				//Loop once for each row in data
				data.forEach(function (d, i) {
					var myEmissions = [];
					//Loop through all the years - and get the emissions for this data element
					years.forEach(function (y) {
						// If value is not empty
						if (d[y]) {
							//Add a new object to the new emissions data array - for year, amount
							myEmissions.push({
								country: d.countryName, // we can put the country in here too. It won't hurt.
								year: y,
								amount: d[y]  // this is the value for, for example, d["2004"]
 							});
						}
					});
					//Create new object with this country's name and empty array
					// d is the current data row... from data.forEach above.
					dataset.push( {
						country: d.countryName,
						emissions: myEmissions  // we just built this!
						} );
				});
				//Uncomment to log the original data to the console
				// console.log(data);
				//Uncomment to log the newly restructured dataset to the console
				console.log(dataset);
				//Set scale domains - max and mine of the years
				xScale.domain(
					d3.extent(years, function(d) {
						return dateFormat.parse(d);
					}));
				// max of emissions to 0 (reversed, remember)
				yScale.domain([
					d3.max(dataset, function(d) {
						return d3.max(d.emissions, function(d) {
							return +d.amount;
						});
					}),
					0
				]);
				//Make a group for each country
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g");
				//Within each group, create a new line/path,
				//binding just the emissions data to each one
				groups.selectAll("path")
					.data(function(d) { // because there's a group with data already...
						return [ d.emissions ]; // it has to be an array for the line function
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.classed("unfocused", true) // they are not focused till mouseover
					.attr("id", function(d) {
						// we are attaching an id to the line using the countryname, replacing
						// the spaces with underscores so it's a valid id.
						// this will be useful when we do the mouseover and want to highlight a line too.
						if (d[0] && d[0].length != 0) {
							// this if-test makes sure there is an array and it's not empty.
							return d[0].country.replace(/ |,|\./g, '_');
						}
					})
					.attr("d", line);
			// Tooltip dots
			var circles = groups.selectAll("circle")
								.data(function(d) { // because there's a group with data already...
											return d.emissions; // NOT an array here.
								})
								.enter()
								.append("circle");
				circles.attr("cx", function(d) {
						return xScale(dateFormat.parse(d.year));
					})
					.attr("cy", function(d) {
						return yScale(d.amount);
					})
					.attr("r", 3)
					.attr("id", function(d) {
						return d.country.replace(/ |,|\./g, '_');
					})
					.style("opacity", 0); // this is optional - if you want visible dots or not!
				// Adding a subtle animation to increase the dot size when over it!
				circles
					.on("mouseover", mouseoverFunc)
					.on("mousemove", mousemoveFunc)
					.on("mouseout",	mouseoutFunc);
			// We're putting the text label at the group level, where the country name was originally.
			//We can access data here, because it's already attached!
			// We use the scales to position labels at end of line.
			groups.append("text")
	      .attr("x", function(d) {
	      	if (d.emissions.length != 0) {
		      	var lastYear = d.emissions[d.emissions.length-1].year;
		      	return xScale(dateFormat.parse(lastYear));
		      }
	      })
	      .attr("y", function(d) {
	      	if (d.emissions.length != 0) {
		      	var lastAmount = d.emissions[d.emissions.length-1].amount;
		      	return yScale(+lastAmount);
	      	}
	      })
	      .attr("dx", "3px")
	      .attr("dy", "3px")
	      .text(function(d) {
	      	if (d.emissions.length != 0) {
	      		var lastAmount = d.emissions[d.emissions.length-1].amount;
	      		if (+lastAmount > 700000) {
	      			return d.country;
	      		}
	      	}
	      })
	      .attr("class", "linelabel");
				//Axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis);
				svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);
				function mouseoverFunc(d) {
					// this will highlight both a dot and its line.
					var lineid = d3.select(this).attr("id");
					d3.select(this)
						.transition()
						.style("opacity", 1)
						.attr("r", 4);
					d3.select("path#" + lineid).classed("focused", true).classed("unfocused", false);
					tooltip
						.style("display", null) // this removes the display none setting from it
						.html("<p>" + d.year +
								  "<br>$" + d.amount + "</p>");
					}
				function mousemoveFunc(d) {
					tooltip
						.style("top", (d3.event.pageY - 10) + "px" )
						.style("left", (d3.event.pageX + 10) + "px");
					}
				function mouseoutFunc(d) {
					d3.select(this)
						.transition()
						.style("opacity", 0)
						.attr("r", 3);
					d3.selectAll("path.line").classed("unfocused", true).classed("focused", false);
			    tooltip.style("display", "none");  // this sets it to invisible!
			  }
			}); // end of data csv
		</script>

</body>
</html>

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