xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Birds in the Netherlands</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: antiquewhite; font-family: Helvetica, Arial, sans-serif; } h1 {font-family: sans-serif; font-weight: 100; font-size: 20px; color: burlywood; padding-left: 50px; } p {font-family: sans-serif; font-weight: 100; font-size: 11px; padding-left: 50px; } a:link { text-decoration: none; color: gray; } a:hover { text-decoration: underline; } a:visited { color: gray; } a:active { color: steelBlue; } .line:hover { stroke: black; stroke-width:1.5; } text {font-family: sans-serif; font-size: 9px; } svg { background-color: white; } #container { width: 700px; margin-left: auto; margin-right: auto; margin-top: 25px; padding: 25px; background-color: white; box-shadow: 1px 1px 1px 1px #ccc; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 9px; } #tooltip { position: absolute; padding:2px; background-color: antiquewhite; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; pointer-events: none; } #tooltip.hidden { display: none; } #tooltip p { padding-left: 15px; padding-right: 15px; font-family: sans-serif; font-size: 10px; line-height: 15px; } </style> </head> <body> <div id="tooltip" class="hidden"> <p><span id="value"></span></p> </div> <div id="container"> <h1>Birds in the Netherlands</h1> <p>How are the birdpopulations in the Netherlands developing over the years? </p> <p>Source: <a href="https://www.compendiumvoordeleefomgeving.nl/indicatoren/nl1194-Stadsvogels.html?i=4-34">Compendium voor de leeromgeving</a>, 2015</p> </div> <script type="text/javascript"> //Dimensions and padding var w = 700; var h = 400; var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left//Set up date formatting and years var dateFormat = d3.time.format("%Y");//Set up scales var xScale = d3.time.scale() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]);//Configure axis generators var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(15) .tickFormat(function(d) { return dateFormat(d); }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left");//Configure line generator 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("#container") .append("svg") .attr("width", w) .attr("height", h);//Load data d3.csv("vogels.csv", function(data) { var years = ["1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];//Create a new, empty array to hold restructured dataset var dataset = [];//Loop once for each row in data for (var i = 0; i < data.length; i++) {//Create new object with this birds's name and empty array dataset[i] = { bird: data[i].Vogel, birdindex: [] };//Loop through all the years for (var j = 0; j < years.length; j++) { // If value is not empty if (data[i][years[j]]) { //Add a new object to the birdindex data array //for this bird dataset[i].birdindex.push({ year: years[j], amount: data[i][years[j]] }); } } } //Set scale domains xScale.domain([ d3.min(years, function(d) { return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.birdindex, function(d) { return +d.amount; }); }), 0 ]);//Make index=0 line (not very flexible yet) svg.append("line") .attr("stroke", "black") .attr("x1", 100) .attr("y1", 192) .attr("x2", 600) .attr("y2", 192); //Make a group for each bird var groups = svg.selectAll("g") .data(dataset) .enter() .append("g");//Within each group, create a new line/path,//binding just the birdindex data to each one groups.selectAll("path") .data(function(d) { return [ d.birdindex ]; }) .enter() .append("path") .attr("class", "line") .attr("stroke-width", 0) .attr("stroke", "burlywood") .attr("d", line) .attr("fill", "none") .transition() .duration(2500) .attr("stroke-width", 1.5); //Name bird groups.selectAll("path") .data(function(d) { return [ d.bird ]; }) //Tooltips .on("mouseover", function(d) { //location tooltip var xPosition = (d3.event.pageX); var yPosition = (d3.event.pageY-30); //Update the tooltip position and value d3.select("#tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px") .select("#value") .text(d) //Show the tooltip d3.select("#tooltip").classed("hidden", false); }) .on("mouseout", function() { //Hide the tooltip d3.select("#tooltip").classed("hidden", true); }); //Axes svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2]) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3]) + ",0)") .call(yAxis); //y axis name svg.append("text") .attr("x",(padding[3]-50)) .attr ("y", h/2-6) .text("Index"); //x axis name svg.append("text") .attr("x",w/2) .attr ("y",h-10) .text("Year"); //End data load function }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js