Last active
March 20, 2017 15:46
-
-
Save abinofbrooklyn/d99787fbbd441eabc8be8b7de412c0cc to your computer and use it in GitHub Desktop.
fun 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
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| .copMonth:hover { | |
| fill: #CC0058; | |
| transition: fill 0.15s; | |
| } | |
| .toolTip { | |
| position: absolute; | |
| pointer-events: none; | |
| display: none; | |
| min-width: 50px; | |
| height: auto; | |
| background: none repeat scroll 0 0 #ffffff; | |
| padding: 9px 14px 6px 14px; | |
| border-radius: 2px; | |
| text-align: center; | |
| line-height: 1.3; | |
| color: #5B6770; | |
| box-shadow: 0px 3px 9px rgba(0, 0, 0, .15); | |
| } | |
| .toolTip:after { | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| border-left: 12px solid transparent; | |
| border-right: 12px solid transparent; | |
| border-top: 12px solid white; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| margin-left: -12px; | |
| } | |
| .toolTip span { | |
| font-weight: 500; | |
| color: #081F2C; | |
| } | |
| </style> | |
| <body> | |
| <div id="yearButtons"></div> | |
| <div id="chart-area"></div> | |
| </div> | |
| </body> | |
| <script> | |
| var funData = [{"month":2,"year":2017,"count":10,"country":"United States of America"},{"month":1,"year":2017,"count":14,"country":"United States of America"},{"month":12,"year":2016,"count":15,"country":"United States of America"},{"month":11,"year":2016,"count":15,"country":"United States of America"},{"month":10,"year":2016,"count":21,"country":"United States of America"},{"month":9,"year":2016,"count":19,"country":"United States of America"},{"month":8,"year":2016,"count":21,"country":"United States of America"},{"month":7,"year":2016,"count":23,"country":"United States of America"},{"month":6,"year":2016,"count":29,"country":"United States of America"},{"month":5,"year":2016,"count":20,"country":"United States of America"},{"month":4,"year":2016,"count":17,"country":"United States of America"},{"month":3,"year":2016,"count":18,"country":"United States of America"},{"month":2,"year":2016,"count":28,"country":"United States of America"},{"month":1,"year":2016,"count":18,"country":"United States of America"},{"month":12,"year":2015,"count":20,"country":"United States of America"},{"month":11,"year":2015,"count":12,"country":"United States of America"},{"month":10,"year":2015,"count":21,"country":"United States of America"},{"month":9,"year":2015,"count":12,"country":"United States of America"},{"month":8,"year":2015,"count":12,"country":"United States of America"},{"month":7,"year":2015,"count":29,"country":"United States of America"},{"month":6,"year":2015,"count":18,"country":"United States of America"},{"month":5,"year":2015,"count":21,"country":"United States of America"},{"month":4,"year":2015,"count":15,"country":"United States of America"},{"month":3,"year":2015,"count":17,"country":"United States of America"},{"month":2,"year":2015,"count":17,"country":"United States of America"},{"month":1,"year":2015,"count":15,"country":"United States of America"},{"month":12,"year":2014,"count":17,"country":"United States of America"},{"month":11,"year":2014,"count":11,"country":"United States of America"},{"month":10,"year":2014,"count":12,"country":"United States of America"},{"month":9,"year":2014,"count":19,"country":"United States of America"},{"month":8,"year":2014,"count":16,"country":"United States of America"},{"month":7,"year":2014,"count":24,"country":"United States of America"},{"month":6,"year":2014,"count":21,"country":"United States of America"},{"month":5,"year":2014,"count":27,"country":"United States of America"},{"month":4,"year":2014,"count":19,"country":"United States of America"},{"month":3,"year":2014,"count":15,"country":"United States of America"},{"month":2,"year":2014,"count":13,"country":"United States of America"},{"month":1,"year":2014,"count":16,"country":"United States of America"},{"month":12,"year":2013,"count":22,"country":"United States of America"},{"month":11,"year":2013,"count":18,"country":"United States of America"},{"month":10,"year":2013,"count":21,"country":"United States of America"},{"month":9,"year":2013,"count":18,"country":"United States of America"},{"month":8,"year":2013,"count":18,"country":"United States of America"},{"month":7,"year":2013,"count":17,"country":"United States of America"},{"month":6,"year":2013,"count":25,"country":"United States of America"},{"month":5,"year":2013,"count":23,"country":"United States of America"},{"month":4,"year":2013,"count":16,"country":"United States of America"},{"month":3,"year":2013,"count":10,"country":"United States of America"},{"month":2,"year":2013,"count":14,"country":"United States of America"},{"month":1,"year":2013,"count":19,"country":"United States of America"},{"month":12,"year":2012,"count":17,"country":"United States of America"},{"month":11,"year":2012,"count":22,"country":"United States of America"},{"month":10,"year":2012,"count":17,"country":"United States of America"},{"month":9,"year":2012,"count":14,"country":"United States of America"},{"month":8,"year":2012,"count":17,"country":"United States of America"},{"month":7,"year":2012,"count":22,"country":"United States of America"},{"month":6,"year":2012,"count":26,"country":"United States of America"},{"month":5,"year":2012,"count":17,"country":"United States of America"},{"month":4,"year":2012,"count":11,"country":"United States of America"},{"month":3,"year":2012,"count":10,"country":"United States of America"},{"month":2,"year":2012,"count":16,"country":"United States of America"},{"month":1,"year":2012,"count":13,"country":"United States of America"},{"month":12,"year":2011,"count":11,"country":"United States of America"},{"month":11,"year":2011,"count":16,"country":"United States of America"},{"month":10,"year":2011,"count":17,"country":"United States of America"},{"month":9,"year":2011,"count":13,"country":"United States of America"},{"month":8,"year":2011,"count":15,"country":"United States of America"},{"month":7,"year":2011,"count":21,"country":"United States of America"},{"month":6,"year":2011,"count":11,"country":"United States of America"},{"month":5,"year":2011,"count":17,"country":"United States of America"},{"month":4,"year":2011,"count":12,"country":"United States of America"},{"month":3,"year":2011,"count":15,"country":"United States of America"},{"month":2,"year":2011,"count":10,"country":"United States of America"},{"month":1,"year":2011,"count":7,"country":"United States of America"},{"month":12,"year":2010,"count":4,"country":"United States of America"},{"month":11,"year":2010,"count":11,"country":"United States of America"},{"month":10,"year":2010,"count":10,"country":"United States of America"},{"month":9,"year":2010,"count":9,"country":"United States of America"},{"month":8,"year":2010,"count":8,"country":"United States of America"},{"month":7,"year":2010,"count":10,"country":"United States of America"},{"month":6,"year":2010,"count":14,"country":"United States of America"},{"month":5,"year":2010,"count":13,"country":"United States of America"},{"month":4,"year":2010,"count":7,"country":"United States of America"},{"month":3,"year":2010,"count":17,"country":"United States of America"},{"month":2,"year":2010,"count":4,"country":"United States of America"},{"month":12,"year":2009,"count":4,"country":"United States of America"},{"month":11,"year":2009,"count":8,"country":"United States of America"},{"month":10,"year":2009,"count":13,"country":"United States of America"},{"month":9,"year":2009,"count":6,"country":"United States of America"},{"month":8,"year":2009,"count":9,"country":"United States of America"},{"month":7,"year":2009,"count":12,"country":"United States of America"},{"month":6,"year":2009,"count":6,"country":"United States of America"},{"month":5,"year":2009,"count":5,"country":"United States of America"},{"month":4,"year":2009,"count":12,"country":"United States of America"},{"month":3,"year":2009,"count":3,"country":"United States of America"},{"month":2,"year":2009,"count":12,"country":"United States of America"},{"month":1,"year":2009,"count":2,"country":"United States of America"},{"month":12,"year":2008,"count":4,"country":"United States of America"},{"month":11,"year":2008,"count":3,"country":"United States of America"},{"month":10,"year":2008,"count":3,"country":"United States of America"},{"month":9,"year":2008,"count":4,"country":"United States of America"},{"month":8,"year":2008,"count":2,"country":"United States of America"},{"month":7,"year":2008,"count":3,"country":"United States of America"},{"month":6,"year":2008,"count":3,"country":"United States of America"},{"month":5,"year":2008,"count":6,"country":"United States of America"},{"month":4,"year":2008,"count":3,"country":"United States of America"},{"month":3,"year":2008,"count":8,"country":"United States of America"},{"month":2,"year":2008,"count":1,"country":"United States of America"},{"month":1,"year":2008,"count":6,"country":"United States of America"},{"month":12,"year":2007,"count":3,"country":"United States of America"},{"month":11,"year":2007,"count":3,"country":"United States of America"},{"month":10,"year":2007,"count":6,"country":"United States of America"},{"month":9,"year":2007,"count":4,"country":"United States of America"},{"month":7,"year":2007,"count":2,"country":"United States of America"},{"month":6,"year":2007,"count":2,"country":"United States of America"},{"month":5,"year":2007,"count":6,"country":"United States of America"},{"month":4,"year":2007,"count":4,"country":"United States of America"},{"month":3,"year":2007,"count":3,"country":"United States of America"},{"month":2,"year":2007,"count":2,"country":"United States of America"},{"month":1,"year":2007,"count":4,"country":"United States of America"},{"month":12,"year":2006,"count":6,"country":"United States of America"},{"month":11,"year":2006,"count":3,"country":"United States of America"},{"month":10,"year":2006,"count":2,"country":"United States of America"},{"month":9,"year":2006,"count":2,"country":"United States of America"},{"month":6,"year":2006,"count":2,"country":"United States of America"},{"month":5,"year":2006,"count":1,"country":"United States of America"},{"month":4,"year":2006,"count":1,"country":"United States of America"},{"month":3,"year":2006,"count":1,"country":"United States of America"},{"month":2,"year":2006,"count":1,"country":"United States of America"},{"month":1,"year":2006,"count":1,"country":"United States of America"},{"month":11,"year":2005,"count":1,"country":"United States of America"},{"month":8,"year":2005,"count":3,"country":"United States of America"},{"month":7,"year":2005,"count":5,"country":"United States of America"},{"month":6,"year":2005,"count":6,"country":"United States of America"},{"month":4,"year":2005,"count":3,"country":"United States of America"},{"month":2,"year":2005,"count":1,"country":"United States of America"},{"month":1,"year":2005,"count":1,"country":"United States of America"},{"month":11,"year":2004,"count":1,"country":"United States of America"},{"month":6,"year":2004,"count":6,"country":"United States of America"},{"month":5,"year":2004,"count":3,"country":"United States of America"},{"month":4,"year":2004,"count":1,"country":"United States of America"}]; | |
| drawMonthlyCharts(funData, 2016); | |
| function drawMonthlyCharts(data, startYear) { | |
| var margin = {top: 20, right: 40, bottom: 30, left: 120}; | |
| var width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var months = [ | |
| 'January', 'February', 'March', 'April', 'May', | |
| 'June', 'July', 'August', 'September', | |
| 'October', 'November', 'December' | |
| ]; | |
| var yScale = d3.scaleBand() | |
| .padding([.1]) | |
| .rangeRound([height, 0]); | |
| var xScale = d3.scaleLinear() | |
| .range([0, width]); | |
| var xAxis = d3.axisBottom(xScale) | |
| .tickPadding(8); | |
| var yAxis = d3.axisLeft(yScale) | |
| .tickSize(0) | |
| .tickPadding(8) | |
| .tickFormat(function(d) { | |
| return months[d - 1]; | |
| }); | |
| var tooltip = d3.select("#chart-area").append("div").attr("class", "toolTip"); | |
| var colorScale = d3.scaleOrdinal(d3.schemeCategory10); | |
| var svg = d3.select("#chart-area").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 + ")"); | |
| // draw the axes | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| svg.append("g") | |
| .attr("class","x axis") | |
| .attr("transform","translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("text") | |
| .datum(data[0]) | |
| .attr("class", "title") | |
| .attr("x", width/3) | |
| .attr("dy", -5) | |
| .text(function(d) { return "Total monthly COP submissions in " + d.country; }) | |
| var updateChart = function(data) { | |
| // count the total entries for the year | |
| var countVals = []; | |
| data.forEach(function(month) { | |
| countVals.push(month.count); | |
| }); | |
| // Set the X & Y domains, with a minimum of 10 in the X | |
| var maxValue = Math.max(10, d3.max(countVals, function(d) { return d; })); | |
| xScale.domain([0, maxValue]).nice(); | |
| yScale.domain(data.map(function(d) { return d.month; }).sort(d3.descending)); | |
| // re-draw the x axis | |
| svg.select(".x") | |
| .call(xAxis); | |
| // re-draw the y axis | |
| svg.select(".y") | |
| .call(yAxis); | |
| // reload the data for the new month | |
| var bars = svg.selectAll("rect") | |
| .data(data, function(d) { | |
| return d.month; | |
| }); | |
| var t = d3.transition() | |
| .duration(1000) | |
| .ease(d3.easeBounce); | |
| // remove months that don't exist in this set. | |
| bars.exit().remove(); | |
| // add new bar for incoming months | |
| var existingBars = bars.enter().append("rect") | |
| .style("fill", function(d) { return colorScale(d.month); }) | |
| .on("mouseenter", function(d) { | |
| tooltip | |
| .style("left", d3.event.pageX - 50 + "px") | |
| .style("top", d3.event.pageY - 70 + "px") | |
| .style("display", "inline-block") | |
| .html((d.year) + "<br>" + "Monthly COP Submission: " + (d.count)) | |
| d3.select(this).style("fill", "#1e3250"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.style("display", "none") | |
| d3.select(this).style("fill", function(d) { return colorScale(d.month); }) | |
| }); | |
| // update existing bars with their new values | |
| bars.merge(existingBars) | |
| .transition(t) | |
| .attr("x", 1) | |
| .attr("y", function(d) { return yScale(d.month); }) | |
| .attr("width" , function(d) { return xScale(d.count); }) | |
| .attr("height", yScale.bandwidth()); | |
| }; | |
| var getYearData = function(data, year) { | |
| return data.filter(function(d) { | |
| return d.year == year; | |
| }); | |
| }; | |
| var drawYearButtons = function(data) { | |
| var years = d3.set(data.map(function(d) { return d.year; })).values(); | |
| var buttons = d3.select("#yearButtons").selectAll(".year-button") | |
| .data(years) | |
| .enter().append("button") | |
| .attr("class", "year-button") | |
| .attr("value", function(d) { return d; }) | |
| .text(function(d) { return d; }); | |
| buttons.on("click", function(year) { | |
| var yearData = getYearData(data, year); | |
| updateChart(yearData); | |
| }); | |
| }; | |
| // Draw the buttons and the initial chart | |
| drawYearButtons(data); | |
| var defaultYearData = getYearData(data, startYear); | |
| updateChart(defaultYearData); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment