The avatar for @sandraviz
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 💞
Public
Edited
Jan 31
18 forks
2 stars
D3.JS COURSE | 30 DAYS
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 SOURCES
d3.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 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
Also listed in…
Visualización dinamica 2023
Insert cell
Insert cell
Insert cell
data_raw = d3.csv(
"https://gist.githubusercontent.com/sandravizz/952b2c4b2b88a310bc5aaf371716593a/raw/c3725ac3c2bd0a70640a7f753e54ba1f88f74636/Berlin%2520airbnb%2520Nov%25202021",
d3.autoType
)
Insert cell
Insert cell
extent = d3.extent(data_raw, d => d.price)
Insert cell
Insert cell
data = data_raw.filter(d => d.price > 0 & d.price < 5000)
Insert cell
Insert cell
x = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range([0, 1300])
Insert cell
d3.extent(data, (d) => d.price)
Insert cell
x(500)
Insert cell
Insert cell
barcode1 = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 100])
.style("overflow", "visible");

svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", 20)
.attr("width", 1)
.attr("height", 40);

return svg.node();
}
Insert cell
Insert cell
c = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range(["#06d6a0", "#f20666"])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y = d3.scaleBand().rangeRound([0, 400]).padding(0.2).domain(room)
Insert cell
Insert cell
Insert cell
barcode3 = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");

let o2 = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range([0.4, 1]);

let c2 = d3
.scaleOrdinal()
.domain(room)
.range(["#f20666", "#06d6a0", "#662e9b", "#9EF211"]);

svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", (d) => y(d.room_type))
.attr("width", 1)
.attr("height", y.bandwidth())
.attr("fill", (d) => c2(d.room_type))
.attr("opacity", (d) => o2(d.price));

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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