jpmarindiaz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from jpmarindiaz's block: simple d3 barchart

  
## 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;
    }

    .bars {
      fill: #89ffac;
    }

    text.label {
      text-anchor: middle;
      font-size: 0.8em;
      fill: #5e2f44;
      font-family: "monospace";
    }

    #chart {
      width: 100%;
      height: 500px;
    }


  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("div").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    	.attr('transform', 'translate(50,50)')

//     svg.append("text")
//       .text("Edit the code below to change me!")
//       .attr("y", 200)
//       .attr("x", 120)
//       .attr("font-size", 36)
//       .attr("font-family", "monospace");


    var margin = {top: 40, right: 20, bottom: 20, left: 40};
    var chartDimensions = d3.select("#chart").node().getBoundingClientRect();
    //var width = window.innerWidth - margin.left - margin.right;
    //var height = window.innerHeight - margin.top - margin.bottom;
    var width = chartDimensions.width - margin.left - margin.right;
    var height = chartDimensions.height - margin.top - margin.bottom;

    // data
    var data = [
      {key: "a", value: 20},
    	{key: "b", value: 30},
    	{key: "c", value: 550},
    	{key: "d", value: 200},
    	{key: "e", value: 50}
    	];

    var yMax = d3.max(data, function(d){return d.value});
    console.log(yMax)
    var y = d3.scaleLinear()
    	.domain([0, yMax *1.15])
    	.range([height, 0]);

    var xValues = data.map(function(d){
      return d.key
    });

    console.log(xValues);

    var x = d3.scaleBand()
    	.domain(xValues)
    	.rangeRound([0, width])
    	.paddingInner(0.2)
    	.paddingOuter(0.2);


    svg
    	.append('g')
    	.selectAll('.bars')
    	.data(data)
    	.enter()
			.append('rect')
    	.attr('class','bars')
      .attr('x', function(d){return x(d.key)})
      .attr('width', x.bandwidth())
      .attr('height', 0)
			.attr('y', y(0))
			.transition()
    	.duration(500)
    	.ease(d3.easeElasticInOut)
    	.delay(function(d, i){ return i * 500})
      .attr('height', function(d){
      	return height - y(d.value)
    	})
    	.attr('y', function(d){
      			return y(d.value)
    	 });
    	//.attr('color', '#000088')

    var xAxis = d3.axisBottom()
     	.scale(x);
    svg.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis)

    var yAxis = d3.axisRight()
     	.scale(y);
    svg.append('g')
    	.attr('transform', 'translate(5,0)')
      .call(yAxis)

    svg
    	.selectAll(".label")
    	.data(data)
    	.enter()
    	.append('text')
    	.attr('class', 'label')
    	.attr('dx', function(d) {
      	return x(d.key) +  x.bandwidth()/2
    	})
    	.attr('dy', function(d) {return y(d.value) - 5})
			.text(function(d){ return d.value})
    	.style('opacity', 0)
    	.transition()
    	.duration(1000)
    	.delay(500)
    	.style('opacity', 1)


  </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;
	}

	.bars {
	fill: #89ffac;
	}

	text.label {
	text-anchor: middle;
	font-size: 0.8em;
	fill: #5e2f44;
	font-family: "monospace";
	}

	#chart {
	width: 100%;
	height: 500px;
	}


	</style>
	</head>

	<body>
	<div id="chart"></div>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("div").append("svg")
	.attr("width", 960)
	.attr("height", 500)
	.attr('transform', 'translate(50,50)')

	// svg.append("text")
	// .text("Edit the code below to change me!")
	// .attr("y", 200)
	// .attr("x", 120)
	// .attr("font-size", 36)
	// .attr("font-family", "monospace");


	var margin = {top: 40, right: 20, bottom: 20, left: 40};
	var chartDimensions = d3.select("#chart").node().getBoundingClientRect();
	//var width = window.innerWidth - margin.left - margin.right;
	//var height = window.innerHeight - margin.top - margin.bottom;
	var width = chartDimensions.width - margin.left - margin.right;
	var height = chartDimensions.height - margin.top - margin.bottom;

	// data
	var data = [
	{key: "a", value: 20},
	{key: "b", value: 30},
	{key: "c", value: 550},
	{key: "d", value: 200},
	{key: "e", value: 50}
	];

	var yMax = d3.max(data, function(d){return d.value});
	console.log(yMax)
	var y = d3.scaleLinear()
	.domain([0, yMax *1.15])
	.range([height, 0]);

	var xValues = data.map(function(d){
	return d.key
	});

	console.log(xValues);

	var x = d3.scaleBand()
	.domain(xValues)
	.rangeRound([0, width])
	.paddingInner(0.2)
	.paddingOuter(0.2);


	svg
	.append('g')
	.selectAll('.bars')
	.data(data)
	.enter()
	.append('rect')
	.attr('class','bars')
	.attr('x', function(d){return x(d.key)})
	.attr('width', x.bandwidth())
	.attr('height', 0)
	.attr('y', y(0))
	.transition()
	.duration(500)
	.ease(d3.easeElasticInOut)
	.delay(function(d, i){ return i * 500})
	.attr('height', function(d){
	return height - y(d.value)
	})
	.attr('y', function(d){
	return y(d.value)
	});
	//.attr('color', '#000088')

	var xAxis = d3.axisBottom()
	.scale(x);
	svg.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.call(xAxis)

	var yAxis = d3.axisRight()
	.scale(y);
	svg.append('g')
	.attr('transform', 'translate(5,0)')
	.call(yAxis)

	svg
	.selectAll(".label")
	.data(data)
	.enter()
	.append('text')
	.attr('class', 'label')
	.attr('dx', function(d) {
	return x(d.key) + x.bandwidth()/2
	})
	.attr('dy', function(d) {return y(d.value) - 5})
	.text(function(d){ return d.value})
	.style('opacity', 0)
	.transition()
	.duration(1000)
	.delay(500)
	.style('opacity', 1)



	</script>
	</body>