Skip to content

Instantly share code, notes, and snippets.

@onetwothreebutter

onetwothreebutter/.block

Last active December 29, 2017 17:58
Show Gist options
  • Save onetwothreebutter/1f773f7ed6303b555375aaa58c6fbbb1 to your computer and use it in GitHub Desktop.
Save onetwothreebutter/1f773f7ed6303b555375aaa58c6fbbb1 to your computer and use it in GitHub Desktop.
Download ZIP
Iowa Farmers by Race (2012)
Raw
.block
license: mit
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment