学习D3.js / MiaTakeshi

MiaTakeshi

这个账号不是用来看黄片儿的吗？

Workspace

Published

Edited

Apr 7, 2020

values = FileAttachment("values-.json").json();

d3 = require("d3@5", "d3-delaunay@5")

[d3.min(values), d3.median(values), d3.max(values)]

import {chart as chart1} with {values as data} from "@d3/histogram"

chart1

height=200

import {chart as chart2} with {values as data, height} from "@d3/histogram"

chart2

values3 = Float64Array.from({length: 2000}, d3.randomNormal(mu, 2))

x = d3.scaleLinear([-10, 10], [margin.left, width - margin.right])

import {chart as chart3, margin, width} with {x, values3 as data, height} from "@d3/histogram"

chart3

FileAttachment("temperature.csv")

FileAttachment("temperature.csv").text()

d3.csvParse(await FileAttachment("temperature.csv").text())

d3.csvParse(await FileAttachment("temperature.csv").text(), d3.autoType)

data = {

const text = await FileAttachment("temperature.csv").text();

const parseDate = d3.utcParse("%Y-%m-%d");

return d3.csvParse(text, ({date, temperature}) => ({

date: parseDate(date),

temperature: +temperature,

}));

}

md`计算数据的范围`

d3.extent(data, ({ date }) => date)

d3.extent(data, ({ temperature }) => temperature)

temperatures = data.map(({ temperature }) => temperature)

import {chart as temperatureHistogram} with {temperatures as data, height} from "@d3/histogram"

temperatureHistogram

fruits = [

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

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

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

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

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

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

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

{name: "🍉", count: 1}

]

fruits_x = d3.scaleLinear()

.domain([0, d3.max(fruits, ({ count }) => count)])

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

.interpolate(d3.interpolateRound)

fruits_y = d3.scaleBand()

.domain(fruits.map(({ name }) => name))

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

.padding(0.1)

.round(true)

fruits_x.domain()

fruits_x.range()

fruits_y.domain()

fruits_y.range()

fruits_y.bandwidth()

html`

${d3.select(svg`<g transform="translate(0,${margin.top})">`)

.call(d3.axisTop(fruits_x))

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

.node()}

${d3.select(svg`<g transform="translate(${margin.left},0)">`)

.call(d3.axisLeft(fruits_y))

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

.node()}

${fruits.map(({name, count}) => svg`

<rect

y="${fruits_y(name)}"

x="${fruits_x(0)}"

width="${fruits_x(count) - fruits_x(0)}"

height="${fruits_y.bandwidth()}"

</rect>

)}

</g>

${fruits.map(({name, count}) => svg`

${count}

</text>

`)}

</g>

</svg>

color = d3.scaleSequential()

.domain([0, d3.max(fruits, ({ count }) => count)])

.interpolator(d3.interpolateBlues)

html`

${d3.select(svg`<g transform="translate(0,${margin.top})">`)

.call(d3.axisTop(fruits_x))

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

.node()}

${d3.select(svg`<g transform="translate(${margin.left},0)">`)

.call(d3.axisLeft(fruits_y))

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

.node()}

${fruits.map(({name, count}) => svg`

<rect

y="${fruits_y(name)}"

x="${fruits_x(0)}"

width="${fruits_x(count) - fruits_x(0)}"

height="${fruits_y.bandwidth()}"

fill="${color(count)}"

</rect>

)}

</g>

${fruits.map(({name, count}) => svg`

${count}

</text>

`)}

</g>

</svg>

md`## 形状`

shape_data = d3.csvParse(await FileAttachment("aapl-bollinger.csv").text(), d3.autoType)

shape_x = d3.scaleUtc()

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

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

shape_y = d3.scaleLinear()

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

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

{

let path = `M${shape_x(shape_data[0].date)},${shape_y(shape_data[0].close)}`;

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

path += `L${shape_x(shape_data[i].date)},${shape_y(shape_data[i].close)}`;

}

return path;

}

line = d3.line()

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

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

line(shape_data)

shape_xAxis = g => g

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

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

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

shape_yAxis = g => g

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

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

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

html`

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

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

<path

d="${line(shape_data)}"

fill="none"

stroke="steelblue"

stroke-width="1.5"

stroke-miterlimit="1"

</path>

</svg>

shape_area = d3.area()

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

.y0(shape_y(0))

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

html`

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

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

</path>

</svg>

shape_band = d3.area()

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

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

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

html`

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

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

</path>

</svg>

shape_middle = d3.line()

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

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

html`

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

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

</path>

</g>

</svg>

html`

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

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

</path>

</g>

</svg>

arc = d3.arc()

.innerRadius(210)

.outerRadius(310)

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

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

arc([Math.PI / 2, Math.PI])

viewof n = {

const form = html`

n = <output name="output"></output>

</label>

</form>

form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;

form.oninput();

return form;

}

html`

${Array.from({ length: n }, (_, i) =>

svg`<path stroke="black"

fill="${d3.interpolateRainbow(i/n)}"

d="${arc([i/n*2*Math.PI, (i+1)/n*2*Math.PI])}"

></path>`

)}

</svg>

pieArcData = d3.pie()

.value(d => d.count)

(fruits)

arcPie = d3.arc()

.innerRadius(210)

.outerRadius(310)

.padRadius(300)

.padAngle(2 / 300)

.cornerRadius(8)

html`

${pieArcData.map(d => svg`

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

</text>

`)}

</svg>

md`## 动画`

reveal = path => path.transition()

.duration(5000)

.ease(d3.easeLinear)

.attrTween("stroke-dasharray", function() {

const length = this.getTotalLength();

return d3.interpolate(`0,${length}`, `${length},${length}`);

})

viewof replay = html`<button>Replay</button>`

replay, html`

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

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

${d3.select(svg`

<path

d="${line(shape_data)}"

fill="none"

stroke="steelblue"

stroke-width="1.5"

stroke-miterlimit="1"

stroke-dasharray="0,1"

</path>

`).call(reveal).node()}

</svg>

html`

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

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

<path

d="${line(shape_data)}"

fill="none"

stroke="steelblue"

stroke-width="1.5"

stroke-miterlimit="1"

stroke-dasharray="${lineLength * t},${lineLength}"

</path>

</svg>

lineLength = svg`<path d="${line(shape_data)}">`.getTotalLength();

{

replay2;

const path = svg`

<path

d="${line(shape_data)}"

fill="none"

stroke="steelblue"

stroke-width="1.5"

stroke-miterlimit="1"

</path>

const chart = svg`

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

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

${path}

</svg>

for(let i = 0, n = 300; i < n; ++i) {

const t = (i+1)/n;

path.setAttribute("stroke-dasharray", `${t*lineLength},${lineLength}`);

yield chart;

}

chart4 = {

const svg = d3.create("svg")

.attr("viewBox", [0,0, width, height]);

const zx = shape_x.copy();

const line = d3.line()

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

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

const path = svg.append("path")

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-miterlimit", 1)

.attr("d", line(shape_data));

const gx = svg.append("g")

.call(shape_xAxis, zx);

const gy = svg.append("g")

.call(shape_yAxis, shape_y);

return Object.assign(svg.node(), {

update(domain) {

const t = svg.transition().duration(750);

zx.domain(domain);

gx.transition(t).call(shape_xAxis, zx);

path.transition(t).attr("d", line(shape_data))

}

})

}

chart4.update(timeframe)

alphabet = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"]

chart5 = {

const svg = d3.create("svg")

.attr("viewBox", [0,0,width, 33])

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.attr("display", "block");

svg.selectAll("text")

.data(alphabet)

.join("text")

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

.attr("y", 17)

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

.text(d => d);

return svg.node()

}

randomLetters = {

while (true) {

yield d3.shuffle(alphabet.slice())

.slice(Math.floor(Math.random() * 10) + 5)

.sort(d3.ascending);

await Promises.delay(3000);

}

chart6 = {

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, 33])

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.style("display", "block");

let text = svg.selectAll("text");

return Object.assign(svg.node(), {

update(letters) {

const t = svg.transition().duration(750);

text = text

.data(letters, d => d)

.join(

enter => enter.append("text")

.attr("y", -7)

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

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

.text(d => d),

update => update,

exit => exit

.call(text => text.transition(t).remove()

.attr("y", 41))

)

.call(text => text.transition(t)

.attr("y", 17)

.attr("x", (d, i) => i * 17));

}

});

}

chart6.update(randomLetters)

voronoi = d3.Delaunay

.from(shape_data, d => shape_x(d.date), d => shape_y(d.close))

.voronoi([0,0,width, height])

html`

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

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

<path

d="${line(shape_data)}"

fill="none"

stroke="steelblue"

stroke-width="1.5"

stroke-miterlimit="1"

</path>

${shape_data.map((d, i) => svg`

<title>${d.date} - ${d.close}</title>

</path>

`)}

</g>

</svg>

{

const tooltip = new Tooltip()

}

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