"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

"From Turmoil to Resolution: Media Coverage Over the Life of a Crisis"

Urls

project website
final screencast video
process-book(and related)

Code Overview

All of our data for the visualizations comes from the productiondata folder. Inside are four folders: one for each crisis. Inside a crisis folder is the crisis summary for displaying the overview (summary.csv), storypoints for hover effects (storypoints.csv), stats for query results by source name (google-media_stats.csv) from which we also gather results by media type information. Sample query result data lives in the google-media_results_subset.csv. This along with baseline stats (google-media_results_subset.csv) populate the bar chart on the details page.

Our various custom and borrowed javascript libraries (tooltips, crisis switching, jquery ui's, etc) live in the libs folder. The includes folder is just for php page rendering. And the rest of the pages are either the php page for the website, or the js page for the data wrangling and displaying.

Third-Party Libs

Datatables (https://datatables.net/): This was used for both the data page and the article explorer on the details page. It provided a dynamic table that had built in filtering, sorting, and search features.
Crossfitler.js (http://square.github.io/crossfilter/): This was used to index and quick search the data for both populating the stacked bar chart and the articles in the article explorer
Delimited.IO (http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs) Used their guide and data structure as a reference to build the stacked bar chart on the details page
d3-tip (https://github.com/Caged/d3-tip) Used extensively throughout the site to give greater detail on mouseover.
jQuery UI. For site ease of use.
Colorbrewer (colorbrewer2.org) For colors in almost all graphs.
Base globe code from http://bl.ocks.org/mbostock/4183330
Legend code from https://github.com/jgoodall/d3-colorlegend
Tabs code (http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/) For site architecture and skeleton.
Scrollpane (https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js)
Underscore.js for easier javascript array and object wrangling.

Name		Name	Last commit message	Last commit date
.settings		.settings
assets		assets
crisis-crawler		crisis-crawler
css		css
images		images
includes		includes
libs		libs
productiondata		productiondata
.gitignore		.gitignore
.htaccess		.htaccess
README.md		README.md
config.codekit		config.codekit
crisis2.mov		crisis2.mov
crisis3.mov		crisis3.mov
crisis_common.js		crisis_common.js
data-con.js		data-con.js
data_consolidator.html		data_consolidator.html
data_converter.js		data_converter.js
detail-martini.php		detail-martini.php
detail.js		detail.js
detail.php		detail.php
detail_data.js		detail_data.js
index.js		index.js
index.php		index.php
overview.js		overview.js
overview.php		overview.php
overviewmartini.php		overviewmartini.php
process-book.md		process-book.md
process-book.php		process-book.php
project-data-martini.php		project-data-martini.php
project-data.js		project-data.js
project-data.php		project-data.php
screen footage.mov		screen footage.mov
screencast.php		screencast.php
timeline.js		timeline.js
timeline.php		timeline.php
timelinemartini.php		timelinemartini.php

Name		Name	Last commit message	Last commit date
.settings		.settings
assets		assets
crisis-crawler		crisis-crawler
css		css
images		images
includes		includes
libs		libs
productiondata		productiondata
.gitignore		.gitignore
.htaccess		.htaccess
README.md		README.md
config.codekit		config.codekit
crisis2.mov		crisis2.mov
crisis3.mov		crisis3.mov
crisis_common.js		crisis_common.js
data-con.js		data-con.js
data_consolidator.html		data_consolidator.html
data_converter.js		data_converter.js
detail-martini.php		detail-martini.php
detail.js		detail.js
detail.php		detail.php
detail_data.js		detail_data.js
index.js		index.js
index.php		index.php
overview.js		overview.js
overview.php		overview.php
overviewmartini.php		overviewmartini.php
process-book.md		process-book.md
process-book.php		process-book.php
project-data-martini.php		project-data-martini.php
project-data.js		project-data.js
project-data.php		project-data.php
screen footage.mov		screen footage.mov
screencast.php		screencast.php
timeline.js		timeline.js
timeline.php		timeline.php
timelinemartini.php		timelinemartini.php

Name		Name	Last commit message	Last commit date
.settings		.settings
assets		assets
crisis-crawler		crisis-crawler
css		css
images		images
includes		includes
libs		libs
productiondata		productiondata
.gitignore		.gitignore
.htaccess		.htaccess
README.md		README.md
config.codekit		config.codekit
crisis2.mov		crisis2.mov
crisis3.mov		crisis3.mov
crisis_common.js		crisis_common.js
data-con.js		data-con.js
data_consolidator.html		data_consolidator.html
data_converter.js		data_converter.js
detail-martini.php		detail-martini.php
detail.js		detail.js
detail.php		detail.php
detail_data.js		detail_data.js
index.js		index.js
index.php		index.php
overview.js		overview.js
overview.php		overview.php
overviewmartini.php		overviewmartini.php
process-book.md		process-book.md
process-book.php		process-book.php
project-data-martini.php		project-data-martini.php
project-data.js		project-data.js
project-data.php		project-data.php
screen footage.mov		screen footage.mov
screencast.php		screencast.php
timeline.js		timeline.js
timeline.php		timeline.php
timelinemartini.php		timelinemartini.php

Name		Name	Last commit message	Last commit date
.settings		.settings
assets		assets
crisis-crawler		crisis-crawler
css		css
images		images
includes		includes
libs		libs
productiondata		productiondata
.gitignore		.gitignore
.htaccess		.htaccess
README.md		README.md
config.codekit		config.codekit
crisis2.mov		crisis2.mov
crisis3.mov		crisis3.mov
crisis_common.js		crisis_common.js
data-con.js		data-con.js
data_consolidator.html		data_consolidator.html
data_converter.js		data_converter.js
detail-martini.php		detail-martini.php
detail.js		detail.js
detail.php		detail.php
detail_data.js		detail_data.js
index.js		index.js
index.php		index.php
overview.js		overview.js
overview.php		overview.php
overviewmartini.php		overviewmartini.php
process-book.md		process-book.md
process-book.php		process-book.php
project-data-martini.php		project-data-martini.php
project-data.js		project-data.js
project-data.php		project-data.php
screen footage.mov		screen footage.mov
screencast.php		screencast.php
timeline.js		timeline.js
timeline.php		timeline.php
timelinemartini.php		timelinemartini.php

Name		Name	Last commit message	Last commit date
.settings		.settings
assets		assets
crisis-crawler		crisis-crawler
css		css
images		images
includes		includes
libs		libs
productiondata		productiondata
.gitignore		.gitignore
.htaccess		.htaccess
README.md		README.md
config.codekit		config.codekit
crisis2.mov		crisis2.mov
crisis3.mov		crisis3.mov
crisis_common.js		crisis_common.js
data-con.js		data-con.js
data_consolidator.html		data_consolidator.html
data_converter.js		data_converter.js
detail-martini.php		detail-martini.php
detail.js		detail.js
detail.php		detail.php
detail_data.js		detail_data.js
index.js		index.js
index.php		index.php
overview.js		overview.js
overview.php		overview.php
overviewmartini.php		overviewmartini.php
process-book.md		process-book.md
process-book.php		process-book.php
project-data-martini.php		project-data-martini.php
project-data.js		project-data.js
project-data.php		project-data.php
screen footage.mov		screen footage.mov
screencast.php		screencast.php
timeline.js		timeline.js
timeline.php		timeline.php
timelinemartini.php		timelinemartini.php

Latest commit

History

Folders and files

Repository files navigation

Urls

Code Overview

Third-Party Libs

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Urls

Code Overview

Third-Party Libs

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Urls

Code Overview

Third-Party Libs

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Urls

Code Overview

Third-Party Libs

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Urls

Code Overview

Third-Party Libs

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages