Introduction to D3 Course: Lesson 3 / Ariel Aizemberg

Ariel Aizemberg

Lic. en Ciencias de la Computación, DC, FCEyN, UBA. Profesor Asociado en el ITBA.

Workspace

Public

Edited

Sep 27, 2023

Fork of Introduction to D3 Course: Lesson 3

<path d='M0,0L300,200'

style="stroke: steelblue">

</path>

</svg>

</svg>

</svg>

myData = [0, 10, 5, 30]

{

const width = 500;

const height = 200;

const margin = { top: 10, bottom: 30, left: 10, right: 10 };

const svg = d3

.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom);

const g = svg

.append("g")

.attr("transform", `translate(${margin.left}, ${margin.top})`);

// Hint: you will need to define scales. (DONE)

const x = d3.scaleLinear().domain([0, 3]).range([0, width]);

const y = d3.scaleLinear().domain(d3.extent(myData)).range([height, 0]);

const line = d3

.line()

.curve(d3.curveLinear) //default curve interpolation

.x((d, i) => x(i))

.y((d) => y(d));

// using 'datum'

g.append("path")

.datum(myData)

.attr("d", line)

.style("stroke", "steelblue")

.style("stroke-width", 10)

.style("fill", "none");

// using 'data'

g.selectAll(".line")

.data([myData])

.join("path")

.attr("d", line)

.attr("class", "line")

.style("stroke", "#fff")

.style("stroke-width", 1)

.style("fill", "none");

g.selectAll("text")

.data(myData)

.join("text")

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

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

.attr("dy", 20)

.attr("dx", -6)

.text((d) => d);

return svg.node();

}

chart = {

const width = 900;

const height = 300;

const marginTop = 25;

const marginRight = 20;

const marginBottom = 35;

const marginLeft = 40;

const x = d3

.scaleUtc()

.domain(d3.extent(appleStockData, (d) => d.Date))

.nice()

.range([0, width]);

const y = d3

.scaleLinear()

.domain(d3.extent(appleStockData, (d) => d.Close))

.nice()

.range([height, 0]);

const line = d3

.line()

.curve(d3.curveBasis)

.x((d) => x(d.Date))

.y((d) => y(d.Close));

const svg = d3

.create("svg")

.attr("width", width + marginLeft + marginRight)

.attr("height", height + marginTop + marginBottom);

const g = svg

.append("g")

.attr("transform", `translate(${marginLeft}, ${marginTop})`);

g.append("g")

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

.call(d3.axisBottom(x).ticks(width / 80));

g.append("g").call(d3.axisLeft(y));

// DATA

// genero n círculos SVG, uno por cada dato

g.append("g")

.attr("stroke", "steelblue")

.attr("stroke-width", 1)

.attr("fill", "none")

.selectAll("circle")

.data(appleStockData)

.join("circle")

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

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

.attr("r", 1);

// DATUM

// aca solo se genera un solo 'path' y todos los datos sirven para el generador de lineas 'line'

// que quedan dentro del atributo 'd' del 'path'

g.append("g")

.append("path")

.datum(appleStockData)

.attr("d", line)

.style("fill", "none")

.style("stroke", "#000")

.style("stroke-width", 1);

return svg.node();

}

<rect x=100 y=100 width=100 height=100

></rect>

</svg>

// appleStockData.filter((d, i) => i < 20)

// or

appleStockData.slice(0, 20)

{

const width = 890;

const height = 300;

const marginTop = 10;

const marginRight = 20;

const marginBottom = 20;

const marginLeft = 30;

const x = d3

.scaleUtc()

.domain(d3.extent(appleStockData, (d) => d.Date))

.nice()

.range([0, width]);

const bandScale = d3

.scaleBand()

.domain(Array.from(new Set(appleStockData.map((d) => d.Date))))

.range([0, width]);

const y = d3

.scaleLinear()

.domain(d3.extent(appleStockData, (d) => d.Close))

.nice()

.range([height, 0]);

const svg = d3

.create("svg")

.attr("width", width + marginLeft + marginRight)

.attr("height", height + marginTop + marginBottom);

const g = svg

.append("g")

.attr("transform", `translate(${marginLeft}, ${marginTop})`);

g.append("g")

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

.call(d3.axisBottom(x).ticks(width / 80));

g.append("g").call(d3.axisLeft(y));

g.append("g")

.attr("fill", "steelblue")

.selectAll("rect")

.data(appleStockData)

.join("rect")

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

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

.attr("width", bandScale.bandwidth())

.style("opacity", 0.5)

.attr("height", (d) => height - y(d.Close));

return svg.node();

}

populationData

keys = ["<10", "10-19", "20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "≥80"]

stackLayout = d3.stack()

.keys()

{

const width = 900;

const height = 300;

const marginTop = 25;

const marginRight = 20;

const marginBottom = 35;

const marginLeft = 100;

const x = d3.scaleBand()

const y = d3.scaleLinear()

const color = d3.scaleOrdinal()

const svg = d3.create("svg")

.attr("width", width + marginLeft + marginRight)

.attr("height", height + marginTop + marginBottom);

const g = svg.append("g")

.attr("transform", `translate(${marginLeft}, ${marginTop})`);

g.append("g")

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

.call(d3.axisBottom(x))

g.append("g")

.call(d3.axisLeft(y))

g.selectAll(".states");

return svg.node();

}

populationData = await FileAttachment("us-population-state-age.csv").csv({typed: true});

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