Published
Edited
Dec 7, 2020
1 fork
phillydata = await FileAttachment("phillyartistcensus.csv").text()
philly = await d3.csvParse(phillydata)
table(philly)
philly.columns
philly.length
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
image = FileAttachment("11.11.2020.JPG").image()
md ` https://observablehq.com/@floledermann/drawing-maps-from-geodata-in-d3
`
md ` <h>Trying to Make a Map </h>`
viewof scale = html`<input type=range min=100 max=500 step=50>`
vl
.layer(
vl
.markGeoshape()
.data(
vl
.topojson("phillylatlong2.topojson")
.feature("Geo group")
)
.encode(
vl.stroke().value("#fff"),
vl.color().value("#000"),
vl.fill().value("#dfd")
),
vl
.markCircle()
.data(philly)
.encode(
vl.longitude().fieldQ("Longitude"),
vl.latitude().fieldQ("Latitude"),
vl.color().fieldN("Geo group")
)
)
.project(
vl
.projection()
.type("orthographic")
.scale(scale)
)
.width(750)
.height(750)
.render()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
image
md ` # Appendix`
import { table } from "@tmcw/tables/2"
import { vl } from "@vega/vega-lite-api"
import { select } from "@jashkenas/inputs"
d3 = require ('d3')
vegalite = require("@observablehq/vega-lite@0.2")
html `
<style> img {background: #6d6359; height: 640px; max-height: calc(0.618 * (100vw - 28px));}
</style>
`
noticecss = html`
<style>
.notice {
font-size: 1.5rem;
padding: 1rem;
width: 100%;
display: block;
border: 1px solid rgba(0,255,255,.75);
border-radius: 3px;
background: repeat linear-gradient(45deg, rgba(255,0,255,.5), rgba(0,255,255,.75));
}
.notice:before {
content: '👉🏾 ';
font-weight: bold;
padding: .25rem 0 .25rem .25rem;
margin-right: .25rem;
}
</style>
`
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.
