MaxBotta/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:10;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }
    button {

    }
  </style>
</head>

<body>
  <script>

    var currentData = 1;
    var dataset = [10, 20, 30 ,40 ,50, 60, 70, 80, 90, 100],
        dataset2 = [10,9,8,7,6,5,4,3]

    var margin = {top: 20, bottom: 10, left: 35, right: 10};

    var svgWidth = 300 - margin.left - margin.right,
        svgHeight = 200 - margin.top - margin.bottom,
        barPadding = 5;
    var barWidth = (svgWidth / dataset.length);


    var svg = d3.select("body").append("svg")
    	//.style("padding", 12)
    	.attr("class", "svg")
      .attr("width", svgWidth + margin.left + margin.right)
      .attr("height", svgHeight + margin.top + margin.bottom)

    var container = svg.append("g")
      .attr("transform", "translate("
            + 	margin.left + ","
            + 	margin.top 	+ ")");

    var yScale = d3.scaleLinear()
    	.domain([0, d3.max(dataset)])
    	.range([svgHeight, 0]);

    var barChart = container.selectAll("rect")
    	.data(dataset)
    	.enter()
    	.append("rect")
    	.attr("class", "bar")
    	.style("fill", "steelblue")
    	.attr("y", function(d) {return yScale(d)})
    	.attr("height", function(d) {return svgHeight - yScale(d)})
    	.attr("width", barWidth - barPadding)
    	.attr("transform", function(d, i) {
        var translate = [barWidth * i, 0];
        return "translate(" + translate + ")";
      })
    	.style("stroke-linecap", "round");

    var text = container.selectAll(text)
    	.data(dataset)
    	.enter()
    	.append("text")
     	.attr("class", "bar-text")
    	.text(function(d){return d})
    	.attr("fill", "steelblue")
      .attr("font-family", "monospace")
    	.attr("text-anchor", "middle")
    	.attr("x", function(d, i){
        return (barWidth * i) + (barWidth/2) - 2;
      })
    	.attr("y", function(d) {
        return yScale(d) - 2;
      })

    var yAxis = d3.axisLeft()
    	.scale(yScale)

    var yAxisG = container.append("g")
    	.attr("class", "y axis")
    	.attr("transform", "translate(-10, 0)")
    	.call(yAxis)


    function update() {
      var data = 0;
      if(currentData == 1) {
        currentData = 2
        data = dataset2;
      } else {
        currentData = 1
        data = dataset;
      };
      console.log(currentData);
      console.log(data);


      barWidth = (svgWidth / data.length);
      yScale.domain([0, d3.max(data)]);
      yAxisG.transition().duration(500).call(yAxis);

      //JOIN
      var barChart = container.selectAll(".bar")
      	.data(data);

      var text = container.selectAll(".bar-text")
      	.data(data);


      //UPDATE
      barChart.transition().duration(500)
      	.attr("y", function(d) {return yScale(d)})
        .attr("height", function(d) {return svgHeight - yScale(d)})
      	.attr("width", barWidth - barPadding)
        .attr("transform", function(d, i) {
            var translate = [barWidth * i, 0];
            return "translate(" + translate + ")";
          });

      text.transition().duration(500)
      	.text(function(d){return d})
      	.attr("x", function(d, i){
          return (barWidth * i) + (barWidth/2) - 2;
        })
        .attr("y", function(d) {
          return yScale(d) - 2;
        });

      //barChart.transition().duration(500);
      //text.transition().duration(500);

      //ENTER
			barChart.enter()
        .append("rect")
        .attr("class", "bar")
       	.style("fill", "steelblue")
        .attr("transform", function(d, i) {
            var translate = [barWidth * i, 0];
            return "translate(" + translate + ")";
         })
      	.transition().duration(500)
        .attr("y", function(d) {return yScale(d)})
        .attr("height", function(d) {return svgHeight - yScale(d)})
        .attr("width", barWidth - barPadding);


      text.enter()
        .append("text")
        .attr("class", "bar-text")
      	.attr("fill", "steelblue")
      	.attr("x", function(d, i){
          return (barWidth * i) + (barWidth/2) - 2;
       		})
      	.transition().duration(500)
        .text(function(d){return d})
        .attr("font-family", "monospace")
        .attr("text-anchor", "middle")
        .attr("y", function(d) {
          return yScale(d) - 2;
        });

      //EXIT
      barChart.exit().remove();
      text.exit().remove();

    }

  </script>
  <button onclick="update()">Update</button>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:10;
	top:0;
	right:0;
	bottom:0;
	left:0;
	}
	button {

	}
	</style>
	</head>

	<body>
	<script>

	var currentData = 1;
	var dataset = [10, 20, 30 ,40 ,50, 60, 70, 80, 90, 100],
	dataset2 = [10,9,8,7,6,5,4,3]

	var margin = {top: 20, bottom: 10, left: 35, right: 10};

	var svgWidth = 300 - margin.left - margin.right,
	svgHeight = 200 - margin.top - margin.bottom,
	barPadding = 5;
	var barWidth = (svgWidth / dataset.length);


	var svg = d3.select("body").append("svg")
	//.style("padding", 12)
	.attr("class", "svg")
	.attr("width", svgWidth + margin.left + margin.right)
	.attr("height", svgHeight + margin.top + margin.bottom)

	var container = svg.append("g")
	.attr("transform", "translate("
	+ margin.left + ","
	+ margin.top + ")");

	var yScale = d3.scaleLinear()
	.domain([0, d3.max(dataset)])
	.range([svgHeight, 0]);

	var barChart = container.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.style("fill", "steelblue")
	.attr("y", function(d) {return yScale(d)})
	.attr("height", function(d) {return svgHeight - yScale(d)})
	.attr("width", barWidth - barPadding)
	.attr("transform", function(d, i) {
	var translate = [barWidth * i, 0];
	return "translate(" + translate + ")";
	})
	.style("stroke-linecap", "round");

	var text = container.selectAll(text)
	.data(dataset)
	.enter()
	.append("text")
	.attr("class", "bar-text")
	.text(function(d){return d})
	.attr("fill", "steelblue")
	.attr("font-family", "monospace")
	.attr("text-anchor", "middle")
	.attr("x", function(d, i){
	return (barWidth * i) + (barWidth/2) - 2;
	})
	.attr("y", function(d) {
	return yScale(d) - 2;
	})

	var yAxis = d3.axisLeft()
	.scale(yScale)

	var yAxisG = container.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(-10, 0)")
	.call(yAxis)


	function update() {
	var data = 0;
	if(currentData == 1) {
	currentData = 2
	data = dataset2;
	} else {
	currentData = 1
	data = dataset;
	};
	console.log(currentData);
	console.log(data);


	barWidth = (svgWidth / data.length);
	yScale.domain([0, d3.max(data)]);
	yAxisG.transition().duration(500).call(yAxis);

	//JOIN
	var barChart = container.selectAll(".bar")
	.data(data);

	var text = container.selectAll(".bar-text")
	.data(data);


	//UPDATE
	barChart.transition().duration(500)
	.attr("y", function(d) {return yScale(d)})
	.attr("height", function(d) {return svgHeight - yScale(d)})
	.attr("width", barWidth - barPadding)
	.attr("transform", function(d, i) {
	var translate = [barWidth * i, 0];
	return "translate(" + translate + ")";
	});

	text.transition().duration(500)
	.text(function(d){return d})
	.attr("x", function(d, i){
	return (barWidth * i) + (barWidth/2) - 2;
	})
	.attr("y", function(d) {
	return yScale(d) - 2;
	});

	//barChart.transition().duration(500);
	//text.transition().duration(500);

	//ENTER
	barChart.enter()
	.append("rect")
	.attr("class", "bar")
	.style("fill", "steelblue")
	.attr("transform", function(d, i) {
	var translate = [barWidth * i, 0];
	return "translate(" + translate + ")";
	})
	.transition().duration(500)
	.attr("y", function(d) {return yScale(d)})
	.attr("height", function(d) {return svgHeight - yScale(d)})
	.attr("width", barWidth - barPadding);


	text.enter()
	.append("text")
	.attr("class", "bar-text")
	.attr("fill", "steelblue")
	.attr("x", function(d, i){
	return (barWidth * i) + (barWidth/2) - 2;
	})
	.transition().duration(500)
	.text(function(d){return d})
	.attr("font-family", "monospace")
	.attr("text-anchor", "middle")
	.attr("y", function(d) {
	return yScale(d) - 2;
	});

	//EXIT
	barChart.exit().remove();
	text.exit().remove();

	}

	</script>
	<button onclick="update()">Update</button>
	</body>