Exercise 2

New Data for Our 'For Loop'

We know that 'For Loops' are a great way to work with 'collections' of data. So converting a table of data to a JSON collection is where we will start.

We have some census data from the American Community Survey. Our 'table' in CSV format must be converterd to a 'collection' for us to work with it using JavaScript.

CSV to JSON (to JS)

Tables of data can be converted to JSON collections using basic scripting, utilities or helper websites like 'CSV to JSON'. Let's do it the easy way, with the helper website for now...

Each table row will become an object, and each column becomes a 'key' name with an associated 'value'.

Finally, we will add a 'var' name to our data and save it as a JS file -- a javascript file that we can easily import into our project.

Lodash data utility

Use Lodash to find a 'needle' in our haystack of data. It's a great JS helper for running trough a collection to find a match or to filter a collection based on data values.

UI (User Interface) Elements to Access the Data

We can use UI elements, like buttons, hyperlinks, menus, interactive maps, etc. as a way for users to access pieces of the data. Let's try using a dropdown menu to access a row or a state in our data.

Exercise 4 - narrative

Let's 'connect the dots' to tell a simple story with all of the coding skills we've learned so far:

Using a 'for loop' to access all objects in a data collection
Using 'Lodash' to 'find' a matching object in a data collection
Using a 'string template' to put data into html on the page
Using Chart.js to add or update a chart
Using a UI element to 'call' a function

Poverty in the United States

Select a state from the dropdown menu.

VICO 3420/5900

JavaScript + Data

Exercise 4: Build a narrative