Old school D3 from simpler times

All examples By author By category About

annemariet

Full window Github gist

webconf tutorial

Built with blockbuilder.org

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

https://d3js.org/d3.v4.min.js