東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
width = 800
height = 300
svg = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#eee");
const g = svg.append("g").attr("transform", "translate(400, 100)");
g.append("rect").attr("width", 80).attr("height", 80).attr("fill", "#f88");
g.append("rect")
.attr("x", 80)
.attr("width", 80)
.attr("height", 80)
.attr("fill", "#8f8");
g.append("rect")
.attr("x", 160)
.attr("width", 80)
.attr("height", 80)
.attr("fill", "#88f");
g.append("text")
.attr("y", 40)
.text("テキストもかけるよ！")
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("font-size", 28);
svg
.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 80)
.attr("fill", "#fff")
.attr("stroke", "#008")
.attr("stroke-width", 10);
svg
.append("circle")
.attr("cx", 180)
.attr("cy", 100)
.attr("r", 80)
.attr("fill", "#fff")
.attr("stroke", "#080")
.attr("stroke-width", 10)
.attr("opacity", 0.5);
svg
.append("line")
.attr("x1", 100)
.attr("y1", 180)
.attr("x2", 100)
.attr("y2", 280)
.attr("stroke", "#008")
.attr("stroke-width", 10);
return svg.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.
