Skip to content

Instantly share code, notes, and snippets.

@bclinkinbeard
Forked from mbostock/.block
Last active August 29, 2015 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bclinkinbeard/3a65ba05a662103bb2e9 to your computer and use it in GitHub Desktop.
Save bclinkinbeard/3a65ba05a662103bb2e9 to your computer and use it in GitHub Desktop.
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
d3 = window.d3
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1)
var y = d3.scale.linear()
.range([height, 0])
var xAxis = d3.svg.axis()
.scale(x)
.orient('top')
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(20, '%')
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
d3.tsv('data.tsv', type, function (error, data) {
console.error(error)
x.domain(data.map(function (d) { return d.letter }))
y.domain([0, d3.max(data, function (d) { return d.frequency })])
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Frequency')
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function (d) { return x(d.letter) })
.attr('width', x.rangeBand())
.attr('y', function (d) { return y(d.frequency) })
.attr('height', function (d) { return height - y(d.frequency) })
})
function type (d) {
d.frequency = +d.frequency
return d
}
var exec = require('child_process').exec
exec('git add . && git commit -am "New commit"')
exec()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!-- CSS styles for this page are defined in the styles.css file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- the code to create your chart is stored in the chart.js file -->
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment