SCATTER PLOT WITH AXES / 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 5

Fork of HISTOGRAM

•

7 forks

3 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");

const x = d3

.scaleLinear()

.domain(d3.extent(Diamonds, (d) => d.carat))

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

const c = d3

.scaleLinear()

.domain(d3.extent(Diamonds, (d) => d.price))

.range(["#662e9b", "#06d6a0"]);

const y = d3

.scaleLinear()

.domain(d3.extent(Diamonds, (d) => d.price))

.rangeRound([height - margin.bottom, margin.top]);

svg

.selectAll("circle")

.data(Diamonds)

.join("circle")

.style("fill", (d) => c(d.price))

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

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

.attr("r", (d) => d.carat);

let xaxis = svg

.append("g")

.attr("class", "x-axis")

.attr("transform", `translate(0, ${height - margin.bottom})`)

.call(d3.axisBottom().scale(x).ticks(5).tickSize(-height).tickPadding(15));

let formatNumber = d3.format(".2s");

let yaxis = svg

.append("g")

.attr("class", "y-axis")

.attr("transform", `translate(40,0)`)

.call(

.axisLeft()

.scale(y)

.tickValues([

1000, 2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000, 18000

])

.tickSize(-width)

.tickPadding(15)

.tickFormat(formatNumber)

);

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