HTML, CSS, and JavaScript have been the 3 core languages making up modern web pages.

They are supported by all modern web browsers.

Libraries are pre-written code.

They let you create robust web applications easily. Someone else has done all the hard work!

Leaflet js is a library for making interactive web maps

Reasons to use Leaflet:

  • maps tell a story
  • lots of examples to borrow from
  • integration with D3 js

D3 js is a library for making interactive graphs/charts

Reasons to use D3 js:

  • graphs help us understand data
  • lots of examples to borrow from
  • integration with Leaflet

Today we'll use DC js and Crossfilter js which are libraries that make it easy to display filtered data

This sounds like a lot of libraries to deal with,
but it will make it easier

First we need data!

We'll use data from the California Department of Education: Public Schools

Just download the txt file and change the extension to ".tsv". It's a tab delimited file.

We want to keep the same data schema as the source so updates are simple.

You'll also need a code editor.

There are a lot out there. I prefer Atom.

If you are starting from scratch, next you'll set up your folders

Now you can add all the dependencies as you go, like:
  • data
  • images
  • css files
  • js files

And to make life easier, use a version control manager like GitHub

You can use Python to turn any folder into a web server for testing:

Then use gh-pages in GitHub to share your creation with the world for free!

Just take inspiration from others:
  • DC js examples
  • Dashboards with Crossfilter tutorial
  • DC js + Leaflet example
  • DC js + Leaflet tutorial

You can even steal the code from this presentation!

Here's what the example shows:

We have 2 DC js charts and the Leaflet js map.
And everything is linked!

Set up the filters (because the table is too big to digest at once):

Now we can make the row chart:

And the pie chart:

Then we tackle the map! It's hinged on a chart to take advantage of DC js:

But the map itself is good old Leaflet!

Then we piece it together in html (this uses Bootstrap, but you don't have to):

If this interests you, please join us at Maptime!