Bar Lines - D3 Hackday with Ian by sampathweb

index.html

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

  <body>
  <svg width=960 height=500>
    <rect id="base" x=100 y=100 width=500 height=6></rect>
    <rect id="box" x=100 y=0 width=600 height=300 fill="none" stroke="#000"></rect>
  </svg>
    <script>
    var data = [5, 19, 20, 6, 29];
    var chartHeight = 300,
        chartWidth = 600,
        chartX = 100,
        xMargin = 15,
        yMargin = 15;

    var xScale = d3.scale.linear()
                                .domain([0, data.length-1])
                                .range([chartX + xMargin, chartWidth - xMargin]);

    var yScale = d3.scale.linear()
                                .domain([0, d3.max(data)])
                                .range([chartHeight, yMargin]);


    d3.select("#box").attr({
      width: chartWidth,
      height: chartHeight,
      x: chartX
    });
    d3.select("#base").attr({
      y: chartHeight,
      width: chartWidth,
      x: chartX
    });
    var svg = d3.select("svg");
    var circles = svg.selectAll("circle")
            .data(data)
            .enter()
        .append("circle")
        .attr({
        r: 10,
        cx: function(d, i) { return xScale(i);},
        cy: yScale
      });
    var bars = svg.selectAll("rect.bar")
            .data(data)
                .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(data)
            .enter()
            .append("line")
            .attr({
            x1: function(d, i) {
          return xScale(i);
        },
          y1: yScale,
          x2: function(d, i) {
          return xScale(i);
        },
          y2: yScale.range()[0],
          stroke: "#000",
          "stroke-width": 10
    });


    var line = svg.selectAll("path")
        .data([data])
        .enter()
        .append("path")
        .attr({
        d: function(d, i) {
          var x = xScale(0);
          var y = yScale(d[0]);
          var string = "M" + [x, y];
          console.log("HERE");
          console.log(d);
          for(var j=1;j < d.length; j++) {
            x= xScale(j);
            y= yScale(d[j]);
            string += "L" + [x, y];
            }
            console.log(string);
          return string;

        },
        stroke: "#000",
        fill: "none"

      });
    </script>
  </body>