This is a d3.js-based tool for graphing and comparing volumes of content from multiple media sources and word frequencies within that content over a range of dates. It's part of the Controversy Mapper project at the MIT Center for Civic Media.
It's based on Mike Bostocks's "Grouped Bar Chart" and "Multi-Series Line Chart" d3.js examples, as well as Jim Vallandingham's "How to Animate Transitions Between Multiple Charts" tutorial. It uses the Bootstrap, jQuery, and jQuery.popover libaries.
Live demo of the code: http://erhardtgraeff.com/demo/aplotter/aplotter.html
Copy the whole directory structure to a server folder. A running server
instance is necessary to allow javascript to access the data files. You
can either use a hosted server or start a local server in the directory,
e.g. python -m SimpleHTTPServer 8888 &.
You should change the title and description of the graph in the
aplotter.html file:
<h1 id="title">Title of the Attention Plot</h1>
<div id="description">
<p>Description of the graph.</p>
You should add your own data to the data/media.csv and data/words.csv
files. It's recommended you use the example data files as templates. You
can also add your own data files to the folder and then change the paths
in the aplotter.js file.
Here's the parameters you can change in the aplotter.js file:
// Path to csv file containing volumes of media by day
// Column headers should be: date, [media source 1], [media source 2], ...
// Make sure data is already normalized
// Recommended date format: mmm d
var mediacsv = '../data/media.csv';
// Path to csv file containing word frequencies by day
// Column headers should be: date, word, magnitude
// Dates should be formatted identically to those in media.csv
// Recommended metric for magnitude: tf-idf
var wordscsv = '../data/words.csv';
// Dimensions of the graph
var graphwidth = 2000;
var graphheight = 400;
Files unique to this project are all named aplotter.*:
aplotter.htmlcss/aplotter.cssjs/aplotter.js
Required libraries are in the css/libs and js/libs folders.