Week7 homework

Beef.csv

beef.js

            var fullwidth = 600;
			var fullheight = 400;
         
			var margin = { top: 20, right: 100, bottom: 40, left: 30};

            var width = fullwidth - margin.right - margin.left;
            var height = fullheight - margin.top - margin.bottom;
			
			var dateFormat = d3.time.format("%Y");
            var years = ["1983", "2014"];

			var xScale = d3.time.scale()
								.range([ 0, width])
                                .domain(
					d3.extent(years, function(d) {
						return dateFormat.parse(d);
					}));

			var yScale = d3.scale.linear()
								.range([0, height]);
			                     

			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10)
							.tickFormat(function(d) {
								return dateFormat(d);
							})
                            .innerTickSize([0])
                            .outerTickSize([0]);

			 var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.outerTickSize([0]);

             var tooltip = d3.select("body")
                            .append("div")
                            .attr("class", "mytooltip");
                
			 var line = d3.svg.line()
				.x(function(d) {
				    return xScale(dateFormat.parse(d.Year));
				})
				.y(function(d) {
					return yScale(+d.number);
				});

			 var svg = d3.select("#svg")
						.append("svg")
						.attr("width", fullwidth)
						.attr("height", fullheight)
                        .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
						
           

			d3.csv("Beef.csv", function(data) {

					console.log("original data", data);

				var dataset =  d3.nest()
						.key(function(d) {
							return d.Location;
						})
						.sortValues(function (a, b) { return dateFormat.parse(a.Year) - dateFormat.parse(b.Year)})
						.entries(data);

				
				console.log("nested data", dataset);

yScale.domain([
					d3.max(data, function(d) {
						return d3.max(data, function(d) {
							return +d.number;
						});
					}),0
				]);

                function get_values_for_Location(Location){
                
                    return dataset.filter(function (d) {
										return d.key == Location;
									})[0].values;
                }
                
                
                var arg = get_values_for_Location("Argentina");
                var length = arg.length;
                
                var group =
					svg.datum(arg)
					.append("g");
           
				group
					.append("path")
					.attr("class", "line")
					.attr("d", line);
                
                                
                var circles = group.selectAll("circle")
                            .data(function(d) { 
						return d;
					})
                 .enter()
                 .append("circle");
                
                circles
                .attr("cx",function(d){return xScale(dateFormat.parse(d.Year));})
                .attr("cy", function(d) {
						return yScale(d.number);})
                .attr("r", 2)
                .attr("id", function(d, i) {
                    if (i == 0 || i == length-1) {
                        return "highlight";
                    } else { return null; }
                })
                .classed("circle", true)
                .style("opacity", 0);
                

                circles.on("mouseover", mouseoverFunc)
                    .on("mousemove", mousemoveFunc)
                    .on("mouseout", mouseoutFunc);   
                    
                function mouseoverFunc(d){
                d3.select(this)
                .transition()
                .style("opacity", 1)
                .attr("r", 4);
                
                 tooltip
                    .style("display", null)
                    .html("<p>Country: <span style='color:#ffff00'>" + d.Location +"</span>" + "<br>Year: <span style='color:#ffff00'>" + d.Year +"</span>" + "<br>Kg/capita:<span style='color:#ffff00'> " + d3.round(d.number, 1) + "</span>" + "</p>");
                }
                  
                    function mousemoveFunc(d) {
                        console.log(d3.event.pageX, d3.event.pageY);
					tooltip
						.style("top", (d3.event.pageY - 5) + "px" )
						.style("left", (d3.event.pageX + 5) + "px");
					}

                    function mouseoutFunc(d) {
					d3.select(this)
						.transition()
						.style("opacity", 0)
						.attr("r", 2);
                        
			    tooltip.style("display", "none");  // this sets it to invisible!
			  }


          
                d3.select("button#Argentina").classed("selected", true);
                
                svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);
        
		d3.selectAll("button").on("click", function() {
					
				var selectedline = d3.select("path.line");
					var thisButton = d3.select(this);

					var newdata = get_values_for_Location(thisButton.attr("id"));  

					d3.selectAll("button").classed("selected", false);
					thisButton.classed("selected", true);
					selectedline
						.transition()
						.duration(2000)
						.attr("d", line(newdata));
            
                 var circles = d3.selectAll("circle").data(newdata);
                circles.transition()
                .attr("cx",function(d){return xScale(dateFormat.parse(d.Year));})
                .attr("cy", function(d) {
						return yScale(d.number);})
            
				});
                
                
			}); 

cattle.svg

Holstein_Friesian_dairy_cattle.svg

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>week7homework</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link rel="stylesheet" href="style.css">	
	</head>
	
	<body>
		<h1>Top Five Country Beef Per Capita Consumption </h1>
        <p>Data from OECD highlights trends in global beef consumption. Of the countries and regions represented, the top five countries for the amount of beef consumed per person in 2014 were Argentina, Uruguay, Brazil, the United States and Australia.</p> 
        <p><strong>Argentina</strong>, which is projected to consume 43.2 kilograms (95.2 pounds) per capita annually leads the trend.</p>
        <p>Although the global demand for meat is growing,The genetic basis of livestock is getting ever narrower. We are relying on a few, specialized breeds of animals, such as the black-and-white Holstein-Friesian dairy cattle that are raised in over 130 countries. </p>
        
		<div class="container">
			<div class="row">
        <div class="col-md-5">
        <div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn" id="Argentina">Argentina</button>
<button type="button" class="btn" id="Uruguay">Uruguay</button>
<button type="button" class="btn" id="Brazil">Brazil</button>
<button type="button" class="btn" id="USA">USA</button>
<button type="button" class="btn" id="Australia">Australia</button>
         

        </div>
            <div id="svg"></div>
            <p>Source: <a href="https://data.oecd.org/agroutput/meat-consumption.htm">OECD</a></p>
        </div>
        
        <div class="col-md-5 col-md-offset-2">
        	<div class="map_note">
                <h2>Presence of Holstein-Friesian dairy cattle</h2>
                <img src="Holstein_Friesian_dairy_cattle.svg" alt="cattle">
                <img src="cattle.svg" alt="cattle1" height="200" width="200" style="margin-left:100px";>
        	</div>
        </div>
      </div>

	</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	    <script type="text/javascript" src="d3.v3.js"></script>
		<script type="text/javascript" src="beef.js"></script>
	</body>
    


</html>

style.css

<style>
    body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 36px;
				margin-left: 60px;
                color:#904723;
                text-align: center;
			}
h2 {
				font-size: 16px;
    margin-left: 10px;
				margin-right: 20px;
                color:#904723;
			}

			p {
				font-size: 14px;
                margin-left: 60px;
                margin-right:60px;
                color:#904723;
			}

            .selected {
				background-color:#904723;
                opacity: 0.6;
                color:yellow;
            
			}

			svg {
				background-color: white;
			}

#svg {
width:620px;
}
			.axis path,
			.axis line {
				fill: none;
				stroke: grey;
				stroke-width: 1px;
			}

			.line {
				stroke: #904723;
				fill: none;
				stroke-opacity: 50%;
				stroke-width: 2px; 
			}


			.btn-group {
				padding-top: 20px;
                color:white;
			}
            
.btn {
background-color: rosybrown;
}





			.axis text {
				font-family: sans-serif;
				font-size: 12px;
                fill:dimgrey;
			}
            
            .row {
				padding-top: 50px;
			}
           
              .text.show {
            font: 12px sans-serif;
                fill: #4da6ff;
                opacity: 0.5;
            }
            
            .text.hide {
                font: 12px sans-serif;
                 fill: #4da6ff;
            opacity: 0;
            }

            .circle {
            fill: #ffff00;
            stroke:#904723;
            stroke-width:3px;
            }
            
            .mytooltip{
            position:absolute;
            z-index: 10;
            }
            
            .mytooltip p {
            background-color:#904723;
                border:white 1px solid;
                border-radius: 5px;
                padding:2px;
                max-width: 180px;
                font-weight:bold;
                margin-left: 5px;
                color:white;
            }
            
		</style>

Week7 homework

line chart with transition