Introduction to D3 Course: Lesson 3 / Observable

Observable

The end-to-end solution for building and hosting better data apps, dashboards, and reports.

Workspace

Public

Introduction to D3 Course

Edited

Sep 27, 2023

74 forks

8 stars

Introduction to D3 Course

Introduction to D3: Course Assignment Lesson 5 Lesson 4

Lesson 3

Lesson 2 Lesson 1 Introduction to D3 Course

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

style="stroke: #000">

</path>

</svg>

<path d='M 150, 0 L 300, 200 L 0, 200 Z'

style="fill: steelblue;">

</path>

</svg>

myData = [0, 10, 5, 30]

{

const width = 500;

const height = 100;

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}`);

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.curveStep)

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

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

g.append("path")

.datum(myData)

.attr("d", line)

.style("stroke", "steelblue")

.style("stroke-width", 10)

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

g.selectAll(".line")

.data([myData])

.join("path")

.attr("d", line)

.attr("class", "line")

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

.style("stroke-width", 1)

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

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

g.append("g")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("fill", "none")

.selectAll("circle")

.data(appleStockData)

.join("circle")

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

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

.attr("r", 2);

g.append("g")

.append("path")

.datum(appleStockData)

.attr("d", line)

.style("fill", "none")

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

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

return svg.node();

}

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

></rect>

</svg>

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

{

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 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) => x(d.Date))

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

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

.style("opacity", 0.5)

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

g.append("g")

.attr("fill", "#000")

.selectAll("circle")

.data(appleStockData)

.join("circle")

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

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

.attr("r", 2);

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});

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more