D3 Leaflet Map

This page chronicles my attempt to get a Leaflet map to interact with a D3 graphic. My intention was to start with something simple, so I picked a single vector of quantities that made a unique pie chart for each county in California.

Intro

The project page I envisioned had two parts: on one side, a Leaflet map where users could click on counties and have that trigger events for the graph. On the other side, a D3 chart, a pie chart displaying the quantity of interest for whatever county the user clicked on.

The Javascript for this page would require events triggered by mouse clicks on California counties to modify elements of the D3 plot (specifically, sending over the vector of numbers corresponding to the county the user had clicked).

I already had a data set from the Census Map I created, namely, method of commuting to work by poverty status. This would provide a good data set for embedding a single pie chart. It is easy to envision expanding from there, but for now let's keep it simple.

Setup

Most of my development was done with HTML, JS, and JSON files in a directory. Nothing in particular was needed (since all the Javascript libraries were included by link). I ran a Python web server in the folder using:

python -m SimpleHTTPServer 5000

and visited the pages I was designing at localhost:5000.