D3 Bar Chart: Holyoke Codes Attendee Ages

Holyoke Codes Attendee Ages.markdown

Holyoke Codes Attendee Ages

A Pen by Andrew Pasquale on CodePen.

License.

index.html

<div style="height: 960px; width: 100%;">
<svg class="chart"></svg>

script.js

var $chart = $('.chart');
var margin = {
    top: 20,
    right: 30,
    bottom: 40,
    left: 80
  },
  width = $chart.width() - margin.left - margin.right,
  height = $chart.height() - margin.top - margin.bottom;
var x = d3.scale.linear()
  .range([0,width - width * 0.6]);
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.json('http://holyokecodes.org/data/age.json', function(error, data) {
  console.log(data);
  var max_age = d3.entries(data)[data.length - 1].value.age;
  var min_age = d3.entries(data)[0].value.age;
  var barHeight = 24;
  
  x.domain([0,d3.max(data, function(d) { return d.age; })]);
  var y = d3.scale.linear().range([(data.length - 1) * barHeight,0])
    .domain([max_age,min_age]);
  
  var ramp = d3.scale.linear()
    .domain([d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; })])
    .range(['#406e95','#5199d6']);
  
  chart.attr('height', barHeight * (data.length + 1));
  var bar = chart.selectAll('g')
    .data(data)
    .enter()
      .append('g')
      .attr('transform', function(d, i) { return 'translate(0,' + i * barHeight + ')'; });
  
  bar.append('rect')
    .attr('width', function(d) { return x(d.value); })
    .attr('fill', function(d) { return ramp(d.value); })
    .attr('height', barHeight - 1);
  
  $('.container').css('height', chart.attr('height'));
  
  bar.append('text')
    .attr('x', function(d) { return x(d.value) + 35; })
    .attr('y', barHeight / 2)
    .attr('dy', '.35em')
    .attr('class', 'value')
    .style('text-anchor', 'middle')
    .style('background-color', '#ccc')
    .text(function(d) { return 'Age ' + d.age; });
  
  var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');
  
  var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(10)
    .orient('left');
  
  chart.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .append('text')
    .attr('x', -height / 2)
    .attr('y', -45)
    .attr('transform', 'rotate(-90)')
    .style('text-anchor', 'middle')
    .attr('class', 'y-axis-label')
    .text('Age');
  
  $('g rect').on('mouseenter', function(e) {
    $(this).parent().find('text').css('visibility', 'visible');
  });
  $('g rect').on('mouseleave', function(e) {
    $(this).parent().find('text').css('visibility', 'hidden');
  });
});

function type(d) {
  d.value = +d.value;
  return d;
}

scripts

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

style.css

.chart {
  width: 100%;
  height: 100%;
}
.chart text {
  fill: black;
  font: 14px sans-serif;
  text-anchor: end;
}
.chart .tick text {
  display: block;
}
text.y-axis-label {
  font-size: 1.8em;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

g rect {
  z-index: 1;
}

g rect:hover {
  transition: 0.4s;
  opacity: 0.3;
}

g text.value {
  visibility: hidden;
}