FlameFuel/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from enjalot's block: d3 yoga

  
## 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 awesomeData = [
      5000, 42000, 66000, 170000, 22000, 79000
    ]
    var min = 0;
    var max = d3.max(awesomeData)

    var scale = d3.scaleLinear()
      .domain([0, max])
      .range([0,300])

    var lineScale = d3.scaleLinear()
      .domain([0, max])
      .range([300,0])

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

    svg.selectAll("circle")
      .data(awesomeData)
    .enter()
      .append("circle")
      .attr("r", function(d) {
        //console.log("d:", d)
        return radiusScale(d)
      })
      .attr("cx", function(d,i) {
        return 50 + i * 100
      })
      .attr("cy", 155)
      .attr("fill", "#00a4ea")
      .attr("stroke", "#00327f")
      .attr("stroke-width", 4)

    var div = d3.select("#test")
    	.selectAll("div.bar")
    .data(awesomeData)
    .enter()
    	.append("div").classed("bar", true)

      .style("position", "absolute")
      .style("top", function(d,i) {
        return (24 + scale.range()[1] - scale(d)) +'px'
      })
      .style("left", function(d,i) {
        return (50 + i * 100 - 20) + 'px'
      })
      .style("width", "40px")
      .style("height", function(d,i) {
        return scale(d) +'px'
      })
      .style("background-color", "#005c84")
      .style("border-radius", "5px")

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

    var lineString = line(awesomeData)
    //console.log("LINE STRING", lineString)

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

  </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 awesomeData = [
	5000, 42000, 66000, 170000, 22000, 79000
	]
	var min = 0;
	var max = d3.max(awesomeData)

	var scale = d3.scaleLinear()
	.domain([0, max])
	.range([0,300])

	var lineScale = d3.scaleLinear()
	.domain([0, max])
	.range([300,0])

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

	svg.selectAll("circle")
	.data(awesomeData)
	.enter()
	.append("circle")
	.attr("r", function(d) {
	//console.log("d:", d)
	return radiusScale(d)
	})
	.attr("cx", function(d,i) {
	return 50 + i * 100
	})
	.attr("cy", 155)
	.attr("fill", "#00a4ea")
	.attr("stroke", "#00327f")
	.attr("stroke-width", 4)

	var div = d3.select("#test")
	.selectAll("div.bar")
	.data(awesomeData)
	.enter()
	.append("div").classed("bar", true)

	.style("position", "absolute")
	.style("top", function(d,i) {
	return (24 + scale.range()[1] - scale(d)) +'px'
	})
	.style("left", function(d,i) {
	return (50 + i * 100 - 20) + 'px'
	})
	.style("width", "40px")
	.style("height", function(d,i) {
	return scale(d) +'px'
	})
	.style("background-color", "#005c84")
	.style("border-radius", "5px")

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

	var lineString = line(awesomeData)
	//console.log("LINE STRING", lineString)

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

	</script>
	</body>