70s CAR BUBBLE CHART / Sandraviz

Olá! My name is Sandra and I work with Dataviz in beautiful Lisbon 🙋🏼‍♀️ I'm a visual analyst and researcher with a passion for data storytelling and statistics to uncover patterns in human behaviour and societies 💞

Workspace

Public

Edited

Jul 26, 2024

Fork of SCALED CIRCLES

•

9 forks

5 stars

D3.JS COURSE | 30 DAYS

30 Days of D3 Dataviz INTRO TO D3.JS INTRO TO OBSERVABLE INTRO TO HTML, SVG & CSS INTRO TO JAVASCRIPT d3.select.append( )VENN DIAGRAM d3.select.data( )d3.csv( )SPOTIFY | ARTIST | SIMPLE CHART HISTOGRAM AIRBNB BERLIN | DATA DATA SOURCES d3.scale( )SIMEPLE SCALING SCALED CIRCLES

70s CAR BUBBLE CHART

THE POWER OF SCALE d3.axis( )BARCODE PLOT SCATTER PLOT WITH AXES SPOTIFY | ARTISTS | D3.JS | Step 1 1. ASSIGNMENT THREATENED SPECIES | BIRDS 2020 d3.transition( )SIMPLE TRANSITION HTML BUTTONS VISUAL ENCODING BUTTON | HTML THREATENED SPECIES - BIRDS 2020 ANIMATED ANIMATED COLOR SPOTIFY | ARTISTS | D3.JS | Step 2 ANIMATED SCATTER PLOT d3.tip( )SPOTIFY | ARTISTS | D3.js | Step 3 d3.hexbin FROM SCATTER TO HEXBIN SPOTIFY | GENRES SPOTIFY | YEARS ARQUERO.JS THE UNWELCOMED ARQUERO.JS INTRO TO ARQUERO.JS GLOBAL TEMPERATURE TRENDS, 1880-2022 ARQUERO.JS GLOBAL TEMPERATURE MONTHLY, 1880-2022 D3.JS USA GAS PRICE 2000-22 SPOTIFY | ARTISTS ARQUERO.JS d3.line( )d3.area( )INTERACTIVE TIMEFRAME GLOBAL TEMPERATURES ANOMALIES ANIMATED LINE CHART CSS PATH ANIMATION ANIMATED LINE COVID | MOBILITY DATA ON CITIES GLOBAL TEMPERATURES DAILY 1979 - 2024 | D3.JS CONSUMPTION EMISSION 2. ASSIGNMENT

Also listed in…

Visualización dinamica 2023

chart = {

const svg = d3.select(DOM.svg(w, h));

svg.selectAll("circle")

.data(data)

.join("circle")

.attr("cx", d => x(d.x))

.attr("cy", d => y(d.y))

.attr("r", d => r(d.y))

.attr("fill", d => c(d.y));

svg.selectAll("text")

.data(data)

.join("text")

.filter(d => d.y > 200)

.text(d => d.name.replace(/ .*/,'')) // Deleting everything after the first word

.attr("x", d => x(d.x))

.attr("y", d => y(d.y));

svg.append("g")

.call(xAxis);

svg.append("g")

.attr("transform", `translate(${w/2}, ${h-5})`)

.append('text')

.style("text-anchor", "middle")

.text("mpg")

.attr("class", 'x_text');

svg.append("g")

.call(yAxis);

svg.append("g")

.attr("transform", `translate(20, ${h/1.2})rotate(-90)`)

.append('text')

.style("text-anchor", "middle")

.text("Despesa Mitjana")

.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.

Learn more