29:null 2a:["$","title",null,{"children":"CitiBike Clustergrammer-GL and Deck.gl | Nicolas Fernandez | Observable"}] 2f:T4e5,md`### Overview This notebook explores CitiBike from June 2019. The map is made with Deck.gl and the heatmap is made with our library [Clustergrammer-GL](https://github.com/ismms-himc/clustergrammer-gl). The basic idea of the dashboard is that we can calculate the probability distributions of where bikes departing (column) from each station will arrive (row, we also Z-scored destinations in our heatmap). Using this matrix, we can perform unbiased clustering and identify neighborhoods in NYC and other interesting patterns through linked views (e.g. select cluster in the heatmap and visualize the stations on a map). The visual can be interacted with in the following ways (works best after clicking the fullscreen button): clicking on a column/row highlights departing/arriving rides to/from the selected station clicking on the dendrogram highlights the group of stations clicking on a heatmap cell highlights a path between two stations (colored by how frequently that path is taken) clicking on a station in the map highlights departing (red) and arriving (blue) paths that are most common moving the UMAP slider morphs the positions of the heatmap into a UMAP representation (the map fades away to a yellowish color to represent UMAP space)`30:T592,station_data = meta.map( x => { if (dendro_stations.length > 0){ var inst_alpha = 25; if (dendro_stations.includes(x[''])){ inst_alpha = 255 } } else { inst_alpha = 255 } var inst_hex = cat_colors[x['Neighborhood']] var rgb = d3.color(inst_hex) var inst_color = [rgb.r, rgb.g, rgb.b, inst_alpha] // var inst_long = parseFloat(x['start station longitude']) // var inst_lat = parseFloat(x['start station latitude']) var map_long = parseFloat(x['start station longitude']) var map_lat = parseFloat(x['start station latitude']) var umap_long = umap_x_scale(parseFloat(x['umap-x'])) var umap_lat = umap_y_scale(parseFloat(x['umap-y'])) var inst_long = map_long * (1 - map_morph) + umap_long * map_morph var inst_lat = map_lat * (1 - map_morph) + umap_lat * map_morph var inst_obj = ({ 'name': x[''], 'position': [inst_long, inst_lat], 'Neighborhood': x['Neighborhood'], 'radius': 150, color: inst_color, 'station crossing': x['station crossing'], 'cross-x': x['cross-x'], 'cross-y': x['cross-y'], 'umap': [parseFloat(x['umap-x']), parseFloat(x['umap-y'])] }) mutable location_dict[inst_obj.name] = inst_obj.position return inst_obj } )31:T8cb,scatter_layer = { // var background_data = [{ // position: [-73.938299999998, 40.79232719999897], // color: [255, 255, 255], // radius: 100000 // }] // const backgroundLayer = new deck.ScatterplotLayer({ // data:background_data, // getPosition: d => d.position, // getFillColor: d => d.color, // getRadius: d => d.radius, // opacity: map_morph, // pickable: true, // }) // var polygon_data = [ // {polygon: [[0, 0], [0, 100], [100, 100], [100, 0], [0, 0]]} // ] // var backgroundLayer = new deck.SolidPolygonLayer({ // polygon_data, // getPolygon: d => d.contour, // }); var backgroundLayer = new deck.GridLayer({ id: 'new-grid-layer', data: [ {COORDINATES: [-73.75, 40.7]} ], // pickable: true, // extruded: true, cellSize: 2000000, elevationScale: 0, getPosition: d => d.COORDINATES, color: [255, 255, 255], opacity: map_morph }); const scatterLayer = new deck.ScatterplotLayer({ data: station_data, getPosition: d => d.position, getFillColor: d => d.color, // getRadius: d => d.radius, getRadius: radius, opacity: 0.5, pickable: true, autoHighlight: true, stroked: true, lineWidthMinPixels: 0.5, onHover: function(info, event){ if ('object' in info){ mutable inst_neighborhood = info.object.Neighborhood } }, onClick: function(info, event){ if ('object' in info){ if (info.object.name !== selected_station.name){ // select stations to view paths mutable path_types = 'all' mutable selected_station = info.object } else { // turn off paths mutable selected_station = {} } } } }) const pathLayer = new deck.PathLayer({ data: all_paths, pickable: true, widthScale: 1, widthMinPixels: 1, getPath: d => d.path, getColor: d => d.color, getWidth: d => d.width }); deckgl.setProps({layers: [backgroundLayer, pathLayer, scatterLayer]}); // deckgl.setProps({layers: [backgroundLayer]}); return scatterLayer }32:T6d7,viewof cgm = { // Clustergrammer-GL uses query selectors to re-find the container, so if we // might want multiple instances of Clustergrammer-GL on the page, they’ll // need unique identifiers! (It’d be better if Clustergrammer-GL used // element.querySelector instead of document.querySelector and didn’t depend // on these identifiers.) const containerId = DOM.uid("container"); const container = html`

`; // Clustergrammer-GL depends on the container having been inserted into the // document before it’s initialized. We can do this by yielding! However, // since we’re defining this cell as a view, we don’t want the view’s value // to resolve until CGM has initialized. Hence we define the view’s value as // a promise that resolves immediately after. We could simplify this if // Clustergrammer-GL allowed you to pass in a detached container. let resolve; container.value = new Promise(r => resolve = r); yield container; // Initialize CGM. // (We might want to use Observable’s reactive width here?) const cgm = CGM({ network, viz_width: 900, viz_height: 900, container }); // Redefine the order parameters as getters and setters, so that we can intercept // when these change and emit an event. That will allow other cells to listen for // these changes are react accordingly. Object.defineProperties(cgm.params.order.new, { row: reactiveValue(container, "row", cgm.params.order.new.row), col: reactiveValue(container, "col", cgm.params.order.new.col) }); // Resolve the view’s value so that downstream cells can run. resolve(cgm); d3.select('.row_search_container').remove() }33:Tbfc,function fullscreen({className = 'custom-fullscreen', style = null} = {}) { // Superfluous bling. const buttonStyle = style != null ? style : 'font-size:1rem;font-weight:bold;padding:8px;background:hsl(,100%,90%);border:1px solid hsl(40,100%,50%); border-radius:4px;box-shadow:0 .5px 2px 1px rgba(0,0,0,.2);cursor: pointer'; const button = html`