I wanted to see the ratio of words to names beginning with each letter of the alphabet. I suspected that the letter J is more common as a name than as a word and this data would appear to support that.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var svg = d3.select('svg')
var width = 960, height = 500, margin = 20
var barHeight = 100
svg = svg.append('g')
.attr('transform', 'translate(' + [margin, margin] + ')')
width -= margin * 2
height -= margin * 2
var xScale = d3.scaleBand()
.paddingInner(0.05)
.range([0, width])
var yScale = d3.scaleLinear()
.range([0, barHeight])
var xAxis = d3.axisBottom(xScale)
d3.csv('words-names.csv', function(err, data) {
data.forEach(function(d) {
d.ratio = (d.names/d.words)
})
xScale.domain(data.map(function(d) {
return d.letter
}))
yScale.domain(d3.extent(data, function(d) {
return d.ratio
}))
svg.append('g')
.attr('transform', 'translate(0,' + height /2 + ')')
.call(xAxis)
svg.append('g')
.attr('transform', 'translate(0,' + height / 4 + ')')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d) {
return xScale(d.letter)
})
.attr('width', xScale.bandwidth())
.attr('y', function(d) {
return barHeight - yScale(d.ratio)
})
.attr('height', function(d) {
// console.log(d.letter, d.ratio)
return yScale(d.ratio)
})
})
</script>
</body>
</html>