Here we have rendered a simple bar chart of hard-coded data regarding snow totals in Upstate New York for the 2014-2015 winter season. The graph includes two scaled axes and outputs the snow total when hovering over each bar. Built with D3.
Last active
August 29, 2015 14:15
-
-
Save bceskavich/a9a365467b5e1d2075f6 to your computer and use it in GitHub Desktop.
D3 Bar Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>D3 Bar Chart</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| font-family: 'Avenir'; | |
| } | |
| h1, | |
| button { | |
| margin-left: 25px; | |
| text-align: left; | |
| } | |
| h1 { | |
| font-size: 25px; | |
| } | |
| button { | |
| margin-bottom: 25px; | |
| } | |
| .main { | |
| margin: 0px 25px; | |
| } | |
| svg { | |
| padding: 20px 40px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| text, | |
| .axis text { | |
| font-size: 11px; | |
| } | |
| rect:hover { | |
| fill: orange; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Upstate New York Snow Totals (2015), by City</h1> | |
| <div class="main"> | |
| <p><span id="city"></span> - <span id="inches"></span></p> | |
| </div> | |
| <script type="text/javascript"> | |
| function render(){ | |
| // Golden Snowglobe totals (as of 2/5/15) | |
| var dataset = [ | |
| {"city": "Buffalo", "snow": 75.5}, | |
| {"city": "Syracuse", "snow": 60.1}, | |
| {"city": "Binghamton", "snow": 58.7}, | |
| {"city": "Rochester", "snow": 54.2}, | |
| {"city": "Albany", "snow": 52.3} | |
| ] | |
| // Dimensions for the chart: height, width, and space b/t the bars | |
| var margins = {top: 30, right: 50, bottom: 30, left: 50} | |
| var height = 400 - margins.left - margins.right, | |
| width = 700 - margins.top - margins.bottom, | |
| barPadding = 5 | |
| // Create a scale for the y-axis based on data | |
| // >> Domain - min and max values in the dataset | |
| // >> Range - physical range of the scale (reversed) | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d){ | |
| return d.snow; | |
| })]) | |
| .range([height, 0]); | |
| // Implements the scale as an actual axis | |
| // >> Orient - places the axis on the left of the graph | |
| // >> Ticks - number of points on the axis, automated | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient('left') | |
| .ticks(5); | |
| // Creates a scale for the x-axis based on city names | |
| var xScale = d3.scale.ordinal() | |
| .domain(dataset.map(function(d){ | |
| return d.city; | |
| })) | |
| .rangeRoundBands([0, width], .1); | |
| // Creates an axis based off the xScale properties | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient('bottom'); | |
| // Creates the initial space for the chart | |
| // >> Select - grabs the empty <div> above this script | |
| // >> Append - places an <svg> wrapper inside the div | |
| // >> Attr - applies our height & width values from above | |
| var chart = d3.select('.main') | |
| .append('svg') | |
| .attr('width', width + margins.left + margins.right) | |
| .attr('height', height + margins.top + margins.bottom) | |
| .append('g') | |
| .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); | |
| // For each value in our dataset, places and styles a bar on the chart | |
| // Step 1: selectAll.data.enter.append | |
| // >> Loops through the dataset and appends a rectangle for each value | |
| chart.selectAll('rect') | |
| .data(dataset) | |
| .enter() | |
| .append('rect') | |
| // Step 2: X & Y | |
| // >> X - Places the bars in horizontal order, based on number of | |
| // points & the width of the chart | |
| // >> Y - Places vertically based on scale | |
| .attr('x', function(d, i){ | |
| return xScale(d.city); | |
| }) | |
| .attr('y', function(d){ | |
| return yScale(d.snow); | |
| }) | |
| // Step 3: Height & Width | |
| // >> Width - Based on barpadding and number of points in dataset | |
| // >> Height - Scale and height of the chart area | |
| .attr('width', (width / dataset.length) - barPadding) | |
| .attr('height', function(d){ | |
| return height - yScale(d.snow); | |
| }) | |
| .attr('fill', 'steelblue') | |
| // Step 4: Info for hover interaction | |
| .attr('class', function(d){ | |
| return d.city; | |
| }) | |
| .attr('id', function(d){ | |
| return d.snow; | |
| }); | |
| // Renders the yAxis once the chart is finished | |
| // >> Moves it to the left 10 pixels so it doesn't overlap | |
| chart.append('g') | |
| .attr('class', 'axis') | |
| .attr('transform', 'translate(-10, 0)') | |
| .call(yAxis); | |
| // Appends the yAxis | |
| chart.append('g') | |
| .attr('class', 'axis') | |
| .attr('transform', 'translate(0,' + (height + 10) + ')') | |
| .call(xAxis); | |
| // Adds yAxis title | |
| chart.append('text') | |
| .text('Snow Totals') | |
| .attr('transform', 'translate(-70, -20)'); | |
| } | |
| $(function(){ | |
| // On document load, call the render() function to load the graph | |
| render(); | |
| $('rect').mouseenter(function(){ | |
| $('#city').html(this.className.animVal); | |
| $('#inches').html($(this).attr('id')); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment