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 COLORANIMATED 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 2
chart1 = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
//Scatter plot with transitions
svg
.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => scale.x(d.danceability))
.style("fill", (d) => scale.c(d.danceability))
.style("opacity", 0.5)
.attr("r", 0)
.attr("cy", 10)
.transition()
.duration(1)
.delay((d, i) => i * 0.2)
.attr("r", 1.8)
.attr("cy", (d) => scale.y(d[Channel]));
//Call the axes
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
//Add some general titles to the axes
svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height - 5})`)
.append("text")
.style("text-anchor", "middle")
.text("danceability")
.attr("class", "x_text");
svg
.append("g")
.attr("transform", `translate(${margin.left}, ${height / 2})rotate(-90)`)
.append("text")
.style("text-anchor", "middle")
.text(Channel)
.attr("class", "y_text");
return svg.node();
}
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.
