xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>My first D3 chart</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body {background-color: white; margin-left:35px; margin-top: 35px; line-height: 8px; } p {font-family: sans-serif; font-weight: 100; font-size: 12px; } h1 {font-family: sans-serif; font-weight: 100; font-size: 20px; color: #3AAAE1; } h2 {font-family: sans-serif; font-weight: 100; font-size: 13px; color: #3AAAE1; } svg {background-color: white; } rect:hover {fill: #F39200; } text {font-family: sans-serif; font-size: 9px; } .axis path, .axis line {fill: none; stroke: black; shape-rendering: crispEdges; } .x.axis text {font-family: sans-serif; font-size: 8px; } .x.axis path, .x.axis line {stroke-width: 0.25px; } rect {shape-rendering: crispEdges; } </style> </head> <body> <h1>Top 15 Zonsverduistering-tweets (=eclipse) with the most followers</h1><h2>(mouse over for more information)</h2> <p> Between 17:00 19 march and 17:00 20 march 2015</p> <script type="text/javascript"> var w = 600; //width var h = 425; //height var padding = [ 30, 10, 30, 100 ]; //padding top, right, bottom, left var topx = 15 //show only the first 15( or x) of the dataset var barheight = ((h - padding[0]) / topx ) var widthScale = d3.scale.linear() //schaal breedte vaststellen, lineair .range([ 0, w - padding[1] - padding[3] ]); //met een range van 0 tot breedte minus paddings (de domain stel je pas //later in omdat je nog niet weet hoe groot je dataset is var xAxis = d3.svg.axis() //voorbereiding as met een schaal en een lokatie .scale(widthScale) .orient("top") //cijfers en ticks staan boven de as .ticks(5) //less ticks .tickSize(3); //smaller ticks var svg = d3.select("body") //selecteert body, zet er svg in met breedte en hoogte .append("svg") .attr("width", w) .attr("height", h); d3.csv("Utrecht-zon.csv", function(data) { //leest data in en daarmee ga je onderstaande handelingen uitvoeren // Note to self: don't use undercore in dataset data.sort(function(a, b) { //als je hier niets doet, dan is de data niet gesorteerd return d3.descending(+a.userfollowerscount, +b.userfollowerscount); //+ om ervoor te zorgen dat de data als getal wordt gezien }); widthScale.domain([ 0, d3.max(data, function(d) {return +d.userfollowerscount;}) ]); //domain van breedte schaal bepalen (0 tot max waarde) var rects = svg.selectAll("rect") //hier rect in svg zetten, pak data, make placeholder, zet erin .data(data) .enter() .append("rect"); rects.attr("x", padding[3]) //met de waarden: coord en breedte, hoogte, fill, title .attr("y", function(d, i) { return (padding [0] + (i * barheight)); }) .attr("width", function(d) { return widthScale(d.userfollowerscount); }) .attr("height", barheight-5) .attr("fill", "#3AAAE1") //make all bars blue .append("title") .text(function(d) { return "This tweet was tweeted to " + d.userfollowerscount + " followers: " + d.text; }); svg.selectAll("text") .data(data) .enter() .append("text") .text(function(d) { return d.fromuser; }) .attr("x", 0) .attr("y", function(d, i) { return (padding [0] + (i * barheight)+(0.5*barheight)); }) svg.append("g") //zet groep in svg met as. .attr("class", "x axis") //let op. onderaan het script zodat het bovenop de data staat .attr("transform", "translate(" + padding[3] + "," + (padding[0]-10) + ")") .call(xAxis); //Transform geeft locatie aan //geef groep een classnaam met x en axis // call tekent de as svg.append("path") //tekent tweet .attr("d","M160.113,92.429c-4.626,2.052-9.587,3.432-14.807,4.06c5.325-3.193,9.414-8.245,11.336-14.256 c-4.98,2.948-10.502,5.096-16.37,6.251c-4.698-5.014-11.394-8.139-18.805-8.139c-14.237,0-25.775,11.538-25.775,25.77 c0,2.018,0.23,3.983,0.671,5.872c-21.418-1.078-40.41-11.337-53.122-26.93c-2.219,3.815-3.485,8.24-3.485,12.962 c0,8.94,4.539,16.825,11.462,21.451c-4.228-0.134-8.197-1.294-11.672-3.226c0,0.11,0,0.215,0,0.326 c0,12.492,8.882,22.894,20.665,25.271c-2.157,0.594-4.434,0.906-6.783,0.906c-1.664,0-3.279-0.163-4.856-0.465 c3.289,10.229,12.804,17.693,24.078,17.899c-8.815,6.912-19.927,11.025-32.006,11.025c-2.085,0-4.132-0.115-6.146-0.359 c11.399,7.315,24.951,11.581,39.504,11.581c47.403,0,73.332-39.274,73.332-73.317c0-1.122-0.029-2.239-0.077-3.336 C152.295,102.141,156.661,97.597,160.113,92.429") .attr("fill", "#3AAAE1") .attr("transform", "translate(" + (w-170) + "," + (h-350)+ ")"); //handmatig de locatie verplaatsen }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js