D3 Examples - webconf tutorial

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    rect, path {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
  </style>
</head>
​
<body>
  <script>
    
    var n = 10;
​
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
​
    var data = [22, 32, 21, 23, 10, 22, 11, 19, 30, 50, 19, 30, 50, 19, 30, 87];
    
    var y = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, 100]);
    
        svg.selectAll("circle").data(data)
        .enter()
            .append("circle")
            .style("fill", "red")
        .attr("r", 5)
        //.attr("r", function(d) { return y(d); })
        .attr("cx", function(d, i) { return i * 55; })
        .attr("cy", function(d) { return 200 - y(d); })
            .on('mouseover', function(d, i) { d3.select(this).transition()
                                                                                .style("fill", "black")})
            .on('mouseout', function(d){ d3.select(this).transition()
                                                                                .style("fill", "red")})
​
    
    var line = d3.line()
                            .x(function(d, i) { return i * 55 ;})
                .y(function(d) { return 200 - y(d);})
                            .curve(d3.curveBasis)
​
    svg.selectAll(".line").data([data]).enter().append("path").attr("class", "line").attr("d", line)
    
  </script>
</body>
​
    