Visual Analytics Researcher
function Art1(data, {
marginTop = 30, // the top margin, in pixels
marginRight = 30, // the right margin, in pixels
marginBottom = 30, // the bottom margin, in pixels
marginLeft = 30, // the left margin, in pixels
width = 800, // the outer width of the chart, in pixels
height = 800, // the outer height of the chart, in pixels
} = {}) {
// const line = d3.line()
// // .defined(i => D[i])
// .curve(d3.curveBasis)
// .x(i => xScale(i))
// .y(d => yScale(d));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const innerWidth = width - marginLeft - marginRight;
const innerHeight = height - marginTop - marginBottom;
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("stroke", "#000")
.attr("fill", "#000");
const g = svg.append("g")
.attr("transform", `translate(${marginLeft},${marginTop})`);
g.append("rect")
.attr("fill", "#eee")
.attr("stroke", "#000")
.attr("width", innerWidth)
.attr("height", innerHeight);
let index = 0;
for (let index = 0; index < 360*4; ++index) {
const lineLength = getRandomArbitrary(innerWidth/2 - 120, innerWidth/2 - 10);
const degree = getRandomArbitrary(index*2, (index+1)*2);
g.append("g")
.attr("transform", `rotate(${degree}, ${innerWidth/2}, ${innerHeight/2})`)
// .style("mix-blend-mode", "multiply")
.call(g => g.append("line")
.attr("stroke", "brown")
// .attr("display", "none")
.attr("stroke-opacity", 0.2)
.attr("stroke-dasharray", [2,2])
.attr("x1", innerWidth/2 + 10)
.attr("x2", innerWidth/2 + lineLength - 10)
.attr("y1", innerHeight/2)
.attr("y2", innerHeight/2))
.call(g => g.append("circle")
.attr("cx", innerWidth/2 + lineLength)
.attr("cy", innerHeight/2)
.attr("r", 2)
.attr("fill", "steelblue")
.attr("fill-opacity", 0.3)
.attr("stroke", "none"));
}
return svg.node();
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
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.
