東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
Published
Edited
Nov 28, 2021
1 fork
Importers
1 star
chart = {
const width = 400;
const height = 400;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const gridData = d3.range(9);
const x = d3.scaleLinear().domain(d3.extent(gridData)).range([0, width]);
const y = d3.scaleLinear().domain(d3.extent(gridData)).range([0, height]);
const gridG = svg
.append("g")
.attr("stroke", "#000")
.attr("stroke-dasharray", "4,4")
.attr("stroke-opacity", 0.2);
gridG
.selectAll("line.x")
.data(gridData)
.join("line")
.classed("x", true)
.attr("x1", 0)
.attr("y1", y)
.attr("x2", width)
.attr("y2", y);
gridG
.selectAll("line.y")
.data(gridData)
.join("line")
.classed("y", true)
.attr("x1", x)
.attr("y1", 0)
.attr("x2", x)
.attr("y2", height);
const g = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
// clone svg
const clonedExternalSvg = d3.select(externalSvg).clone(true);
// remove svg's attributes
clonedExternalSvg.attr("viewBox", null);
clonedExternalSvg.attr("width", null);
clonedExternalSvg.attr("height", null);
// append cloned svg node
g.node().appendChild(clonedExternalSvg.node());
// clone svg
const clonedFourSvg = d3.select(fourSVG).clone(true);
// remove svg's attributes
clonedFourSvg.attr("viewBox", null);
clonedFourSvg.attr("width", null);
clonedFourSvg.attr("height", null);
// append cloned svg node
g.node().appendChild(clonedFourSvg.node());
// call function
svg.append("g").call(appendSVG, externalSvg);
svg.append("g").call(appendSVG, fourSVG);
return svg.node();
}
appendSVG = (selection, svg) => {
// clone svg
const clonedSvg = d3.select(svg).clone(true);
// remove svg's attributes
clonedSvg.attr("viewBox", null);
clonedSvg.attr("width", null);
clonedSvg.attr("height", null);
// append cloned svg node
selection.node().appendChild(clonedSvg.node());
}
fourSVG = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 3" height="5" style="enable-background:new 0 0 71 3" xml:space="preserve"><path style="fill:none;stroke:#e95397;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:14,4" d="M1.5 1.5h68"/></svg>`
externalSvg = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.66 57.69" width=20><defs><style>.cls-1{fill:#fff;stroke:#231815;stroke-miterlimit:10;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="レイヤー_1-2" data-name="レイヤー 1"><path class="cls-1" d="M8,57.19H30.71A74.43,74.43,0,0,0,28.63,1.34L28.25.5H5.57"/><path class="cls-1" d="M27.63.5H5A74.38,74.38,0,0,0,7,56.35l.38.84H30.09"/><circle class="cls-1" cx="6.24" cy="28.85" r="5.74"/><circle class="cls-1" cx="29.43" cy="28.85" r="5.74"/></g></g></svg>`
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.
