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 AXES1. 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-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 | ARTISTS | D3.JS | Step 1
data = d3.csvParse(
await FileAttachment("data_by_artist.csv").text(),
d3.autoType
)
scale = {
const x = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.danceability))
.nice()
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d[Channel]))
.nice()
.range([height - margin.bottom, margin.top]);
const c = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.danceability))
.nice()
.range(["#F20505", "#024059"]);
return { x: x, y: y, c: c };
}
xAxis = (g) =>
g
.attr("class", "x-axis")
.attr("transform", `translate(0, ${margin.top})`)
.call(
d3
.axisTop(scale.x)
.tickValues([0.2, 0.4, 0.6, 0.8])
.tickFormat(formatNumber)
)
yAxis = (g) =>
g
.attr("class", "y-axis")
.attr("transform", `translate(${width - margin.right},0)`)
.call(d3.axisLeft(scale.y).ticks(4).tickFormat(formatNumber))
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.
