D3 Examples - [introd3] basic chart

xxxxxxxxxx
 
<!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>
​
<body>
  <script>
​
    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>
    