D3 - Basics

forked from anonymous's block: D3 - Basics

<!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>

https://d3js.org/d3.v4.min.js