Whatever I'm making is probably related to the weather somehow
Published
Edited
Apr 28, 2021
2 forks
4 stars
clouds = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#292929");
const allClouds = svg.selectAll("ellipse").data(cloudData);
allClouds.enter().append("ellipse")
.attr("cx", function(d) {
return (Math.floor(random() * width));
})
.attr("cy", function(d,i) {
return (Math.floor(random() * height));
})
.attr("rx", "150")
.attr("ry", "50")
.attr("class", "cloud")
.style("fill", d => d.color);
return svg.node();
}
html`
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute;">
<filter id="filter" height="300%" width="300%" y="-100%" x="-100%" >
<feTurbulence type="fractalNoise" seed="462" baseFrequency="0.011" numOctaves="5" result="noise1" />
<feGaussianBlur in="SourceGraphic" stdDeviation="23" />
<feDisplacementMap scale="140" in2="noise1" result="cloud1" />
</filter>
</svg>
<style>
.cloud {
filter: url(#filter)
}
</style>
`
random = d3.randomLcg(seed);
cloudData = {
let data = [];
for (let i=0; i<10; i++) {
data.push({
color:cloudColors(random())
})
}
return data;
}
cloudColors = {
return d3.scaleLinear().domain([0, 1])
.range([
"#ffffff",
"#bfbfbf"
]);
}
height = 500
import {Button} from "@observablehq/inputs"
d3 = require("d3@6")
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.
