datasana #rects

hello markdown

forked from sampathweb's block: datasana #1

forked from sampathweb's block: datasana #circles

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

</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>
    console.log("you are now rocking with d3", d3);
    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"
          });

});
  </script>
</body>

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