Grading Texas Schools

This project was primarily constructed using Mapbox GL JS and DataTables.

Map

Layers

Both school campuses (points) and school districts (polygons) were in the same GeoJSON file. In Mapbox, I imported them under one source, but separated them into different layers as seen in this example. Depending on what the user selects, I am simply showing and hiding layers (see this example on toggling layers).

I did it this way rather than load in two GeoJSON files, primarily because it was easier to have just one file supply the data for the table, and also we avoid making two getJSON calls (though that alone is not substantial enough to warrant this way, in my opinion).

Hover pop ups can be found in this example.

Filter

The map is filtered based on the selections of the dropdowns and update when they're changed. They're updated using Mapbox's setFilter() function. Note that setFilter() does not remember or carry over the current filter, so you have to define all filters every time you update the filter.

Here's an example of using underscore and setFilter() together:

var filtered_features = _.filter(data.features, function(d){
  return d.properties.type == some_value;
});

map.setFilter(layer, ['in', "gid"].concat(filtered_features.map(function(feature){
  return feature.properties.gid;
})));

I also synced the map filter to the DataTable search bar based on this example and calling setFilter() within a $('#searchBar').keyup() event.

Legend

The color legend on the map was made with d3 SVG Legend

Table

Filter

Unlike the mapbox filter, DataTables will store the last filter applied and add onto it. I used the column().search() method.

To clear all searches:

table
 .search( '' )
 .columns().search( '' )
 .draw();

Question mark hovers

Tooltips on the question marks were built using qtip2