Before-After Map Template
This is a Svelte project to display two interactive data maps side by side, colored based on Jenks breaks.
Live Demo
Get started
To start, make sure you have Node.js installed. Clone this repository and install the dependencies:
git clone https://github.com/CT-Data-Collaborative/before-after-map.git
cd before-after-map
npm install
Then start Rollup:
npm run dev
Navigate to localhost:5000. You should see the app running. Edit a component file in src
, save it, and reload the page to see your changes.
Customize with your own data
src/config.js
with your own configuration
1. Start by editing export default {
"title": "American Community Survey 2017",
"subtitle": "Select tables for Connecticut by <a href='http://ctdata.org'>Connecticut Data Collaborative</a>",
"footer": "Connecticut Data Collaborative is a project of InformCT, Inc.<br>© 2019 Connecticut Data Collaborative",
"defaultGeographyPath": "./geo/towns.geojson",
"extraGeographyPath": "./geo/tracts.geojson",
"extraGeographyName": "Census Tracts",
"geojsonGeographyProperty": "name",
"data": []
}
title
,subtitle
, andfooter
are HTML strings.defaultGeographyPath
is a path to a GeoJSON file with your geography, which is displayed on page load by default.extraGeographyPath
is an additional GeoJSON file which can be triggered by a checkbox with the label fromextraGeographyName
. This could be a more detailed (eg Census tracts) map, or a less detailed map (counties). Note that the same csv spreadsheet powers both the default and the extra geography.geojsonGeographyProperty
defines the name of the parameter which stores the geography name in each of the features of the GeoJSON file (that is, layer.feature.properties.geojsonGeographyProperty
). This needs to be the same for both GeoJSON files.
src/config.js
2. Define your data in The data
key of the config file is an array of JSON objects that define the datasets to be put onto the map.
{
// Nice name to be displayed
"name": "Median Household Income",
// Dataset file path (csv), can be absolute URL or relative path from /public folder
"file": "./data/median_household_income.csv",
// Prefix for the values (eg "$")
"prefix": "$",
// Suffix for the values (eg "%", " people")
"suffix": "",
// Time period of the left map (to use in annotation below the map)
"before": "ACS 2008-2012",
// Whether to display margins of error for "before" map
"beforemoe": true,
// The time period of the map on the right ("after")
"after": "ACS 2013-2017",
// Whether to display margins of error on the "after" map
"aftermoe": true,
// Whether increase from before to after value is positive (in green) or negative (in red)
// For example, increase in Income is positive, increase in Poverty Rate is negative
"positiveIncrease": true,
// HTML string to be displayed in a paragraph above the legend
"description": "<b>The median increase in household income across all towns in Connecticut was 5.8%.</b> In 129 towns, median household income increased, most significant increases in North Canaan (+26,400, or +58%), Westbrook (+31,700, or +50%), and Southbury (+23,100, or +34%). Note that North Canaan and Westbrook both have large margins of errors due to small populations. In 40 towns, median household income decreased compared to 2008-2012 estimate, with the highest decreases occurring in Ansonia (~ -$9,200, or nearly -17%), New London (~ –$6,800, or -15%), and East Haddam (~ $13,000, or -14%). <b>Hartford remains the town with the lowest median household income in Connecticut</b> despite a 17% increase in median household income between ACS 2008-2012 and 2013-2017 estimates. New Haven median income increased 1.8% and changing its rank from 2nd to 3rd poorest municipality, while New London dropped from 7th to 2nd due to a 15% decrease."
},
3. Create .csv data files
Data files can be stored in /public
folder (eg in /public/data/*
) or remotely.
Each parameter is a separate .csv dataset with data for all geo features. Each csv file needs to have 5 columns: geography
needs to match the relevant property of the layers in the geojson file, before
are the values for the left map, beforemoe
are margins of error for the values for the left map, after
are the values for the map on the right, aftermoe
are the margins of errors for values defined in after
. For example,
geography,before,beforemoe,after,aftermoe
Bethel,88024,5083,97289,8779
Bridgeport,39822,1597,44841,1451
Brookfield,111096,6658,113009,9162
Danbury,66281,2160,68068,4517
4. Publish your map
In Terminal, run
npm run build
This will compile all relevant Svelte files, JavaScript, and CSS and put it in public/
folder. Open index.html
to see the app. It works entirely in front-end, so you can serve it from GitHub Pages or Amazon S3 bucket - no backend required.