nteract / outputs

A collection of React components for displaying rich Jupyter display objects
BSD 3-Clause "New" or "Revised" License
26 stars 19 forks source link

transform-deck.gl #1

Open kylebarron opened 4 years ago

kylebarron commented 4 years ago

Hello!

I'm interested in adding a new transform, specifically for https://deck.gl, an open source high performance geospatial rendering engine.

We have a Python binding, pydeck, that works in Jupyter notebook and lab through the ipywidget interface, but I'd like to enable it within the nteract ecosystem as well.

Aside from using a widget, Deck.gl has a JSON serialization interface, which encapsulates all the information we need to render a map, e.g.:

{
  "initialViewState": {
    "bearing": -27.36,
    "latitude": 52.2323,
    "longitude": -1.415,
    "maxZoom": 15,
    "minZoom": 5,
    "pitch": 40.5,
    "zoom": 6
  },
  "layers": [
    {
      "@@type": "HexagonLayer",
      "autoHighlight": true,
      "coverage": 1,
      "data": "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv",
      "elevationRange": [0, 3000],
      "elevationScale": 50,
      "extruded": true,
      "getPosition": "@@=[lng, lat]",
      "id": "2655e643-8abb-41a2-99f7-cd79c0e41aea",
      "pickable": true
    }
  ],
  "mapStyle": "mapbox://styles/mapbox/dark-v9",
  "views": [{ "@@type": "MapView", "controller": true }]
}

This is easily generated by Pydeck, and on the JS side, it's very easy to consume (docs). Pseudocode:

import Deck from 'deck.gl'
import {JSONConverter} from '@deck.gl/json';

const deck = new Deck({
  canvas: 'deck-canvas',
  json
});

deck.setProps(jsonConverter.convert(json));

Deck.gl is react-based but with an optional js imperative API, so I think there's a simple way to do the above using React but haven't researched it yet.

So my proposal is to add a transform to consume Deck.gl JSON and render it with the Deck.gl JS library.

Would such a PR be accepted?

captainsafia commented 4 years ago

Yes, a PR for this is welcome.

The docs have a section on creating transforms and the existing transforms are good examples to look at it.

Feel free to ping on Slack for help.