{
function createCircleData(paddinLeft = 0, circleData){
return circleData.map(c => {
return {
"cx": c.cx + paddinLeft || 0,
"cy": c.cy || 0,
"r": c.r || 0,
"fill": c.fill || "none",
"stroke": c.stroke || "#555555",
"strokeWidth": c.strokeWidth || 4
}
});
}
const circleData = createCircleData(125, [
{ "cx": 0, "cy": 145, "r": 8, "fill": "#555555" },
{ "cx": 0, "cy": 145, "r": 16, "fill": "none" }
]);
const svgContainer = d3.select(DOM.svg(200, 200))
.style("width", "30%")
.style("height", "auto");
const circleGroup = svgContainer.append("g");
//Add circles to the circleGroup
// const circles = circleGroup.selectAll("circle")
// .data(circleData)
// .enter()
// .append("circle");
// const circleAttributes = circles
// .attr("cx", d => d.cx)
// .attr("cy", d => d.cy)
// .attr("r", d => d.r)
// .attr("stroke", d => d.stroke)
// .style("stroke-width", d => d.strokeWidth)
// .style("fill", d => d.fill);
// * Note * that the rectangles are added to the svgContainer, not the circleGroup
function createline(l){
return {
"x1": l.x1 || 0,
"x2": l.x2 || 0,
"y1": l.y1 || 0,
"y2": l.y2 || 0,
"stroke": l.stroke || "#555555",
"strokeWidth": l.strokeWidth || 4
}
}
// const lineData = createlineData([
// { "x1": 125, "x2": 125, "y1": 145, "y2": 45 },
// { "x1": 125, "x2": 165, "y1": 45, "y2": 6 },
// { "x1": 125, "x2": 165, "y1": 61, "y2": 21 },
// { "x1": 125, "x2": 145, "y1": 76, "y2": 56 },
// ]);
addLinesToSvg(svgContainer);
function addLinesToSvg(container, baseheight = 100){
const paddingLeft = 100;
const paddingTop = 5;
const width = 40;
const numberFlippers = 5;
const hasHalfFlippers = true;
const data = [];
const base = createline({ "x1": paddingLeft, "x2": paddingLeft,
"y1": baseheight + width + paddingTop, "y2": width + paddingTop });
data.push(base);
let fliPadding = paddingTop;
for(let i = 0; i < numberFlippers; i++){
let flipper = createline({ "x1": paddingLeft, "x2": paddingLeft + width,
"y1": width + fliPadding, "y2": fliPadding });
fliPadding = fliPadding + 15;
data.push(flipper);
}
if(hasHalfFlippers){
fliPadding = numberFlippers === 0 ? paddingTop + 15 : fliPadding;
let flipper = createline({ "x1": paddingLeft, "x2": paddingLeft + width/2,
"y1": width + fliPadding, "y2": fliPadding + width/2 });
data.push(flipper);
}
container.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", d => d.x1)
.attr("x2", d => d.x2)
.attr("y1", d => d.y1)
.attr("y2", d => d.y2)
.attr("stroke", d => d.stroke)
.style("stroke-width", d => d.strokeWidth);
}
return svgContainer.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.
