bar chart for financial data

README.md

Bar chart for financial data

Expenses in red below, income in green above, over time on the x axis, value on y axis.

You can see this chart at: http://bl.ocks.org/galvanic/284b254c6fe3a501d8bcc46c95e6f601

chart.js

function TimelineChart() {

  // assumptions about the data passed to this chart:
  // i.e. dataset of each selection
  // list of objects. each object has the following keys:

  // chart config
  var margin = {top: 20, right: 20, bottom: 20, left: 20}
  var width = 960 - margin.left - margin.right
  var height = 500 - margin.top - margin.bottom
  var chartMiddle = height/2
  var offsetFromCentralLine = 4

  var xScale = d3.time.scale()
    .range([0, width])

  var yScale = d3.scale.log()
    .range([0, chartMiddle])

  function drawChart(selection) {
    selection.each(function(dataset, i) {

      var wholeChart = this

      // update scale domain using dataset metadata
      xScale
        .domain(d3.extent(dataset, function(d) { return d.date }))
        .nice(d3.time.month)

      // extent top and bottom must be same for consistency
      // so look for the maximum total over the whole period !
      var maxTotal = d3.max(dataset, function(d) { return Math.max(Math.abs(d.values.totalNeg), d.values.totalPos) })

      yScale
        .domain([0.1, maxTotal])
        .nice()

      //
      // Y AXIS
      //

      // the constructor function for the grid
      var yGrid = d3.svg.axis()
        .scale(yScale)
        .orient('left')
        .ticks(1, ',.1')
        .innerTickSize(-width)
        .outerTickSize(0)
        .tickPadding(-width+5)

      // the svg items making up the grid
      var yGridLines = d3.select(wholeChart)
        .append('g')
          .classed('y grid', true)
          .attr('transform', 'translate(' + margin.left + ',' + (margin.top + chartMiddle + offsetFromCentralLine) + ')')
          .call(yGrid)

      yGridLines.selectAll('text')
        .attr('dy', 0)
        .attr('alignment-baseline', 'baseline')

      // the svg items making up the grid
      var yGridLines = d3.select(wholeChart)
        .append('g')
          .classed('y grid', true)
          .attr('transform', 'translate(' + margin.left + ',' + (margin.top - offsetFromCentralLine) + ')')
          .call(yGrid.scale(yScale.copy().range([chartMiddle, 0])))

      yGridLines.selectAll('text')
        .attr('dy', 0)
        .attr('alignment-baseline', 'mathematical')

      //
      // THE CHART
      //

      // select chart element(s) (eg. innerchart) if they exist already
      var innerchart = d3.select(wholeChart).selectAll('g.innerchart')
        .data(function(d) { return [d] })

      // otherwise create them and the elements they contain
      var innerchartEnter = innerchart.enter()
        .append('g')
          .classed('innerchart', true)
          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

      innerchartEnter.append('line')
        .attr('x1', 0)
        .attr('y1', chartMiddle)
        .attr('x2', width)
        .attr('y2', chartMiddle)

      // update data
      var days = innerchart.selectAll('g.day')
        .data(function(d) { return d }, function(d) { return d.key })

      days.enter()
        .append('g')
          .classed('day', true)
          .attr('transform', function(d) { return 'translate(' + xScale(d.date) + ',' + chartMiddle + ')' })

      var negativeTransactions = days.selectAll('rect.transaction.negative')
        .data(function(d) { return [d.values.totalNeg] })

      negativeTransactions.enter()
        .append('rect')
          .classed('transaction', true)
          .classed('negative', true)
          .attr('x', 0)
          .attr('y', offsetFromCentralLine)
          .attr('width', 2)
          .attr('height', 0)
        .transition()
          .delay(function(d) { return days.data().indexOf(d3.select(this.parentNode).datum()) * 50 })
          .duration(1000)
          .ease('exp')
          .attr('height', function(d) { return (d == 0 ? 0 : yScale(-d)) })

      var positiveTransactions = days.selectAll('rect.transaction.positive')
        .data(function(d) { return [d.values.totalPos] })

      positiveTransactions.enter()
        .append('rect')
          .classed('transaction', true)
          .classed('positive', true)
          .attr('x', 0)
          .attr('y', -offsetFromCentralLine)
          .attr('width', 2)
          .attr('height', 0)
        .transition()
          .delay(function(d) { return days.data().indexOf(d3.select(this.parentNode).datum()) * 50 })
          .duration(1000)
          .ease('exp')
          .attr('height', function(d) { return (d == 0 ? 0 : yScale(d)) })
          .attr('y', function(d) { return (d == 0 ? 0 : -yScale(d) -offsetFromCentralLine) })

    })
  }

  return drawChart

}

data.csv

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Visualisation</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js' charset='utf-8'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.3/chance.min.js' charset='utf-8'></script>
    <script src='./chart.js'></script>
    <script src='./main.js'></script>
  </head>
  <body>

    <div id='vis'></div>

  </body>
</html>

main.js

'use strict'

var dataFilepath = 'data.csv'

d3.csv(dataFilepath, cleanCSVdata, drawChart)
//generateData(200, Math.random, drawChart)

function generateData(numDatapoints, seed, callback) {

  // GENERATE FAKE DATASET
  var chance = new Chance(seed)

  var dataset = new Array(numDatapoints)
  for (var i = 0; i < numDatapoints; i++) {
    dataset[i] = {
      date: d3.time.format('%d/%m/%Y').parse(chance.date({string: true, american: false, year: chance.integer({min: 2011, max:2014})}))
    , value: chance.floating({min: -1000, max: 1000, fixed: 2})
    }
  }

  document.addEventListener('DOMContentLoaded', function(event) {
    callback(dataset)
  })
}

function cleanCSVdata(d) {
  return {
    date: d3.time.format('%d/%m/%Y').parse(d.date)
  , value: +d.value
  }
}

function drawChart(dataset) {

  // PREPARE DATA FOR CHART
  // sort by date, order is kept during nesting step
  dataset.sort(function(a, b) { return a.date - b.date })

  var balanceByDay = d3.nest()
    .key(function(d) { return d.date.toDateString() })
    .rollup(function(values) {
      // get the highest number out of the sum of the positive numbers
      // and the sum of the negative numbers
      var negativeTransactions = values.filter(function(d) { return d.value < 0 })
      var positiveTransactions = values.filter(function(d) { return d.value > 0 })
      return {
        transactions: values
      , negTransactions: negativeTransactions
      , posTransactions: positiveTransactions
      , totalNeg: d3.sum(negativeTransactions.map(function(d) { return d.value }))
      , totalPos: d3.sum(positiveTransactions.map(function(d) { return d.value }))
      }
    })
    .entries(dataset)

  balanceByDay.forEach(function(d) { d.date = d.values.transactions[0].date })

  // DRAW THE CHART
  var svg = d3.select('div#vis')
    .append('svg')
      .attr('width', 960)
      .attr('height', 500)

  function draw(dataset) {

    // draw chart
    var timelines = svg.selectAll('g.timelinechart')
      .data(dataset)

    timelines.enter()
      .append('g')
        .classed('timelinechart', true)

    timelines
      .call(TimelineChart())

    timelines.exit()
      .remove()

  }

  draw([balanceByDay])

}

style.css

div#vis {
  width: 960px;
  margin: 0px auto;
}

g.innerchart > line {
  stroke: orange;
}

rect.transaction {
  fill: grey;
}

rect.transaction.negative {
  fill: red;
}

rect.transaction.positive {
  fill: green;
}

.grid {
  opacity: 0.3;
}

.grid .tick {
  stroke: lightgrey;
}

.grid text {
  stroke: black;
  font-family: monospace;
  font-size: 0.9em;
}

.grid path {
  stroke-width: 0;
}

.grid .tick:first-child {
  display: none;
}

thumbnail.png