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; padding-left: 50px; } h1 {font-family: sans-serif; font-weight: 100; font-size: 20px; color: #3AAAE1; padding-left: 50px; } h2 {font-family: sans-serif; font-weight: 100; font-size: 13px; color: #3AAAE1; padding-left: 50px; } svg {background-color: white; } circle:hover {fill: red; } text {font-family: sans-serif; font-size: 9px; } .axis path, .axis line {fill: none; stroke: black; shape-rendering: crispEdges; } .axis text {font-family: sans-serif; font-size: 8px; } .axis path, .axis line {stroke-width: 0.25px; } circle {shape-rendering: crispEdges; } </style> </head> <body> <h1>Tweets about eclipse</h1><h2>(mouse over to read tweet)</h2> <p> This plot shows the tweets that mention the eclipse in Utrecht on March 20th 2015. </p> <script type="text/javascript"> //diversen var w = 900; //width var h = 425; //height var parseDate = d3.time.format("%H:%M:%S").parse; //time on x var padding = [ 30, 10, 50, 50 ]; //padding top, right, bottom, left //set scales var xScale = d3.time.scale() //time .range([ padding[3], 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 yScale = d3.scale.log() //log .range([ padding[0], h - padding[2] ]); //met een range van 0 tot breedte minus paddings //set axis var xAxis = d3.svg.axis() //voorbereiding as met een schaal en een locatie .scale(xScale) .orient("bottom") //cijfers en ticks staan onder de as .tickSize(3) .ticks(12) ; var yAxis = d3.svg.axis() //voorbereiding as met een schaal en een locatie .scale(yScale) .orient("left") //cijfers en ticks staan links naast as .tickFormat(function (d) { return yScale.tickFormat(4,d3.format(",d"))(d) }) .tickSize(3); //smaller ticks //start svg var svg = d3.select("body") //selecteert body, zet er svg in met breedte en hoogte .append("svg") .attr("width", w) .attr("height", h); //GET DATASET 1 - elcipse d3.csv("Utrecht-zon.csv", function(error, data) { data.forEach(function(d) { d.time = parseDate(d.time); //time }); //set domains xScale.domain(d3.extent(data, function(d) {return +d.time;})); yScale.domain([d3.max(data, function(d) {return +d.userfollowerscount;}),1]).nice(); //1 because of log scale //make rect (eclipse zone) svg.append("rect") .attr("fill", "white") .transition() .duration(1500) .attr("x",390) //next step: can I program this (in stead of guessing) .attr ("y", padding[0]) .attr ("width", 90) .attr ("height", (h-padding[0]-padding[2])) .attr("fill", "#ECECEC"); svg.append("text") //eclipse .attr("x",420) .attr ("y",(padding[0]+20)) .text("Eclipse"); //draw circles var circles = svg.selectAll("circle") //hier circle in svg zetten, pak data, make placeholder, zet erin .data(data) .enter() .append("circle"); circles.attr("r", 0.01) .attr("fill", "#3AAAE1") .style("opacity", 0.5) .append("title") .text(function(d) { return d.text; });//transition circles circles.sort(function(a, b) { return d3.ascending(+a.time, +b.time); //sort data in time }) .transition() .delay(function(d, i) { return (500+(i * 12)); }) .duration(1500) .attr("cx", function(d) {return xScale(+d.time);}) .attr("cy", function(d) {return yScale(+d.userfollowerscount);}) .attr("r", 4); //x and y axis 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(0," + (h - padding[2] ) + ")") .call(xAxis); //Transform geeft locatie aan //geef groep een classnaam met x en axis // call tekent de as svg.append("g") //zet groep in svg met as. .attr("class", "y axis") //let op. onderaan het script zodat het bovenop de data staat .attr("transform", "translate(" + (padding[3] ) + ",0)") .call(yAxis); //y axis name svg.append("text") .attr("x",padding[3]) .attr ("y",h/2) .attr("transform", "translate(-200,250) rotate(-90)") .text("Tweeted to x followers"); //draw tweetbird 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-870) + "," + (h-250)+ ")"); //handmatig de locatie verplaatsen //end }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js