Introduction to D3 Course: Lesson 3 / Adebiyi's

Adebiyi's

I came for the knowledge of creating charts for dashboards, but I stayed for the beauty of this craft.

Workspace

Public

Edited

Sep 27, 2023

Fork of Introduction to D3 Course: Lesson 3

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

style="stroke: #fff; fill: #f00">

</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").data();

}

chart = {

const width = 500;

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

return svg.node();

}

</svg>

{

const width = 500;

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

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