SCALED CIRCLES / 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

May 30, 2024

Fork of SIMEPLE SCALING

•

11 forks

2 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

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("overflow", "visible");

svg

.selectAll("circle")

.data(data)

.join("circle")

.attr("cx", (d) => x(d[0]))

.attr("cy", (d) => y(d[1]))

.attr("r", (d) => r(d[1]))

.attr("fill", (d) => c(d[1]));

svg

.selectAll("text")

.data(data)

.join("text")

.filter((d) => d[1] > 90)

.text((d) => d[0] + " | " + d[1])

.attr("x", (d) => x(d[0]))

.attr("y", (d) => y(d[1]))

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

return svg.node();

}

x = d3

.scaleLinear()

.domain(d3.extent(data, (d) => d[0]))

.range([margin.left, width - margin.right])

y = d3

.scaleLinear()

.domain([0, d3.max(data, (d) => d[1])])

.range([height - margin.bottom, margin.top])

d3.extent(data, (d) => d[0])

r = d3

.scaleSqrt()

.domain(d3.extent(data, (d) => d[1]))

.range([2, 38])

c = d3

.scaleLinear()

.domain(d3.extent(data, (d) => d[1]))

.range(["#022859", "#f20666"])

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