A Shrubbery

Building a page of map leaflets using Leaflet.js and D3.js

Learn More About It    

 

Mapping Education Levels for State Census Tracts

Education Levels in California Census Tracts

Description: This map displays census spatial data about education and gender, broken down by census tract. The map is able to span a huge range of scales because there are actually two maps on the page, and both maps are interactive and zoomable. There are also interactive D3 charts and infographs to highlight several interesting aspects of the data.

Data: The GeoJson data used to create the state, county, and census tract layers comes from the US Census Bureau and is accessed using the Census Reporter API. I originally wrote the script for California, then slightly re-factored it to work for a number of other states.

Click to see education levels by census tracts for the following states:

California  

Arizona  

Massachusetts  

North Carolina  

Oregon  

Utah  

Washington  


North Carolina Census Tracts

North Carolina Census Tracts

Description: This Leaflet map uses the Census Reporter API to obtain geographic data about census tracts for North Carolina from the Census Bureau.

A clickable, county-level map of North Carolina controls a second map that automatically pans to the census tracts composing the selected county.

Data: The GeoJson data used to create the state, county, and census tract layers comes from the US Census Bureau and is accessed using the Census Reporter API.

See North Carolina Census Tract Map  


California D3 Donut: Commute Method by Povery Status

California D3 Donut: Commute Method by Poverty Status

Description: Uses a Leaflet map of California counties to control a D3 plot and send data to it dynamically based on the user selection.

Data: The data set used is commute method by poverty status, a data set from the US Census Bureau.

See California D3 Donut Map  


Barry Goldwater Bombing Range Topo Map

Barry Goldwater Bombing Range Topo Map

Description: Combines a tileset with contours from a shapefile, for the purpose of enhancing or calling out particular topological elevations or features.

Data: This uses a tileset from the National Map Viewer, and topological shapefiles that are also from the National Map Viewer.

See Barry Goldwater Bombing Range Topo Map  


National Map Tileset

National Map Tileset

Description: A leaflet using National Map Viewer topological map tileset for mapping a dataset (shale gas plays dataset).

Data: This uses a tileset of contours in the United States - the same tileset that is provided by the National Map Viewer.

See National Map Tileset  


My First US Census Data Map:

California Counties, Means of Transportation to Work by Poverty Status

My First (Basic) D3 Map

Description: This map is my first quantile map using US Census data. This visualizes US Census Table B08122, officially titled, "Means of Transportation to Work by Poverty Status," compares two variables: means of transportation, and ratio of income to poverty line.

Data: The data was obtained from the Census Bureau, delivered via the Census Reporter API. The map data is stored in a local GeoJson file and served up by this web server.

CA Means of Transportation by Poverty  


California County Quantile Map

County-by-County Quantile Map of California

Description: A map visualizing a random quantity for each California county.

Data: The data was obtained from the Census Bureau, delivered via the Census Reporter API. The map data is stored in a local GeoJson file and served up by this web server.

California County Quantile Map  


Feudal Japan Daimyo Boundaries Map (1664)

Feudal Japan Daimyo Boundaries Map

Description: A map of the boundaries of daimyos in feudal Japan, 1664 CE. The shapefile was uploaded to and is served up by a Geoserver instance, and is visualized on a map using Leaflet.js.

Data: The data was obtained from the Tokugawa Japan Data Archive web site at Harvard University.

Feudal Japan Daimyo Boundaries Map (1664)  


EIA Shale Gas Plays Map

US Shale Gas Plays

Description: A map of shale gas plays in the United States, from Shapefile data provided by the EIA. This data is provided by a custom Geoserver. The Shapefile data was added to and is served up by a Geoserver instance, and is visualized using Leaflet.js.

Data: The data was originally provided by the EIA, and was then added to the EIA-Oil-Gas-Maps repository on GitHub, by @talllguy.

EIA Shale Gas Plays Map  


NYC Streets Map

NYC Streets Map

Description: My first Leaflet.js map, showing about 100 streets of New York City. The map uses MapBox and a custom Geoserver setup (see charlesreid1.com for more info).

Data: The data on this map were provided by a Geoserver tutorial.

NYC Streets Map  

D3 Examples

My First D3 Map

My First (Basic) D3 Map

Description: This slaps together a simple map of California using D3. This was a very different process from the one used to create a Leaflet.

Data: This uses the same dataset as before, of California county boundary information obtained from the US Census Bureau via the Census Reporter API.

See My Very Basic D3 Map  


Barry Goldwater Bombing Range Topo Map

Description: A topo map of the Barry Goldwater bombing range in southwestern Arizona. The map is made with D3.

Data: Uses shapefile data from the National Map Viewer, translated into TopoJson. See charlesreid1 wiki.

See Goldwater Bombing Range Map  


California D3 Donut #1: Commute Method by Povery Status

California D3 Donut

Description: Uses a Leaflet map of California counties to control a D3 plot and send data to it dynamically based on the user selection.

Data: The data set used is commute method by poverty status, a data set from the US Census Bureau.

See California D3 Donut Map  


 

 

Made with by charlesreid1.