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()
map = FileAttachment("map.png").image()
vl
.layer(
vl
.markGeoshape()
.data(
vl
.topojson("phillylatlong.topojson")
.feature("Geo group")
)
.encode(
vl.stroke().value("#fff"),
vl.color().value("#000"),
vl.fill().value("#dfd"),
),
vl
.markCircle()
.width(1000)
.data(philly)
.encode(
vl.longitude().fieldQ("Longitude"),
vl.latitude().fieldQ("Latitude"),
vl.color().fieldN("Geo group"),
vl.size().fieldN("Geo group")
.scale(
{"range":[100,10000] }
),
//vl.size().aggregate("Geo group"), //this?
//vl.radius.aggregate("Geo group") //or this?
)
)
.project(
vl
.projection()
.type("orthographic")
.scale(scale)
)
.width(900)
.height(900)
.render()
import { map as mapView} from '@bulbil/leaflet-implementation'
html` ${ mapView }`
vl.markBar()
.width(6000)
.data(philly)
.title("What is your current job title?")
.encode(
vl.x().fieldN("What is your current job title?"),
vl.y().count(),
vl.color().fieldN("Geo group")
)
.render()
//annotations
vl.markBar()
.height(500)
.width(1000)
.data(philly)
.title("Calc Age")
.encode(
vl.x().fieldQ("Calc Age"),
vl.y().count(),
vl.color().fieldN("Geo group")
)
.render()
html ` <b>Some Takeaways</b><p>
It is interesting that the overwhelming majority of artists in Philadelphia are White, despite Black or African-Americans making up <a href="https://datausa.io/profile/geo/philadelphia-pa/#:~:text=Civics-,About,%2446%2C116%2C%20a%2016%25%20increase.">40.1% of Philadelphia in 2018.</a> Additionally, there appears to be a fairly even split between those identifying as men and women, with a slight tilt towards women. A downside of this visualization is that bar charts tend to highlight majorities and undermine the variety of other groups such as genderqueer (which make up a significant chunk of Philadelphia's artist population), agender, trans men, non-binary, queer femme individuals, and more. There's a lot lost in those labels, from the individual artistic journeys to the unique challenges they faced in the art industry to the kinds of stories they tell through their art. </p>
<p>However, this is just a limitation of data, so it is all the more important to accompany charts and graphs with context and external sources. While I couldn't quite figure out how to order the different income levels from lowest to highest (which would have made for easier interpretation) the portion of Black, Native American, and other non-White folks tends to decrease the higher up you go along the income distribution.
`
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")
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.
