Introduction to D3 Course: Lesson 3 / TRSS

TRSS

Workspace

Public

Introduction to D3 Course by Paul Buffa

Edited

Mar 27

Fork of Introduction to D3 Course: Lesson 3

<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, 20]

{

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(keys)(populationData)

{

const width = 800;

const height = 300;

const marginTop = 25;

const marginRight = 20;

const marginBottom = 35;

const marginLeft = 100;

const x = d3.scaleLinear([0, populationData.length - 1], [0, width]);

const y = d3

.scaleLinear()

.domain([0, d3.max(stackLayout, (d) => d3.max(d, (d) => d[1]))])

.range([height, 0]);

const color = d3

.scaleOrdinal()

.domain(keys)

.range([

"pink",

"red",

"orange",

"yellow",

"green",

"blue",

"indigo",

"violet",

"black"

]);

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(

.axisBottom(x)

.tickFormat((x) => populationData[x].name)

// http://www.d3noob.org/2016/08/changing-number-of-ticks-on-axis-in.html

.ticks(populationData.length)

)

// http://www.d3noob.org/2016/08/rotating-text-labels-for-graph-axis-in.html

.selectAll("text")

.style("text-anchor", "end")

.attr("dx", "-.8em")

.attr("dy", ".15em")

.attr("transform", "rotate(-65)");

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

const areaGen = d3

.area()

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

.y0((d) => y(d[0]))

.y1((d) => y(d[1]));

g.selectAll(".states")

.data(stackLayout)

.join("path")

.attr("d", areaGen)

.attr("fill", (d) => color(d.key));

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