30 Days of D3 DatavizINTRO TO D3.JSINTRO TO OBSERVABLEINTRO TO HTML, SVG & CSSINTRO TO JAVASCRIPTd3.select.append( )VENN DIAGRAMd3.select.data( )d3.csv( )SPOTIFY | ARTIST | SIMPLE CHARTHISTOGRAMAIRBNB BERLIN | DATADATA SOURCESd3.scale( )SIMEPLE SCALINGSCALED CIRCLES70s CAR BUBBLE CHARTTHE POWER OF SCALEd3.axis( )BARCODE PLOTSCATTER PLOT WITH AXESSPOTIFY | ARTISTS | D3.JS | Step 11. ASSIGNMENTTHREATENED SPECIES | BIRDS 2020d3.transition( )SIMPLE TRANSITIONHTML BUTTONSVISUAL ENCODING BUTTON | HTMLTHREATENED SPECIES - BIRDS 2020 ANIMATEDANIMATED COLORSPOTIFY | ARTISTS | D3.JS | Step 2ANIMATED SCATTER PLOTd3.tip( )SPOTIFY | ARTISTS | D3.js | Step 3d3.hexbinFROM SCATTER TO HEXBINSPOTIFY | GENRESTHE UNWELCOMED ARQUERO.JSINTRO TO ARQUERO.JSGLOBAL TEMPERATURE TRENDS, 1880-2022 ARQUERO.JSGLOBAL TEMPERATURE MONTHLY, 1880-2022 D3.JSUSA GAS PRICE 2000-22SPOTIFY | ARTISTS ARQUERO.JSd3.line( )d3.area( )INTERACTIVE TIMEFRAMEGLOBAL TEMPERATURES ANOMALIESANIMATED LINE CHARTCSS PATH ANIMATIONANIMATED LINECOVID | MOBILITY DATA ON CITIESGLOBAL TEMPERATURES DAILY 1979 - 2024 | D3.JSCONSUMPTION EMISSION2. ASSIGNMENT
SPOTIFY | YEARS ARQUERO.JS
data.view()
data
.orderby('danceability')
.view(10)
data
.orderby(aq.desc('danceability'))
.view(10)
data.orderby(aq.desc("danceability")).select("year", "danceability").view(10)
data.orderby(aq.desc("danceability")).select(1, 4).view(5)
data
.orderby(aq.desc('danceability'))
.select(aq.not('mode'))
.view(5)
data
.derive({
dancing_vocals: (d) => 0.8 * d.danceability + 0.2 * d.instrumentalness
})
.orderby(aq.desc("dancing_vocals"))
.select(1, 3, 6, 14)
.view(10)
data
.groupby("key")
.rollup({
mean_danceability: (d) => op.mean(d.danceability),
mean_instrumental: (d) => op.mean(d.instrumentalness),
mean_dancing_vocals: (d) =>
op.mean(0.8 * d.danceability + 0.8 * d.instrumentalness),
count: op.count()
})
.filter((d) => d.count === 10)
.orderby(aq.desc("mean_instrumental"))
.view(12)
viewof data_tidy = data
.fold(aq.range("acousticness", "popularity"), {
as: ["attributes", "values"]
})
.view(5)
data_tidy.groupby("attributes").count().orderby("attributes").view(10)
data_tidy.groupby("year").pivot("attributes", "values").view(5)
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.
