d3 yoga by enjalot

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg id="my-svg"></svg>
  <div id="test"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("#my-svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var awesomeData = [
      5000, 42000, 66000, 170000, 22000, 79000
    ]
    var min = 0;
    var max = d3.max(awesomeData)
   
    var scale = d3.scaleLinear()
      .domain([0, max])
      .range([0,300])
    
    var lineScale = d3.scaleLinear()
      .domain([0, max])
      .range([300,0])
    
    var radiusScale = d3.scaleLinear()
      .domain([0, max])
      .range([0, 50])

    svg.selectAll("circle")
      .data(awesomeData)
    .enter()
      .append("circle")
      .attr("r", function(d) {
        //console.log("d:", d)
        return radiusScale(d)
      })
      .attr("cx", function(d,i) {
        return 50 + i * 100
      })
      .attr("cy", 155)
      .attr("fill", "#00a4ea")
      .attr("stroke", "#00327f")
      .attr("stroke-width", 4)
    
    var div = d3.select("#test")
    	.selectAll("div.bar")
    .data(awesomeData)
    .enter()
    	.append("div").classed("bar", true)
      
      .style("position", "absolute")
      .style("top", function(d,i) {
        return 24 + scale.range()[1] - scale(d)
      })
      .style("left", function(d,i) {
        return 50 + i * 100 - 20
      })
      .style("width", "40px")
      .style("height", function(d,i) {
        return scale(d)
      })
      .style("background-color", "#005c84")
      .style("border-radius", "5px")
    
    var line = d3.line()
    .x(function(d,i) {
      return 50 + i * 100
    })
    .y(function(d) {
      return 22 + lineScale(d)
    })
    
    var lineString = line(awesomeData)
    //console.log("LINE STRING", lineString)
    
    svg.append("path")
      .attr("d", lineString)
      .style("fill", "none")
      .style("stroke", "#111")

  </script>
</body>