Learn D3: Shapes / Jordan Kanter

Jordan Kanter

Workspace

Public

Edited

Oct 21, 2023

Fork of Learn D3: Shapes

data = FileAttachment("aapl-bollinger.csv").csv({typed: true})

x = d3.scaleUtc()

.domain(d3.extent(data, d => d.date))

.range([margin.left, width - margin.right])

y = d3.scaleLinear()

.domain([0, d3.max(data, d => d.upper)])

.range([height - margin.bottom, margin.top])

{

let path = `M${x(data[0].date)},${y(data[0].close)}`;

for (let i = 1; i < data.length; ++i) {

path += `L${x(data[i].date)},${y(data[i].close)}`;

}

return path;

}

line = d3.line()

.x(d => x(d.date))

.y(d => y(d.close))

line2 = d3.line()

.x(d => x(d.date))

.y(d => y(d.upper))

line3 = d3.line()

.x(d => x(d.date))

.y(d => y(d.lower))

// line4 = d3.line()

// .x(d => x(d.date))

// .y(d => y(d3.mean(y)))

line(data)

line2(data)

htl.html`<svg viewBox="0 0 ${width} ${height}">

${d3.select(htl.svg`<g>`).call(xAxis).node()}

${d3.select(htl.svg`<g>`).call(yAxis).node()}

</svg>`

area = d3.area()

.x(d => x(d.date))

.y0(y(0))

.y1(d => y(d.close))

htl.html`<svg viewBox="0 0 ${width} ${height}">

${d3.select(htl.svg`<g>`).call(xAxis).node()}

${d3.select(htl.svg`<g>`).call(yAxis).node()}

</svg>`

areaBand = d3.area()

.x(d => x(d.date))

.y0(d => y(d.lower))

.y1(d => y(d.upper))

htl.html`<svg viewBox="0 0 ${width} ${height}">

${d3.select(htl.svg`<g>`).call(xAxis).node()}

${d3.select(htl.svg`<g>`).call(yAxis).node()}

</svg>`

lineMiddle = d3.line()

.x(d => x(d.date))

.y(d => y(d.middle))

htl.html`<svg viewBox="0 0 ${width} ${height}">

</g>

${d3.select(htl.svg`<g>`).call(xAxis).node()}

${d3.select(htl.svg`<g>`).call(yAxis).node()}

</svg>`

htl.html`<svg viewBox="0 0 ${width} ${height}">

</g>

${d3.select(htl.svg`<g>`).call(xAxis).node()}

${d3.select(htl.svg`<g>`).call(yAxis).node()}

</svg>`

arc = d3.arc()

.innerRadius(210)

.outerRadius(310)

.startAngle(([startAngle, endAngle]) => startAngle)

.endAngle(([startAngle, endAngle]) => endAngle)

arc([Math.PI / 2, Math.PI]) // from 90° to 180°

htl.html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;">

${Array.from({length: n}, (_, i) => htl.svg`<path stroke="black" fill="${d3.interpolateRainbow(i / n)}" d="${arc([i / n * 2 * Math.PI, (i + 1) / n * 2 * Math.PI])}"></path>`)}

</svg>`

fruits = [

{name: "🍊", count: 21, size: 1},

{name: "🍇", count: 13, size: 0.3},

{name: "🍏", count: 8, size: 1},

{name: "🍌", count: 5, size: 1.4},

{name: "🍐", count: 3, size: 1.1},

{name: "🍋", count: 2, size: 1},

{name: "🍎", count: 1, size: 1},

{name: "🍉", count: 1, size: 3}

]

pieArcData = d3.pie()

.value(d => d.count)

(fruits)

pieArcSizeData = d3.pie()

.value(d => d.size)(fruits)

arcPie = d3.arc()

.innerRadius(210)

.outerRadius(310)

.padRadius(300)

.padAngle(2 / 300)

.cornerRadius(8)

arcPieSize = d3.arc()

.innerRadius(210)

.outerRadius(310)

.padRadius(300)

.padAngle(2 / 300)

.cornerRadius()

htl.html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;" text-anchor="middle" font-family="sans-serif">

${pieArcData.map(d => htl.svg`

<tspan x="0" font-size="12" dy="1.3em">${d.value.toLocaleString("en")}</tspan>

</text>

`)}

</svg>`

htl.html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;" text-anchor="middle" font-family="sans-serif">

${pieArcSizeData.map(d => htl.svg`

<tspan x="0" font-size="12" dy="1.3em">${d.value.toLocaleString("en")}</tspan>

</text>

`)}

</svg>`

xAxis = g => g

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

.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))

yAxis = g => g

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

.call(d3.axisLeft(y).ticks(height / 40))

.call(g => g.select(".domain").remove())

height = 240

margin = ({top: 20, right: 30, bottom: 30, left: 40})

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