Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A sortable bar chart of minimum wages in US states
var dataset = []
var margin = {top: 20, right: 30, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1)
var y = d3.scale.linear()
.range([height, 0])
var c = d3.scale.linear()
.range([0,255])
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var chart= d3.select('#chart')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
d3.csv('data.csv', function(data) {
var dataf = data.filter(function(el){return !isNaN(parseFloat(el.wage))});
dataset = dataf.map(function(d){
return {
'state': d.state,
'wage': parseFloat(d.wage)
}
});
// Scale the domain of the data
x.domain(dataset.map(function(d){ return d.state }))
y.domain([4, d3.max(dataset, function(d){return d.wage})])
c.domain([4, d3.max(dataset, function(d){return d.wage})])
// Create axes
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
.append('text')
.attr('class', 'label')
.attr('text-anchor', 'end')
.attr('x', width-20)
.attr('y', 30)
.text('State')
chart.append('g')
.attr('class', 'axis')
.call(yAxis)
.append('text')
.attr('class', 'label')
.attr('transform', 'rotate(-90)')
.attr('y', -35)
.style('text-anchor', 'end')
.text('Minimum wage (USD)')
// Create bars
var bar = chart.selectAll('.bar')
.data(dataset)
.enter().append('rect')
.attr('class', 'bar')
.style('fill', function(d) {console.log(c(d.wage));return 'rgb(0,0,' + Math.floor(c(d.wage)) + ')'})
.attr('x', function(d) {return x(d.state)})
.attr('y', function(d) {return y(d.wage)})
.attr('height', function(d) {return height - y(d.wage)})
.attr('width', x.rangeBand())
d3.select('input').on('change', change)
function change() {
var x0 = x.domain(dataset.sort(this.checked
? function(a,b){return b.wage - a.wage}
: function(a,b){return d3.ascending(a.state, b.state)})
.map(function(d) {return d.state}))
.copy();
var transition = chart.transition().duration(750)
transition.selectAll('.bar')
.attr('x', function(d) {return x0(d.state)})
transition.select('.x.axis')
.call(xAxis)
}
})
state wage
AK 9.75
AZ 8.05
AR 8.00
CA 10.00
CO 8.31
CT 9.60
DE 8.25
DC 10.50
FL 8.05
GA 5.15
HI 8.50
ID 7.25
IL 8.25
IN 7.25
IA 7.25
KS 7.25
ME 7.50
MD 8.25
MA 10.00
MI 8.50
MN 9.00
MO 7.65
MT 8.05
NE 9.00
NV 8.25
NJ 8.38
NM 7.50
NY 9.00
NC 7.25
ND 7.25
OH 8.10
OK 7.25
OR 9.25
PA 7.25
RI 9.60
SD 8.55
TX 7.25
UT 7.25
VT 9.60
VA 7.25
WA 9.47
WV 8.75
WI 7.25
WY 5.15
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.label {
font-family: sans-serif;
font-size: 16px;
}
.title {
font-family: sans-serif;
font-size: 30px;
}
input {
top: 30px;
left: 400px;
position: absolute;
}
label {
top: 30px;
left: 370px;
position: absolute;
}
</style>
</head>
<body>
<h1 class="title">Minimum Wage by State</h1>
<label for="sort" class="label">Sort</label>
<input type="checkbox" id="sort"/>
<svg id="chart"/>
<script src="chart.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment