aendra-rininsland/.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.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

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

		const x = d3.scale.ordinal().domain(['one', 'two']).rangeRoundBands([0, 960]);
    const y = d3.scale.linear().domain([-4, 4]).range([500, 0]).nice();
    svg.append('line').attr({
      x1: 0,
      x2: 960,
      y1: y(0),
      y2: y(0),
      stroke: 'red',
      strokeWidth: 3
    });

    const data = [['one', 2.99], ['two', -3.01]];
    svg.selectAll('rect').data(data)
      .enter()
	    .append('rect')
    	.attr({
  			x: (d) => x(d[0]),
        y: (d) => {
          const maxval = Math.max(d[1], 0);
          return y(maxval) },
        width: x.rangeBand(),
        height: (d) => Math.abs(y(d[1]) - y(0)),
        fill: 'steelblue'
	    });


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

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

	const x = d3.scale.ordinal().domain(['one', 'two']).rangeRoundBands([0, 960]);
	const y = d3.scale.linear().domain([-4, 4]).range([500, 0]).nice();
	svg.append('line').attr({
	x1: 0,
	x2: 960,
	y1: y(0),
	y2: y(0),
	stroke: 'red',
	strokeWidth: 3
	});

	const data = [['one', 2.99], ['two', -3.01]];
	svg.selectAll('rect').data(data)
	.enter()
	.append('rect')
	.attr({
	x: (d) => x(d[0]),
	y: (d) => {
	const maxval = Math.max(d[1], 0);
	return y(maxval) },
	width: x.rangeBand(),
	height: (d) => Math.abs(y(d[1]) - y(0)),
	fill: 'steelblue'
	});


	</script>
	</body>