Module 4

<!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;
             } 
            
          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>

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