Published
Edited
May 14, 2019
md`# 七宝 刺し子`
one = {
let svgmargin = {top: shapeSize/1.5, right: shapeSize/2, bottom: shapeSize/2, left: shapeSize/2},
svgwidth = width - svgmargin.left - svgmargin.right,
height = (shapeSize * rows) + margin * (rows +1) + svgmargin.top + svgmargin.bottom;
const svg = DOM.svg(svgwidth, height-(shapeSize*2))
let colorscale = d3.scaleOrdinal(colors);
let revcolors = d3.scaleOrdinal(colors.slice(0).reverse());
// d3.select(svg)
// .append("g")
// .attr("transform", "translate(" + svgmargin.left + "," + svgmargin.top + ")")
// .selectAll("path")
// .data(shapePos)
// .enter().append("path")
// .attr("d", shape => `M ${shape.p1x} ${shape.p1y}, ${shape.p2x} ${shape.p2y}, ${shape.p3x} ${shape.p3y} Z`)
// .attr("stroke", (d,i) => colorscale(i))
// .attr("fill", (d,i) => colorscale(i))
d3.select(svg).append("defs").append("clipPath").attr("id","rectMask").append("rect").attr("x",0).attr("y",0).attr("width",svgwidth).attr("height",height-(shapeSize*2));
d3.select(svg)
.append("g")
.attr("clip-path", "url(#rectMask)")
.selectAll("circle")
.data(shapePos)
.enter().append("circle")
.attr("r", shape => shapeSize)
.attr("cx", shape => `${shape.p1x}`)
.attr("cy", shape => `${shape.p1y}`)
.attr("stroke", (d,i) => colorscale(i))
.attr("fill", (d,i) => "none")
.attr("stroke-dasharray", 6)
// <circle class="construction" cx="200" cy="200" r="150" />
return svg
}
svgHeight = (shapeSize * rows) + margin * (rows +1)
shapeSize = (width - ((columns +1)* margin)*4)/columns
colors = ["#b89214",
"#1b4a28",
"#3782f7",
"#0a0a0a",
"#fcfafd",
"#ed2611",
"#4a240c",
"#2d73e5",
"#f5a4b3",
"#dccd1d"
]
d3 = require("d3@5")
import {slider} from "@jashkenas/inputs"
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.
