A Pen by David Tarrant on CodePen.
Created
November 17, 2015 10:19
-
-
Save davetaz/01575c62730fb12a3207 to your computer and use it in GitHub Desktop.
zvyLrx
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
| <section id="main"> | |
| <h2>Company Status</h2> | |
| <div id="status_pie"></div> | |
| <br/> | |
| <h2 id="timetitle">Expenses per day</h2> | |
| <div id="timeline"></div> | |
| <br/> | |
| <h2>Raw data</h2> | |
| <table id="dc-data-table" class="table table-hover"></table> | |
| </section> | |
| <section id="sidebar"> | |
| <h2>Your own title</h2> | |
| <div id="flexible_row"></div> | |
| </section> |
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
| // Create variables and define the charts to use from the crossfilter library | |
| var dataTable = dc.dataTable('#dc-data-table'); | |
| var statusPie = dc.pieChart('#status_pie'); | |
| var timeline = dc.barChart('#timeline'); | |
| var flexibleRow = dc.rowChart('#flexible_row'); | |
| // Load the data and create the charts | |
| d3.csv('http://training.theodi.org/DataWorkshop/course/en/exercises/Spend_april_10_enriched.csv', function(data) { | |
| // Create a crossfilter object from the data and group all the data together. | |
| var ndx = crossfilter(data); | |
| var all = ndx.groupAll(); | |
| // Sort out the dates so we can draw a timeline later. | |
| var dateFormat = d3.time.format('%Y-%m-%dT%H:%I:%SZ'); | |
| var mindate = new Date(); | |
| var maxdate = new Date(1970, 1, 1); | |
| // Create a new date object (d.dd) and work out the earliest and latest date in the dataset. | |
| data.forEach(function(d) { | |
| tmp = dateFormat.parse(d["Payment Date"]); | |
| if (tmp < mindate) { | |
| mindate = tmp; | |
| } | |
| if (tmp > maxdate) { | |
| maxdate = tmp; | |
| } | |
| d.dd = tmp; | |
| }); | |
| //Create an expense type dimension | |
| var expenseType = ndx.dimension(function(d) { | |
| return d["Expense Type"]; | |
| }); | |
| //Create a default group that counts the number of expenses per type | |
| var expenseTypeGroup = expenseType.group(); | |
| //Create a table of data | |
| dataTable | |
| .dimension(expenseType) | |
| .group(function(d) { | |
| return d["Supplier Name"]; | |
| }) | |
| .size(10) | |
| .columns([ | |
| 'Payment Date', | |
| 'Expense Type', | |
| 'Expense Area', | |
| 'Supplier Name', | |
| 'Company Status', | |
| 'Amount (GBP)' | |
| ]); | |
| var flexible = ndx.dimension(function(d) { | |
| return d["Expense Type"]; | |
| }); | |
| var flexibleGroup = flexible.group(); | |
| flexibleRow | |
| .width(480) | |
| .height(800) | |
| .dimension(flexible) | |
| .group(flexibleGroup) | |
| .label(function(d) { | |
| return d.key; | |
| }) | |
| .title(function(d) { | |
| return d.value; | |
| }) | |
| .elasticX(true) | |
| .ordering(function(d) { | |
| return -d.value; | |
| }) | |
| .xAxis().ticks(6); | |
| var date = ndx.dimension(function(d) { | |
| return d.dd; | |
| }); | |
| var dateGroup = date.group(); | |
| timeline | |
| .width(500) | |
| .height(220) | |
| .dimension(date) | |
| .group(dateGroup) | |
| .centerBar(false) | |
| .elasticX(false) | |
| .gap(0) | |
| .xUnits(function() { | |
| return 50; | |
| }) | |
| .x(d3.time.scale().domain([mindate, maxdate])) | |
| .renderHorizontalGridLines(true); | |
| var supplierStatus = ndx.dimension(function(d) { | |
| return d["Company Status"]; | |
| }); | |
| var supplierStatusGroup = supplierStatus.group(); | |
| statusPie | |
| .width(180) | |
| .height(180) | |
| .radius(90) | |
| .dimension(supplierStatus) | |
| .group(supplierStatusGroup) | |
| .ordinalColors(['blue', 'red', 'orange', 'gray']) | |
| .label(function(d) { | |
| return (d.key); | |
| }); | |
| //Render the charts! This MUST stay at the end | |
| dc.renderAll(); | |
| }); |
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="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script> | |
| <script src="https://dc-js.github.io/dc.js/js/dc.js"></script> | |
| <script src="https://dc-js.github.io/dc.js/js/colorbrewer.js"></script> |
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
| #main { | |
| width: 60%; | |
| padding: 10px; | |
| display: inline-block; | |
| } | |
| #sidebar { | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| div.dc-chart { | |
| display: block; | |
| float: none; | |
| } | |
| .dc-chart g.row text { | |
| fill: black; | |
| } | |
| #timetitle { | |
| position: absolute; | |
| float: right; | |
| top: 10px; | |
| left: 300px; | |
| } | |
| #timeline { | |
| position: absolute; | |
| float: right; | |
| top: 60px; | |
| left: 280px; | |
| } |
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
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment