onetwothreebutter/.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: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 width = 960;
    var height = 500;
    var margin = {left: 50, right:50, top:50, bottom:50};

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

    var data = [{
      race: 'White',
      number: '129,209'
    },
                {
      race: 'Black',
      number: '45'
    },
                {
      race: 'Asian',
      number: '129'
    },
                {
      race: 'Hawaiian/Pac Island',
      number: '9'
    },
                {
      race: 'Hispanic',
      number: '584'
    },
                {
      race: 'Native American',
      number: '97'
    },
                {
      race: 'Multi-racial',
      number: '155'
    },
    ];


    //create the xAxis
    var races = data.map(d=>d.race);
    var xScale = d3.scaleBand()
    	.domain(races)
    	.range([0,width]);

    var xAxis = d3.axisBottom();

    svg.append('g')
      	.attr('transform', 'translate(' + [margin.left, 0] + ')')
      	.call(xAxis);


  </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>
	<script>
	// Feel free to change or delete any of the code you see in this editor!

	var width = 960;
	var height = 500;
	var margin = {left: 50, right:50, top:50, bottom:50};

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	var data = [{
	race: 'White',
	number: '129,209'
	},
	{
	race: 'Black',
	number: '45'
	},
	{
	race: 'Asian',
	number: '129'
	},
	{
	race: 'Hawaiian/Pac Island',
	number: '9'
	},
	{
	race: 'Hispanic',
	number: '584'
	},
	{
	race: 'Native American',
	number: '97'
	},
	{
	race: 'Multi-racial',
	number: '155'
	},
	];


	//create the xAxis
	var races = data.map(d=>d.race);
	var xScale = d3.scaleBand()
	.domain(races)
	.range([0,width]);

	var xAxis = d3.axisBottom();

	svg.append('g')
	.attr('transform', 'translate(' + [margin.left, 0] + ')')
	.call(xAxis);


	</script>
	</body>