md`# Code`
selected_player = {
var selected_player = 'Select Player'
if (selected_col !== null){
selected_player = selected_col.replace('_',' ')
}
return selected_player
}
function reactiveValue(container, name, value) {
return {
get() {
return value;
},
set(v) {
value = v;
container.dispatchEvent(new CustomEvent("input", {detail: {name, value}}));
return value;
}
};
}
mutable is_fullscreen = false
container = html `<div style="height:${inst_height}px"></div>`
inst_height = {
var inst_height
if (orientation === 'Portrait'){
inst_height = 850
} else {
inst_height = 850
}
return inst_height
}
// {
// let container = html`<div style='height:1050px' id='container'></div>`;
// yield container;
// cgm({
// network,
// viz_width: 900,
// viz_height: 900,
// container
// });
// }
network = FileAttachment("shot_chart_heatmap@4.json").json()
// CGM = require(await FileAttachment("clustergrammer-gl.0.19.0.packd.js").url())
CGM = require(await FileAttachment("clustergrammer-gl.0.22.0.packd.js").url())
d3 = require("d3@5")
import {slider, select} from '@jashkenas/inputs'
selection_type = Generators.observe(notify => {
const mousemove = () => notify(cgm.params.tooltip.tooltip_type);
viewof cgm.addEventListener("click", mousemove);
notify(cgm.params.tooltip.tooltip_type);
return () => viewof cgm.removeEventListener("mousemove", mousemove);
})
mutable selected_row = Generators.observe(notify => {
const mouse_click = () => {
if (cgm.params.tooltip.tooltip_type === 'row-label'){
var inst_name = cgm.params.int.mouseover.row.name
if (selection != inst_name){
mutable selection = 'grid-point'
} else {
mutable selection = 'category'
}
}
notify(cgm.params.int.mouseover.row.name)
}
viewof cgm.addEventListener("click", mouse_click);
notify(cgm.params.int.mouseover.row.name);
return () => viewof cgm.removeEventListener("mousemove", mouse_click);
})
mutable selected_col = Generators.observe(notify => {
const mouse_click = () => {
if (cgm.params.tooltip.tooltip_type === 'col-label'){
var inst_name = cgm.params.int.mouseover.col.name
if (selection != inst_name){
mutable selection = inst_name
} else {
mutable selection = 'category'
}
}
notify(cgm.params.int.mouseover.col.name)
}
viewof cgm.addEventListener("click", mouse_click);
notify(cgm.params.int.mouseover.col.name);
return () => viewof cgm.removeEventListener("mousemove", mouse_click);
})
dendro_selections = Generators.observe(notify => {
const mousemove = () => {
if (cgm.params.tooltip.tooltip_type.includes('dendro')){
mutable selection = 'category'
}
notify(cgm.params.dendro.selected_clust_names)
}
viewof cgm.addEventListener("click", mousemove);
notify(cgm.params.dendro.selected_clust_names);
return () => viewof cgm.removeEventListener("mousemove", mousemove);
})
umap_data_ini = d3.csvParse(await FileAttachment("meta_grid@2.csv").text())
opacity_scale = d3.scaleLinear()
.domain([0, 5])
.range([0, 255]);
umap_x_min = Math.min.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['x']) }))
umap_x_max = Math.max.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['x']) }))
umap_y_min = Math.min.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['y']) }))
umap_y_max = Math.max.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['y']) }))
umap_x_scale = d3.scaleLinear()
.domain([umap_x_min, umap_x_max])
.range([-74, -73]);
umap_y_scale = d3.scaleLinear()
.domain([umap_y_min, umap_y_max])
.range([40, 40.785]);
cat_dict = {
var cat_dict = {}
network.col_nodes.map(x => {
cat_dict[x.name] = x['cat-0']
})
return cat_dict
}
network.cat_colors
// cat_colors = {
// var cat_colors = {}
// var cat_colors_ini = network.cat_colors.row['cat-0']
// var ini_keys = Object.keys(cat_colors_ini)
// ini_keys.map(x => {
// cat_colors[x.split(': ')[1]] = cat_colors_ini[x]
// })
// return cat_colors
// }
cat_colors = ({
'downtown': '#FF0000',
'midrange': '#A9A9A9',
'paint': '#0000FF'
})
mutable selection = 'category'
selected_row_index = network.row_node_names.indexOf(selected_row)
// dimension_data = network.mat[selected_row_index]
selected_col_index
grid_data = network.mat.map(x => x[selected_col_index])
selected_col_index = network.col_node_names.indexOf(selected_col)
umap_data_ini[0]
cat_colors
umap_data = umap_data_ini.map(
x => {
var inst_long = umap_x_scale(parseFloat(x['x']))
var inst_lat = umap_y_scale(parseFloat(x['y']))
var inst_cat = x['Region'] // cat_dict[x['']].split(': ')[1]
var rgb = d3.color(cat_colors[inst_cat])
var inst_color
// console.log(selection)
if (selection === 'category'){
// color by category
var inst_alpha
if (selection_type == 'row-dendro'){
if (dendro_selections.includes(x[''])){
inst_alpha = 255
} else {
inst_alpha = 25
}
} else {
inst_alpha = 255
}
inst_color = [rgb.r, rgb.g, rgb.b, inst_alpha]
} else if (selection === 'grid-point') {
console.log('>>> grid-point!!!!')
// color by category
var inst_alpha
if (x[''] === selected_row){
inst_alpha = 255
} else {
inst_alpha = 25
}
inst_color = [rgb.r, rgb.g, rgb.b, inst_alpha]
} else {
// color by dimension
var inst_index = network.row_node_names.indexOf(x[''])
var inst_data = grid_data[inst_index]
var inst_opacity = opacity_scale(Math.abs(inst_data))
if (inst_data > 0){
inst_color = [255, 0, 0, inst_opacity]
} else {
inst_color = [0, 0, 255, inst_opacity]
}
}
var inst_obj = ({
name: x[''],
position: [inst_long, inst_lat],
food_type: inst_cat,
color: inst_color
})
return inst_obj
}
)
scatter_layer = {
const scatterLayer = new deck.ScatterplotLayer({
data: umap_data,
getPosition: d => d.position,
getFillColor: d => d.color,
getRadius: 2100,
opacity: 0.5,
pickable: true,
autoHighlight: true,
highlightColor: d => [50, 50, 50, 200],
// stroked: true,
// lineWidthMinPixels: 0.05,
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 = {}
// }
// }
}
})
deckgl.setProps({layers: [ scatterLayer]});
return scatterLayer
}
deckgl = {
// // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
// // This is an Observable hack: clear previously generated content
container.innerHTML = '';
return new deck.DeckGL({
container,
initialViewState: {
longitude: inst_lng,
latitude: inst_lat,
zoom: inst_zoom,
minZoom: 9,
maxZoom: 11,
},
controller: true,
getTooltip: ({object}) => {
// return object && `${object.Neighborhood} \n ${object['cross-x']} and ${object['cross-y']}
return object && `${object.name}\n Shot Type: ${object.food_type}` },
// Mapbox settings
// set `map: false` to turn off Mapbox base map
// map: mapboxgl,
// This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com
// mapboxApiAccessToken: mapbox_token,
mapStyle: 'mapbox://styles/mapbox/light-v9',
});
}
inst_zoom = 9
inst_lng = -73.45
inst_lat = 40.4
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
// set table style to full width
html`
<style>
p {
min-width: 100%;
}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
