Data Narrative

README.md

This is a data narrative created using C3.js for CME151: Introduction to Data Visualization (Stanford University, Winter 2016).

c3_charts.js

var my_data = [
  ['data1', 30, 200, 100, 400, 150, 250],
  ['data2', 50, 20, 10, 40, 15, 25]
];

var my_chart_parameters = {
  "data": {
    "columns": my_data,
    "selection": {
      "enabled": true
    }
  },
  "point": {
    "r": 5,
    "focus": {
      "expand": {
        "r": 7,
        "enabled": true
      }
    }
  },
  "grid": {
    "x": {
      "show": false
    },
    "y": {
      "show": true
    }
  },
  "tooltip": {
    "show": false,
    "grouped": false
  }
};

var my_chart_object = c3.generate(my_chart_parameters);

// slides

var slide_0 = function() {
  document.getElementById("message").innerHTML = "The rate of technological progress is going to be controlled from financial realities.";
};

var slide_1 = function() {
  my_chart_object.select(["data1"], [2, 4]);
  my_chart_object.select(["data2"], [3]);
  document.getElementById("message").innerHTML = "These points are interesting.";
};

var slide_2 = function() {
  my_chart_object.load({
    columns: [
      ['data3', 70, 90, 170, 220, 100, 110, 130, 40, 50]
    ]
  });
  document.getElementById("message").innerHTML = "This line is longer than the other ones.";
};

var slide_3 = function() {
  my_chart_object.unselect();
  document.getElementById("message").innerHTML = "But, it's not that important, and neither are the points we highlighted before.";
};

var slide_4 = function() {
  my_chart_object.select(['data1'], [2]);
  document.getElementById("message").innerHTML = 'Select point for index 2 of data1';
};

var slide_5 = function() {
  my_chart_object.select(['data1'], [4, 6]);
  document.getElementById("message").innerHTML = 'Select point for index 4,6 of data1';
};

var slide_6 = function() {
  my_chart_object.unselect();
  document.getElementById("message").innerHTML = 'Unselect points';
};

var slide_7 = function() {
  my_chart_object.focus('data2');
  document.getElementById("message").innerHTML = 'Focus on data2';
};

var slide_8 = function() {
  my_chart_object.focus('data3');
  document.getElementById("message").innerHTML = 'Focus on data3';
};

var slide_9 = function() {
  my_chart_object.revert();
  document.getElementById("message").innerHTML = 'Defocus';
};

var slide_10 = function() {
  my_chart_object.load({
    columns: [
      ['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]
    ]
  });
  document.getElementById("message").innerHTML = 'Update data1';
};

var slide_11 = function() {
  my_chart_object.load({
    columns: [
      ['data2', 30, 50, 90, 120, 40, 50, 80, 70, 50]
    ]
  });
  document.getElementById("message").innerHTML = 'Update data2';
};

var slide_12 = function() {
  my_chart_object.regions([{
    start: 1,
    end: 3
  }]);
  document.getElementById("message").innerHTML = 'Add region from 1 to 3';
};

var slide_13 = function() {
  my_chart_object.regions.add([{
    start: 6
  }]);
  document.getElementById("message").innerHTML = 'Add region from 6 to end';
};

var slide_14 = function() {
  my_chart_object.regions([]);
  document.getElementById("message").innerHTML = 'Clear regions';
};

var slide_15 = function() {
  my_chart_object.xgrids([{
    value: 1,
    text: 'Label 1'
  }, {
    value: 4,
    text: 'Label 4'
  }]);
  document.getElementById("message").innerHTML = 'Add x grid lines for 1, 4';
};

var slide_16 = function() {
  my_chart_object.ygrids.add([{
    value: 450,
    text: 'Label 450'
  }]);
  document.getElementById("message").innerHTML = 'Add y grid lines for 450';
};

var slide_17 = function() {
  my_chart_object.xgrids.remove({
    value: 1
  });
  my_chart_object.xgrids.remove({
    value: 4
  });
  document.getElementById("message").innerHTML = 'Remove grid lines for 1, 4';
};

var slide_18 = function() {
  my_chart_object.ygrids.remove({
    value: 450
  });
  document.getElementById("message").innerHTML = 'Remove grid line for 450';
};

var slide_19 = function() {
  my_chart_object.transform('bar');
  document.getElementById("message").innerHTML = 'Show as bar chart';
};

var slide_20 = function() {
  my_chart_object.groups([
    ['data2', 'data3']
  ]);
  document.getElementById("message").innerHTML = 'Grouping data2 and data3';
};

var slide_21 = function() {
  my_chart_object.groups([
    ['data1', 'data2', 'data3']
  ]);
  document.getElementById("message").innerHTML = 'Grouping data1, data2 and data3';
};

var slide_22 = function() {
  my_chart_object.groups([
    ['data2', 'data3']
  ]);
  my_chart_object.transform('line', 'data1');
  document.getElementById("message").innerHTML = 'Show data1 as line';
};

var slide_23 = function() {
  my_chart_object.unload({
    ids: 'data3'
  });
  document.getElementById("message").innerHTML = 'Unload data3';
};

var slide_24 = function() {
  my_chart_object.unload({
    ids: 'data2'
  });
  document.getElementById("message").innerHTML = 'Unload data2';
};

var slide_25 = function() {
  document.getElementById("start_btn").disabled = true;
  my_chart_object.flow({
    "columns": [
      ['data1', 390, 400, 200, 500]
    ],
    "duration": 1000,
    "done": function() {
      document.getElementById("start_btn").disabled = false;
    }
  });
  document.getElementById("message").innerHTML = 'Flow 4 data';
};

var slide_26 = function() {
  document.getElementById("start_btn").disabled = true;
  my_chart_object.flow({
    "columns": [
      ['data1', 190, 230]
    ],
    "done": function() {
      document.getElementById("start_btn").disabled = false;
    }
  });
  document.getElementById("message").innerHTML = 'Flow 2 data';
};

var slide_27 = function() {
  my_chart_object.transform('line', ['data1', 'data2', 'data3']);
  my_chart_object.groups([
    ['data1'],
    ['data2'],
    ['data3']
  ]);
  my_chart_object.load({
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
    ]
  });
  document.getElementById("message").innerHTML = 'Want to see this again?';
};

var slides = [slide_0, slide_1, slide_2, slide_3, slide_4, slide_5, slide_6, slide_7, slide_8, slide_9, slide_10, slide_11, slide_12, slide_13, slide_14, slide_15, slide_16, slide_17, slide_18, slide_19, slide_20, slide_21, slide_22, slide_23, slide_24, slide_25, slide_26, slide_27];

// cycle through slides

var current_slide = 0;

var run = function() {
  slides[current_slide]();
  current_slide += 1;

  if (current_slide === 1) {
    document.getElementById("start_btn").innerHTML = "START";
  } else if (current_slide === slides.length) {
    current_slide = 0;
    document.getElementById("start_btn").innerHTML = "REPLAY";
  } else {
    document.getElementById("start_btn").innerHTML = "CONTINUE";
  }
};

// button event handler

document.getElementById('start_btn').addEventListener("click", run);

// init

run();

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css"></link>
<style>
  #control {
    text-align: center;

  }
  #control h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight:900;
  }
  #message {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 18pt;
  }

</style>

<body>
<div id="chart" style="margin-top: 50px;"></div>
<div id="control">
  <h2>Moore's Law & Labor Productivity</h2>
  <button type="button" id="start_btn">START</button>
  <p id="message">"The rate of technological progress is going to be controlled from financial realities."</p>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="c3_charts.js"></script>

<!--
<script>
nv.addGraph(function() {
  var chart = nv.models.multiBarChart();
  chart.xAxis.tickFormat(d3.format(',f'));
  chart.yAxis.tickFormat(d3.format(',.1f'));

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

</script>
-->

</body>