zvyLrx

index.html

<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>

script.js

// 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();

});

scripts

<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>

style.css

#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;
}

styles

<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" />

zvyLrx.markdown

zvyLrx

A Pen by David Tarrant on CodePen.

License.