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
Jun 5, 2024
7 forks
2 stars
1
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 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 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.JS
d3.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
Insert cell
<svg width="950" height="160">
<path d="M 10 50 L 100 20 L 200 80 L 500 20 L 700 20 L 750 0 " fill="None" stroke="#131B26"/></path>
</svg>
Insert cell
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg.append("path").datum(data).attr("class", "line").attr("d", line);

return svg.node();
}
Insert cell
Insert cell
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
Insert cell
y = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.Addiction))
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.attr("class","y-axis")
.call(d3.axisLeft(y)
.tickValues([0, 10, 20])
.tickSize(-width))
Insert cell
Insert cell
Insert cell
line = d3.line()
.defined(d => d.Addiction > 0)
.x(d => x(d.date))
.y(d => y(d.Addiction))
Insert cell
line(data)
Insert cell
Insert cell
data = d3.tsvParse(await FileAttachment("search@1.tsv").text(), ({date, Addiction}) => ({date: parseDate(date), Addiction: +Addiction}))
Insert cell
data_raw = d3.tsvParse(await FileAttachment("search@1.tsv").text())
Insert cell
parseDate = d3.timeParse("%m%Y")
Insert cell
formatDate = d3.timeFormat("%b%y");
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