Created
February 18, 2014 11:20
-
-
Save neilhawkins/9069114 to your computer and use it in GitHub Desktop.
Newspaper circulation in dc js
This file contains hidden or 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> | |
| <meta charset='utf-8'> | |
| <title>dc.js Experiment</title> | |
| <script src='bower_components/d3/d3.js' type='text/javascript'></script> | |
| <script src='bower_components/crossfilter/crossfilter.js' type='text/javascript'></script> | |
| <script src='dc.js' type='text/javascript'></script> | |
| <script src='bower_components/jquery/dist/jquery.js' type='text/javascript'></script> | |
| <script src='bower_components/bootstrap/dist/js/bootstrap.js' type='text/javascript'></script> | |
| <link href='bower_components/bootstrap/dist/css/bootstrap.css' rel='stylesheet' type='text/css'> | |
| <link href='bower_components/dcjs/dc.css' rel='stylesheet' type='text/css'> | |
| <style type="text/css"></style> | |
| </head> | |
| <body> | |
| <div class='container' style='font: 12px sans-serif;'> | |
| <div class="row"> | |
| <div class="col-md-12" id="monthly-change-chart"> | |
| <h4>Monthly Circulation</h4> | |
| </div> | |
| <div class="col-md-12" id="yearly-total"> | |
| <h4>Total sales</h4> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col-md-12'> | |
| <table class='table table-hover' id='circ-table-graph'> | |
| <thead> | |
| <tr class='header'> | |
| <th>Month</th> | |
| <th>Sales</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var lineChart = dc.seriesChart("#monthly-change-chart"); | |
| var volumeChart = dc.barChart("#yearly-total"); | |
| var dataTable = dc.dataTable("#circ-table-graph"); | |
| d3.csv("news-csv.csv", function(error, data) { | |
| var dateFormat = d3.time.format("%d/%m/%Y"); | |
| var numberFormat = d3.format("0,000"); | |
| data.forEach(function(d) { | |
| d.dd = dateFormat.parse(d.date); | |
| d.month = d3.time.month(d.dd); | |
| d.sales = +d.sales; | |
| }); | |
| var facts = crossfilter(data); | |
| var all = facts.groupAll(); | |
| var paperDimension = facts.dimension(function(d) { return [d.paper, d.dd]; }); | |
| var dateDimension = facts.dimension(function(d) {return d.dd; }); | |
| var monthDimension = facts.dimension(function(d) {return d3.time.month(d.dd) }); | |
| var months = facts.dimension(function (d) { | |
| var month = d.dd.getMonth(); | |
| var name=["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"]; | |
| return month+"."+name[month]; | |
| }); | |
| var monthGroup = months.group(); | |
| // Groupings | |
| var salesByPaper = paperDimension.group().reduceSum(function(d) { return +d.sales; }); | |
| var salesByMonth = monthDimension.group().reduceSum(function(d) { return +d.sales; }); | |
| // Charts | |
| lineChart.width(960).height(600) | |
| .margins({top: 10, right: 50, bottom: 20, left: 50}) | |
| .chart(function(c) { return dc.lineChart(c).interpolate('basis'); }) | |
| .dimension(monthDimension) | |
| .group(salesByPaper) | |
| .brushOn(false) | |
| .rangeChart(volumeChart) | |
| .transitionDuration(1000) | |
| .seriesAccessor(function(d) {return d.key[0];}) | |
| .keyAccessor(function(d) {return d.key[1];}) | |
| .valueAccessor(function(d) {return d.value;}) | |
| .legend(dc.legend().x(750).y(0).itemHeight(12).gap(7).horizontal(1).legendWidth(140).itemWidth(70)) | |
| .x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2014, 06, 01)])) // scale and domain of the graph | |
| .xAxis(); | |
| volumeChart.width(960).height(200) | |
| .margins({top: 10, right: 50, bottom: 20, left: 50}) | |
| .centerBar(true) | |
| .gap(1) | |
| .elasticY(true) | |
| .dimension(monthDimension) | |
| .group(salesByMonth) | |
| .brushOn(true) | |
| .x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2014, 06, 01)])); | |
| // Table | |
| dataTable.width(960).height(800) | |
| .dimension(dateDimension) | |
| .group(function(d) { | |
| return d.paper; | |
| }) | |
| .size(128) | |
| .columns([ | |
| function(d) { return d.date; }, | |
| function(d) { return d.sales; } | |
| ]) | |
| .sortBy(function(d){ return d.dd; }) | |
| .order(d3.descending); | |
| // Render Charts | |
| dc.renderAll(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment