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 | GENRESSPOTIFY | YEARS ARQUERO.JSTHE UNWELCOMED 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
INTRO TO ARQUERO.JS
data = aq.fromCSV(await FileAttachment("data_by_genres.csv").text())
data
.orderby("danceability")
.view(10)
data
.orderby(aq.desc("danceability"))
.view(10)
data
.orderby(aq.desc("danceability"))
.select("genres", "danceability")
.view(10)
data
.orderby(aq.desc("danceability"))
.select(1, 3)
.view(5)
data
.orderby(aq.desc('danceability'))
.select(aq.not('mode'))
.view(5)
atanew = data
.filter((d) => op.includes(d.genres, "salsa"))
.orderby(aq.desc("danceability"))
.select("genres", "danceability")
.view(5)
data
.derive({
dancing_vocals: (d) => 0.5 * d.danceability + 0.5 * d.instrumentalness
})
.orderby(aq.desc("dancing_vocals"))
.select(1, 3, 6, 14)
.view(10)
data
.derive({ electro: (d) => op.includes(d.genres, "electro") })
.orderby(aq.desc("electro"))
.select(1, 3, 6, 14)
.view(10)
data
.groupby("key")
.rollup({
mean_d: (d) => op.mean(d.danceability),
mean_i: (d) => op.mean(d.instrumentalness),
mean_i_d: (d) => op.mean(0.8 * d.danceability + 0.2 * d.instrumentalness),
count: op.count()
})
.select(0, 1, 2, 3)
.orderby("mean_d")
.view(12)
data.groupby("key").count().view(12)
viewof data2 = data
.fold(['acousticness', 'danceability', 'energy', 'tempo', 'instrumentalness', 'loudness', 'duration_ms', 'liveness', 'speechiness','popularity', 'valence'], {as: ['attributes', 'values'] })
.view(20)
viewof data3 = data
.fold(aq.range('acousticness','popularity'), {as: ['attributes', 'values'] })
.view(5)
data2
.groupby('attributes')
.count()
.orderby('attributes')
.view(10)
data2
.groupby('genres')
.pivot('attributes', 'values')
.view(5)
import { aq, op } from '@uwdata/arquero'
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.
