sampathweb/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: D3 - Basics

  
## 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 data = [
      5, 42, 66, 17, 22, 79
    ];
    var scale = d3.scaleLinear()
    							.domain([0, d3.max(data)])
    							.range([0, 250]);

    var radiusScale = d3.scaleLinear()
    									.domain([0, d3.max(data)])
    									.range([0, 50]);


//     svg.append("circle")
//     	.attr("r", 151)
//       .attr("cx", 200)
//       .attr("cy", 300)
//     	.attr("fill", "#00aad1")
//     	.attr("stroke", "#010")
//     	.attr("stroke-width", 20)

//     var div = d3.select("#test")
//     						.style("position", "absolute")
//     						.style("top", "160px")
//     						.style("left", "230px")
//     						.style("width", 100)
//     						.style("height", 100)
//     						.style("background-color", "#00bc51");

//     svg.selectAll("circle")
//     	.data(data)
//     	.enter()
//     		.append("circle")
//     			.attr("r", 50)
//     			.attr("cx", function(d){ return d * 10; })
//     			.attr("cy", 200)
//     			.style("fill", "red")

    var div = d3.select("#test")
    						.selectAll("div.bar")
    						.data(data)
    							.enter()
    								.append("div").classed("bar", true)
    								.style("position", "absolute")
    								.style("top", function(d, i) {
                      return 24 + 250 - scale(d)
                    })
    								.style("left", function(d, i) {
                      return 50 + i * 100;
                    })
    								.style("width", 40)
    								.style("height", function(d, i){
                      return scale(d);
                    })
    								.style("background-color", "blue")

    var circles = d3.selectAll("circle")
    								.data(data)
    								.enter()
    								.append("cirlce");


    var line = d3.line()
    						.x(function(d, i) {
                  return 50 + i * 100;
                })
    						.y(function(d){
                  return d
                });

    var lineString = line(data);

    svg.append("path")
    		.attr("d", lineString)
    .style("fill", "none")
    .style("stroke", "red")


  </script>
</body>
	<!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 data = [
	5, 42, 66, 17, 22, 79
	];
	var scale = d3.scaleLinear()
	.domain([0, d3.max(data)])
	.range([0, 250]);

	var radiusScale = d3.scaleLinear()
	.domain([0, d3.max(data)])
	.range([0, 50]);


	// svg.append("circle")
	// .attr("r", 151)
	// .attr("cx", 200)
	// .attr("cy", 300)
	// .attr("fill", "#00aad1")
	// .attr("stroke", "#010")
	// .attr("stroke-width", 20)

	// var div = d3.select("#test")
	// .style("position", "absolute")
	// .style("top", "160px")
	// .style("left", "230px")
	// .style("width", 100)
	// .style("height", 100)
	// .style("background-color", "#00bc51");

	// svg.selectAll("circle")
	// .data(data)
	// .enter()
	// .append("circle")
	// .attr("r", 50)
	// .attr("cx", function(d){ return d * 10; })
	// .attr("cy", 200)
	// .style("fill", "red")

	var div = d3.select("#test")
	.selectAll("div.bar")
	.data(data)
	.enter()
	.append("div").classed("bar", true)
	.style("position", "absolute")
	.style("top", function(d, i) {
	return 24 + 250 - scale(d)
	})
	.style("left", function(d, i) {
	return 50 + i * 100;
	})
	.style("width", 40)
	.style("height", function(d, i){
	return scale(d);
	})
	.style("background-color", "blue")

	var circles = d3.selectAll("circle")
	.data(data)
	.enter()
	.append("cirlce");


	var line = d3.line()
	.x(function(d, i) {
	return 50 + i * 100;
	})
	.y(function(d){
	return d
	});

	var lineString = line(data);

	svg.append("path")
	.attr("d", lineString)
	.style("fill", "none")
	.style("stroke", "red")



	</script>
	</body>