東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
{
const svg = d3
.create("svg")
.attr("width", 50)
.attr("height", 50)
.attr("viewBox", [0, 0, 50, 50]);
svg
.append("circle")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 20)
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", 2);
return svg.node();
}
{
const width = 50;
const height = 50;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
svg
.append("circle")
.attr("cx", width / 2) // 変数widthを利用して座標をもとめる
.attr("cy", height / 2) // 変数heightを利用して座標をもとめる
.attr("r", 20)
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", 2);
return svg.node();
}
dataset = [5, 25, 45, 65, 85]
chart = {
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * 50)
.attr("y", 0)
.attr("width", 40)
.attr("height", (d) => d);
return svg.node();
}
chart_with_color = {
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * 50)
.attr("y", 0)
.attr("width", 40)
.attr("height", (d) => d)
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", (d) => d / 4)
.attr("stroke-opacity", 0.5);
return svg.node();
}
{
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d)
.attr("width", 40)
.attr("height", (d) => d);
return svg.node();
}
{
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
// 背景
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#004");
const rects = svg
.selectAll("rect.bar")
.data(dataset)
.join("rect")
.attr("class", "bar");
rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d)
.attr("width", 40)
.attr("height", (d) => d)
.attr("fill", "#8cc");
return svg.node();
}
{
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
// 背景
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#004");
const rects = svg.append("g").selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d)
.attr("width", 40)
.attr("height", (d) => d)
.attr("fill", "#8cc");
return svg.node();
}
{
const dataset = [
5, 25, 45, 65, 85, 105, 125, 145, 165, 185, 205, 225, 245, 265, 285, 305
];
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d)
.attr("width", 40)
.attr("height", (d) => d)
.attr("fill", "#800");
return svg.node();
}
{
const dataset = d3.range(100); // [0, 1, 2, ... 99]
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const barPadding = 1; // barの間隔を指定
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - d)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => d)
.attr("fill", "#800");
return svg.node();
}
{
const dataset = d3.range(10, 110, 10); // [10, 20, ... 100]
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const barPadding = 1; // barの間隔を指定
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - (d / d3.max(dataset)) * height)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => (d / d3.max(dataset)) * height)
.attr("fill", "#800")
.on("mouseenter", function (event) {
d3.select(this).attr("fill", "yellow");
})
.on("mouseleave", function (event) {
d3.select(this).attr("fill", "#800");
});
return svg.node();
}
barChart = (dataset) => {
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const barPadding = 1; // barの間隔を指定
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - (d / d3.max(dataset)) * height)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => (d / d3.max(dataset)) * height)
.attr("fill", "#800")
.on("mouseenter", function (event) {
d3.select(this).attr("fill", "yellow");
})
.on("mouseleave", function (event) {
d3.select(this).attr("fill", "#800");
});
return svg.node();
}
barChart([50, 100, 75])
barChart([1, 1, 1, 3, 35, 6, 6, 76, 7, 99, 31, 32, 18, 19, 2, 4])
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.
