[introd3] basic chart - manual

forked from romsson's block: [introd3] basic chart - manual

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <style>
    rect {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
  </style>
</head>

var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

var data = [10,20,40,60,200];
    
		var y = d3.scaleLinear()
    	.domain(0, d3.max(data))
    	.range(0, 200)
    
    var x = d3.scaleBand()
    	.domain(d3.range(data.length))
    	.range([0, 400])
    
	var rainbow = d3.scaleOrdinal(d3.schemeCategory20b)

var rainbow2 = d3.scaleOrdinal(d3.schemeCategory20b)
		.domain (d3.extent(data))
    .range (["blue", "red"])

svg.selectAll("rect").data(data).enter()
    .append("rect")
    .attr("y", function(d,i) {return 450 - d;})
    .attr("x", function(d,i) {return i * 40})
    .attr("height", function(d,i) {return d;})
    .attr("width", x.bandwidth())
    .style("fill", function(d,i){return rainbow(i);})
    .style("fill-opacity", 1)
    .style("stroke", function(d,i){return rainbow2(i * 10);})
    .style("stroke-width", 10)

svg.selectAll("circle").data(data).enter()
    .append("circle")
    .attr("cy", 150)
    .attr("cx", function(d,i) {return i * 50})
    .attr ("r", function(d,i) {return i * 50})
    .attr("height", 10)
    .attr("width", 20)
    .style("fill", "black")
    .style("fill-opacity", 0.5)

</script>
</body>

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

https://d3js.org/d3-color.v1.min.js