React Mapping/Data Viz frameworks

[mateoclarke]

Ideally we don't have to do too much work from scratch. Using the NYC VZV as a guide, let's identify possible open source libraries that could help us with mapping and charting data in React.

We just link and comment below on what we find.

Migrated to atd-data-tech #1765

[mddilley]

This Medium article is a good intro to GeoJSON format/geometries and TopoJSON that I found over the weekend. (@tcwcodes - this is the one that I mentioned this morning.) https://medium.com/@amy.degenaro/introduction-to-digital-cartography-geojson-and-d3-js-c27f066aa84

For charts, this library looks cool and has guides for many of the chart types. https://semiotic.nteract.io/

I also found this resource for some React map examples. https://reactjsexample.com/tag/maps/

Map libraries: https://github.com/mariusandra/pigeon-maps (maybe too limited for scope of VZV?) https://www.react-simple-maps.io/ (probably too limited for VZV)

Heatmap example w/ Leaflet: https://reactjsexample.com/a-custom-layer-for-heatmaps-in-react-leaflet/ https://react-leaflet.js.org/

Heatmap & choropleth: https://dev.to/webdevraj/how-to-create-a-choropleth-map-or-geographic-heatmap-in-react-23bm

[mateoclarke]

The d3/d3.geo stuff is cool, but for our maps, I'm pretty sure d3 is only good for political boundaries with SVG and not good for map tiles and point plotting.

Pigeon is interesting, wonder how quickly we'd run off their happy path. The performance benefits seem less important for our use case but still nice.

I like React-Leaflet and the React wrappers for Mapbox.gl too. Might be good to use something we already have some experience with. React-Map-gl is what we used from the police complaint form, right?

• https://uber.github.io/react-map-gl/#/

I like the look of Semiotic, wonder if there are others like it. Here's a few others I found with high stars on GH.

• http://recharts.org/
• https://uber.github.io/react-vis/
• https://react-google-charts.com/
• https://vx-demo.now.sh/
• https://chartkick.com/react

[mddilley]

For the Knack map component, we used https://github.com/alex3165/react-mapbox-gl, but I am concerned with the issue that we ran into with features not rendering until the map moved or zoomed. Although, that could have been an issue with new code interacting with existing code, and it could be a different story with a fresh start. We couldn't rely on the Markers-only route as a fix since there will be a large set of data.

I looked at React-Map-gl and the out-of-the-box heat map looks pretty slick and, looking at the code, it looks very similar to React-mapbox-gl so the learning curve could be small.

[johnclary]

@mddilley probably worth checking out some of the NYC Planning Labs projects projects for reference.

[mateoclarke]

Not quite React or OSS libraries, but some example VZ dashboards that @rgreinho shared with me:

• https://ncvisionzero.org/data-analytics/visualizations/
• https://geospatialdenver.maps.arcgis.com/apps/MapJournal/index.html?appid=e333ca7679ec40c2a3ef449e3b111743

Full index of VZ programs nation-wide:

• https://docs.scrapd.org/resources/other-cities/

[mddilley]

I like the breakdown of fatalites/serious injuries in this NC dashboard (especially the "Who" tab which I found to be interesting). https://ncvisionzero.org/visualizations/safety-dashboard/

These tools from the NYC Planning Labs look interesting if we go the Mapbox GL route for editing the style of the viewer map. https://github.com/NYCPlanning/labs-maputnik-dev-server (makes it easier to use this library: https://github.com/maputnik/editor).

[mddilley]

I tripped over this library while browsing the dependencies of react-material-admin https://apexcharts.com/react-chart-demos/ https://apexcharts.com/javascript-chart-demos/dashboards/dark/#

[mateoclarke]

Core UI uses react-chartjs-2 under the hood. Seems like it covers a lot of the basic use cases: https://jerairrest.github.io/react-chartjs-2/

[mateoclarke]

I think this issue has become stale, but there are some good notes in here. I'm going to rename the issue and put it in the icebox for later reference.

[johnclary]

@mateoclarke @JaceDeloney let's just close this?