Module 5

<!DOCTYPE html>
<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>

//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