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.JSINTRO TO ARQUERO.JSGLOBAL TEMPERATURE TRENDS, 1880-2022 ARQUERO.JSGLOBAL TEMPERATURE MONTHLY, 1880-2022 D3.JSUSA GAS PRICE 2000-22d3.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 | ARTISTS ARQUERO.JS
viewof data = aq
.fromCSV(await FileAttachment("data_by_artist.csv").text())
.view(10)
data
.orderby('danceability')
.view(10)
data
.orderby(aq.desc('danceability'))
.view(10)
data.orderby(aq.desc("danceability")).select("artists", "danceability").view(15)
data.orderby(aq.desc("danceability")).select(3, 4).view(5)
data
.orderby(aq.desc('danceability'))
.select(aq.not('mode'))
.view(5)
atanew = data
.filter((d) => op.includes(d.artists, "Beatles"))
.orderby(aq.desc("danceability"))
.select("artists", "danceability")
.view()
data
.derive({
dancing_vocals: (d) => 0.8 * d.danceability + 0.2 * d.instrumentalness
})
.orderby(aq.desc("dancing_vocals"))
.select(3, 4, 7, 15)
.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.8 * d.instrumentalness),
count: op.count()
})
.filter((d) => d.count > 200)
.orderby(aq.desc("count"))
.view(12)
data
.groupby('key')
.count()
.view(5)
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("artists").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.
