Moximillian/.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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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!

    var canvasWidth = 700
    var canvasHeight = 500

    var margins = { top: 10, bottom: 30, left: 30, right: 20 }
    var translate = "translate(" + margins.left +", " + margins.top + ")"

    // grab the svg tag
    var svg = d3.select("body").append("svg")
      .attr("width", canvasWidth)
      .attr("height", canvasHeight)
    	.style("background-color", "lightgrey")

    var data = [{ x: 'A', y: 20, color: '#334499' },
                { x: 'B', y: 40, color: '#994455' },
                { x: 'C', y: 10, color: '#339999' },
                { x: 'D', y: 50, color: '#444499' },
                { x: 'E', y: 30, color: '#994455' }
                ];

    canvasHeight -= (margins.top + margins.bottom)
    canvasWidth -= (margins.left + margins.right)

    // use "group" to move bars into margins
    var g = svg.append('g').attr("transform", translate)

    var maxY = d3.max(data, function(d,i) {return d.y })
    var y_scale = d3.scale.linear()
       .domain([0, maxY])
    	 .range([canvasHeight, 0]);

		var x_scale = d3.scale.ordinal()
       .domain(data.map(function(d) { return d.x } ))
       .rangeRoundBands([0, canvasWidth], 0.1, 0.4)

    // create "bars"
    var bars = g.selectAll('rect').data(data)
    bars.enter().append('rect')

    bars.attr({ x: function (d,i) { return x_scale(d.x) },
               y: function (d,i) { return y_scale(d.y) },
               width: x_scale.rangeBand(),
               height: function (d,i) { return canvasHeight - y_scale(d.y) }
              })
    bars.style('fill', function (d,i) { return d.color })

    bars.exit().remove();

    var yAxis = d3.svg.axis()
    .scale(y_scale)
    .orient("left")

    var xAxis = d3.svg.axis()
    .scale(x_scale)
    .orient("bottom")

    g.append("g")
    .attr("class", "y axis")
    .call(yAxis)

    var axisTranslate = "translate(0, " + canvasHeight + ")"
    g.append("g")
    .attr("class", "x axis")
    .attr("transform", axisTranslate)
    .call(xAxis)


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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!

	var canvasWidth = 700
	var canvasHeight = 500

	var margins = { top: 10, bottom: 30, left: 30, right: 20 }
	var translate = "translate(" + margins.left +", " + margins.top + ")"

	// grab the svg tag
	var svg = d3.select("body").append("svg")
	.attr("width", canvasWidth)
	.attr("height", canvasHeight)
	.style("background-color", "lightgrey")

	var data = [{ x: 'A', y: 20, color: '#334499' },
	{ x: 'B', y: 40, color: '#994455' },
	{ x: 'C', y: 10, color: '#339999' },
	{ x: 'D', y: 50, color: '#444499' },
	{ x: 'E', y: 30, color: '#994455' }
	];

	canvasHeight -= (margins.top + margins.bottom)
	canvasWidth -= (margins.left + margins.right)

	// use "group" to move bars into margins
	var g = svg.append('g').attr("transform", translate)

	var maxY = d3.max(data, function(d,i) {return d.y })
	var y_scale = d3.scale.linear()
	.domain([0, maxY])
	.range([canvasHeight, 0]);

	var x_scale = d3.scale.ordinal()
	.domain(data.map(function(d) { return d.x } ))
	.rangeRoundBands([0, canvasWidth], 0.1, 0.4)

	// create "bars"
	var bars = g.selectAll('rect').data(data)
	bars.enter().append('rect')

	bars.attr({ x: function (d,i) { return x_scale(d.x) },
	y: function (d,i) { return y_scale(d.y) },
	width: x_scale.rangeBand(),
	height: function (d,i) { return canvasHeight - y_scale(d.y) }
	})
	bars.style('fill', function (d,i) { return d.color })

	bars.exit().remove();

	var yAxis = d3.svg.axis()
	.scale(y_scale)
	.orient("left")

	var xAxis = d3.svg.axis()
	.scale(x_scale)
	.orient("bottom")

	g.append("g")
	.attr("class", "y axis")
	.call(yAxis)

	var axisTranslate = "translate(0, " + canvasHeight + ")"
	g.append("g")
	.attr("class", "x axis")
	.attr("transform", axisTranslate)
	.call(xAxis)




	</script>
	</body>