sampathweb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    hello markdown

forked from sampathweb's block: datasana #1
forked from sampathweb's block: datasana #circles

  
## 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 {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom:0;
    }
  </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>
    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"
          });


  	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>
	<!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 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom:0;
	}
	</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>
	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"
	});


	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>