D3 Examples - lx meetup

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
#headline1 {
  font-size: 55px;
  font-family: 'Raleway Dots', cursive;
    font-family: 'Monoton', cursive;  
  padding: 5px;
  color: #f206d3;
  }
  
#headline2 {
  font-size: 25px;
  font-family: 'Raleway Dots', cursive;
  font-family: 'Monoton', cursive;
  font-family: 'Khand', sans-serif;  
  padding: 5px;
  color: #f206d3;
  }
  
#footnote {
  font-size: 10px;
  font-family: 'Raleway Dots', cursive;
  font-family: 'Monoton', cursive;
  font-family: 'Khand', sans-serif;  
  padding: 5px;
  color: #f206d3;
  }
​
#start, #reset {
  background-color: black;
  color: #f206d3;
  border: 1px solid #f206d3;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  border-radius: 50%;
  cursor: pointer;
  }
  
body {
  font-family: 'Raleway Dots', cursive;
  font-family: 'Monoton', cursive;
  font-family: 'Khand', sans-serif;
  background-color: black;
}
​
.axis line {
  fill: none;
  stroke: #ffffff;
  shape-rendering: crispEdges;
}
  
.axis text {
   font-size: 12px;
   fill: #d2f206;
}
  
.axis path {
  display: none;
}
​
.line {
  fill: none;
  stroke: #d2f206;;
  stroke-width: 2px;
}
      
</style>
​
<p id="headline1" style="position: absolute; margin-left: 6px; margin-top: 2px;"> Happycow</p>
<body>
<p id="headline2" style="position: absolute; margin-left: 6px; margin-top: 65px;"> Vegan restaurants </p>
  
<button id="start" style="position: absolute; margin-left: 6px; margin-top: 120px;">Start</button> 
  
<button id="reset" style="position: absolute; margin-left: 50px; margin-top: 120px">Reset</button> 
  
<p id="footnote" style="position: absolute; margin-left: 6px; margin-top: 570px;">Data: https://www.happycow.net/reports/stats.</p>
  
<link href="https://fonts.googleapis.com/css?family=Monoton|Raleway+Dots" rel="stylesheet">
  
<link href="https://fonts.googleapis.com/css?family=Khand|Monoton|Raleway+Dots" rel="stylesheet">
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
​
<script>
​
var margin = {top: 180, right: 20, bottom: 30, left: 50},
    width = 700 - margin.left - margin.right,
    height = 550 - margin.top - margin.bottom;
​
var parseDate = d3.time.format("%Y").parse;
​
var x = d3.time.scale()
          .range([0, width]);
  
var y = d3.scale.linear()
          .range([height, 0]);
​
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
        .ticks(12);
  
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
        .ticks(4);
​
var line = d3.svg.line()
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.restaurants); });
     
var svg = d3.select("body")
                        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
d3.csv("https://gist.githubusercontent.com/sandravizz/0d5aad031dc080c0d11af5ac5f76b5c7/raw/e851d0ba248baa1de536c90844a5f96b010b4a1d/happycow_restuarants", function(error, data) {
  if (error) throw error;
​
  data.forEach(function(d) {
    d.restaurants = +d.restaurants;
    d.year = parseDate(d.year);
  });
  
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain(d3.extent(data, function(whatever) { return whatever.restaurants; }));
​
  svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);
  
  svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     .append("text")
     .attr("transform", "rotate(0)")
     .attr("y", 0)
     .attr("x", -40)
     .attr("dy", "0.5em")
     .style("text-anchor", "start")
     .style ("fill", "#f206d3")
     .text("Number of addded restaurants");
​
  d3.select("#start")
    .on("click", function() {
​
    var path = svg.append("path")
              .datum(data) 
              .attr("class", "line")
              .attr("d", line);
​
 var totalLength = path.node().getTotalLength();
 console.log(totalLength);
​
  path.attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition() 
      .duration(6000) 
      .ease("linear") 
      .attr("stroke-dashoffset", 0); 
​
 });
​
  d3.select("#reset")
    .on("click", function() {d3.select(".line").remove();
  });
});
​
</script>
​
​
​
    