Home - rochiecuevas/Data_Journalism GitHub Wiki

How to make a graph come alive?

This project aims to create an interactive graph to show relationships between sociodemographics and health metrics. The graph was generated based on the 2014 American Community Survey (ACS) 1-year estimates.

Details on creating the hero section of the landing page can be found in the documentation for visualising UFO sightings. The documentation in this wiki focuses, therefore, on the development of interactivity of the graph.

This repository contains the following files:

File name	Description
index.html	the landing page where the graphs are shown
Resources/main.css	contains formatting codes for active and inactive axis labels, among others
Resources/data.csv	raw data obtained from the 2014 American Community Survey 1-year estimates
Resources/app.js	contains code that runs the static graph (poverty vs obesity)
Resources/app2.js	contains code that runs the interactive graph (three variables assigned to the x- and the y-axis each)

Previewing results

To see the interactive graph:

Step No.	Description	Code (if applicable)
1	Open index.html in Terminal	Data_Journalism rochiecuevas$
2	Activate the Python virtual environment	Data_Journalism rochiecuevas$ source activate PythonData
3	Activate the Python server	(PythonData):Data_Journalism rochiecuevas$ python -m http:server
4	Copy the http port provided in Terminal (http://0.0.0.0:8000/) to the address bar of the Firefox browser