Public
Edited
Sep 5, 2023
{
const width = 1100
const height = 300
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
.attr("transform", "translate(" + (100) + "," + (0) + ")")
const lineGenerator = d3.line()
.curve(d3.curveCardinal);
let mypoints = [[0, 100],
[30, 190],
[0, 220],
[-30, 190],
[0, 100]];
let pathData = lineGenerator(mypoints);
group
.append('path')
.attr('d', pathData)
.style("opacity", .8)
.style("fill", "gold")
.style("stroke", "grey")
for (let k = 0; k < 50; k++){
const rnd = Math.random()
const mag = 40
let myline = [[100, 0],
[150, 50 + mag*rnd],
[300, 80 + mag*rnd],
[450, 20 + mag*rnd],
[600, 100 + mag*rnd],
[750, 70 + mag*rnd]
];
let pathData2 = lineGenerator(myline);
group
.append('path')
.attr('d', pathData2)
.style("opacity", .5)
.style("fill", "none")
.style("stroke", "goldenrod")
}
for (let k = 0; k < 80; k++){
const rnd = Math.random()
const mag = 80
let myline = [[100, 100],
[150, 150 + mag*rnd],
[300, 180+ mag*rnd],
[450, 120+ mag*rnd],
[600, 200+ mag*rnd],
[750, 170+ mag*rnd]
];
let pathData2 = lineGenerator(myline);
group
.append('path')
.attr('d', pathData2)
.style("opacity", .5)
.style("fill", "none")
.style("stroke", "orange")
.style("stroke-width", 1)
}
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.
