NYC Map dashboard - Fleet's version - Jan 30 / Fleet Hower

Fleet Hower

Workspace

Public

Edited

Feb 6

Fork of NYC Map - Fleet's version

•

7 forks

viewof data2draw = Inputs.radio(["Zones", "Parks", "Street"], {label: "Data to Draw", value:"Zones"})

data2draw

viewof parksTgl = Inputs.toggle({label:"Parks"})

parksTgl

mutable mapText = " "

mutable mapDesc = " "

dashboard =

html`

${dashGraphics}

</div>

${viewof dashPage}

</div>

${currentDash}

</div>

${md`*This is some markdown*`}

</div>

viewof dashPage = Inputs.radio(["Map", "Treemap"], {label: "",value:"Map"})

currentDash = {

var currentDashVar = mapView

if(dashPage=="Map"){currentDashVar = mapView}

if(dashPage=="Treemap"){currentDashVar = treemapView}

return currentDashVar

}

mapView = {//this is the map page for the dashboard

var mapViewVar = html`

${map}

</div>

${viewof parksTgl}

</div>

${mapText}

</div>

${mapDesc}

</div>

return mapViewVar

}

treemapView = {//this is the treemap page for the dashboard

var treemapViewVar = html`

${tree_chart}

</div>

return treemapViewVar

}

wireframe = FileAttachment("wireframe.txt").tsv({array:true})

icon1 = FileAttachment("icon1.txt").tsv({array:true})

mouth = FileAttachment("mouth.txt").tsv({array:true})

eyes = FileAttachment("eyes.txt").tsv({array:true})

face_outline = FileAttachment("face_outline.txt").tsv({array:true})

bbox_new = FileAttachment("bbox_new.geojson").json()

graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})

bbox1 = FileAttachment("bbox@1.geojson").json()

theaters = FileAttachment("theaters.geojson").json()

restrooms = FileAttachment("restrooms.geojson").json()

subways = FileAttachment("subways.geojson").json()

parks = FileAttachment("parks.geojson").json()

dining_lines = FileAttachment("dining_lines.geojson").json()

spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRwB-ukffxTe8cd2j54Lg_PGvR-3Dm6A6TZNS9AV1TRz5iNL3shNkXsyJLlXTGzcI4UCkyh9MJS9P0G/pub?output=csv'

spots = d3.csv(spotsLink,d3.autoType)

import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"

dash1 = FileAttachment("dash1.txt").tsv({array:true})

tree_chart = Treemap(flare, {

path: d => d.name.replace(/\./g, "/"), // e.g., "flare/animate/Easing"

value: d => d.size, // size of each node (file); null for internal nodes (folders)

group: d => d.name.split(".")[1], // e.g., "animate" in "flare.animate.Easing"; for color

label: (d, n) => [...d.name.split(".").pop().split(/(?=[A-Z][a-z])/g), n.value.toLocaleString("en")].join("\n"),

title: (d, n) => `${d.name}\n${n.value.toLocaleString("en")}`, // text to show on hover

link: (d, n) => `https://github.com/prefuse/Flare/blob/master/flare/src${n.id}.as`,

//tile, // e.g., d3.treemapBinary; set by input above

width: 1152,

height: 1152

})

flare = FileAttachment("flare-2.csv").csv({typed: true})

import {Treemap} from "@d3/treemap-component"

Type Table, then Shift-Enter. Ctrl-space for more options.

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.

Learn more