東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
Public
Edited
Jan 22
1 star
{
const height = 50;
const radius = height / 2;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const circle = svg.append("circle").attr("cy", radius).attr("r", radius);
while (true) {
const x = ((Math.sin(now / 1000) + 1) / 2) * (width - 2 * radius) + radius;
circle.attr("cx", x);
yield svg.node();
}
}
shuffledData = d3.shuffle(d3.range(40, 200, 10)) // [40, 50, .... 190]のシャッフル
viewof t = Inputs.range()
{
const chart = lineChart(randomData);
const length = d3
.select(chart)
.select(".line")
.select("path")
.node()
.getTotalLength();
d3.select(chart)
.select(".line")
.attr("stroke-dasharray", [length * t, length]);
return chart;
}
import { Scrubber } from "@mbostock/scrubber"
viewof t2 = Scrubber(d3.ticks(0, 1, 100), {
autoplay: false,
loop: false,
initial: 0,
delay: 1000 / 30, // 30 fps
format: (x) => `t = ${x.toFixed(2)}`
})
{
const chart = lineChart(randomData);
const length = d3
.select(chart)
.select(".line")
.select("path")
.node()
.getTotalLength();
d3.select(chart)
.select(".line")
.attr("stroke-dasharray", [length * t2, length]);
return chart;
}
lineChart = (data) =>
Plot.plot({
width: 1920,
height: 1080,
style: {
background: "#ffe"
},
marks: [
Plot.lineY(data, {
className: "line",
x: "x",
y: "y",
stroke: "#000",
strokeWidth: width * 0.005,
strokeDasharray: [100, 10]
})
]
})
productionChart = {
const plot = Plot.plot({
width: 1920,
height: 1080,
marginTop: 200,
marginRight: 100,
marginBottom: 200,
marginLeft: 200,
style: {
fontSize: 40,
fontWeight: "bold"
},
x: {
label: null
},
y: {
label: null
},
marks: [
Plot.barX(productions.slice(1, 11), {
className: "bar",
x: "count",
y: "location",
fill: "#66c",
sort: { y: "-x" }
}),
Plot.textX(productions.slice(1, 11), {
className: "label",
x: "count",
y: "location",
dx: -10,
fill: "#fff",
textAnchor: "end",
text: "count",
sort: { y: "-x" }
})
]
});
d3.select(plot).selectAll("text").attr("font-size", 40);
return plot;
}
{
const div = d3.create("div").style("background-color", "#eef");
div.node().appendChild(productionChart.cloneNode(true));
div
.append("h1")
.text("アニメ制作会社の分布（東京都を除く）")
.style("position", "absolute")
.style("top", "1em")
.style("left", "1em");
div
.append("div")
.text("データ：一般財団法人日本動画協会")
.style("position", "absolute")
.style("bottom", "1em")
.style("right", "1em");
return div.node();
}
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.
