#datasana 2

datasana #2

forked from micahstubbs's block: building blocks svg flag

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>

<body>
  <svg width=100% height=100%>
    <rect id="base" x=100 y=300 width=600 height=6></rect>
    <rect id="box" x=100 y=0 width=600 height=300 fill="none" stroke="#000"></rect>
    
  </svg>
  <script>
    var list = [
      5, 19, -10, 6, 29
    ]
    
    var chartX = 121;
    var chartWidth = 675;
    var chartHeight = 485;
    var xMargin = 15;
    
    d3.select("#box").attr({
      width: chartWidth,
      height: chartHeight,
      x: chartX
    })
    d3.select("#base").attr({
      width: chartWidth,
      x: chartX,
      y: chartHeight
    })
    
    var xscale = d3.scale.linear()
      .domain([0, list.length-1])
      .range([chartX + xMargin, chartX + chartWidth - xMargin])
    
    var yscale = d3.scale.linear()
      .domain([0, d3.max(list, function(d) { return d })])
      .range([chartHeight, 0])
    
    var svg = d3.select("svg");
    
    var circles = svg.selectAll("circle")
      .data(list)
      .enter()
      .append("circle")
      .attr({
        r: 10,
        cx: function(d,i) { 
          return xscale(i);
        },
        cy: function(d,i) {
          return yscale(d);
        }
      })
    
    var bars = svg.selectAll("rect.bar")
      .data(list)
      .enter()
      .append("rect").classed("bar", true)
      .attr({
        x: function(d,i) {
          return xscale(i);
        },
        y: function(d,i) {
          return yscale(d);
        },
        width: 10,
        height: function(d,i) {
          return chartHeight - yscale(d)
        },
        fill: "orange"
      })
    
    var barLines = svg.selectAll("line")
    .data(list)
    .enter()
    .append("line")
    .attr({
      x1: function(d,i) {
        return xscale(i)
      },
      y1: function(d,i) {
        return yscale(d);
      },
      x2: function(d,i) {
        return xscale(i)
      },
      y2: function(d,i) {
        return yscale.range()[0] //chartHeight
      },
      stroke: "#7a7a7a",
      "stroke-width": 10
    })
    
    var line = svg.selectAll("path")
      .data([list])
      .enter()
      .append("path")
      .attr({
        d: function(entries,index) {
          var x = xscale(0);
          var y = yscale(entries[0]);
          var string = "M" + [x,y];
          console.log("STRING", string);
          for(var i = 1; i < entries.length; i++) {
            x = xscale(i);
          	y = yscale(entries[i]);
            string += "L" + [x,y];
          }
          console.log("STRING AFTER", string)
          return string
        },
        fill: "none",
        stroke: "#000"
      })
        
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js