'<path d="M 400,0 Q250,100 400,200 Q550,300 400,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />'
`<path d="M 400,0 L250,100 400,200 L550,300 400,400" fill="none" stroke="magenta" stroke-width="2" opacity="1" stroke-dasharray="4 8"/>`
<svg viewBox="0,0,800,400" >
<path d="M 400,0 Q250,100 400,200 Q550,300 400,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 400,0 L250,100 400,200 L550,300 400,400" fill="none" stroke="magenta" stroke-width="2" opacity="1" stroke-dasharray="4 8"/><circle cx="400" cy="0" r="8" stroke="red" fill="none" stroke-width="4" />
<circle cx="250" cy="100" r="8" stroke="orange" fill="none" stroke-width="4" />
<circle cx="400" cy="200" r="8" stroke="yellow" fill="none" stroke-width="4" />
<circle cx="550" cy="300" r="8" stroke="lime" fill="none" stroke-width="4" />
<circle cx="400" cy="400" r="8" stroke="cyan" fill="none" stroke-width="4" />
</svg>
<svg viewBox="0,0,1200,400" >
<path d="M 0,0 Q-150,100 0,200 Q150,300 0,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 50,0 Q-100,100 50,200 Q200,300 50,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 100,0 Q-50,100 100,200 Q250,300 100,400" fill="none" stroke="black" stroke-width="20" opacity="0.8" />
<path d="M 150,0 Q0,100 150,200 Q300,300 150,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 200,0 Q50,100 200,200 Q350,300 200,400" fill="none" stroke="gold" stroke-width="20" opacity="0.8" />
<path d="M 250,0 Q100,100 250,200 Q400,300 250,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 300,0 Q150,100 300,200 Q450,300 300,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 350,0 Q200,100 350,200 Q500,300 350,400" fill="none" stroke="black" stroke-width="20" opacity="0.8" />
<path d="M 400,0 Q250,100 400,200 Q550,300 400,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 450,0 Q300,100 450,200 Q600,300 450,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 500,0 Q350,100 500,200 Q650,300 500,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 550,0 Q400,100 550,200 Q700,300 550,400" fill="none" stroke="gold" stroke-width="20" opacity="0.8" />
<path d="M 600,0 Q450,100 600,200 Q750,300 600,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 650,0 Q500,100 650,200 Q800,300 650,400" fill="none" stroke="gold" stroke-width="20" opacity="0.8" />
<path d="M 700,0 Q550,100 700,200 Q850,300 700,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 750,0 Q600,100 750,200 Q900,300 750,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 800,0 Q650,100 800,200 Q950,300 800,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 850,0 Q700,100 850,200 Q1000,300 850,400" fill="none" stroke="black" stroke-width="20" opacity="0.8" />
<path d="M 900,0 Q750,100 900,200 Q1050,300 900,400" fill="none" stroke="black" stroke-width="20" opacity="0.8" />
<path d="M 950,0 Q800,100 950,200 Q1100,300 950,400" fill="none" stroke="gold" stroke-width="20" opacity="0.8" />
<path d="M 1000,0 Q850,100 1000,200 Q1150,300 1000,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
<path d="M 1050,0 Q900,100 1050,200 Q1200,300 1050,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 1100,0 Q950,100 1100,200 Q1250,300 1100,400" fill="none" stroke="red" stroke-width="20" opacity="0.8" />
<path d="M 1150,0 Q1000,100 1150,200 Q1300,300 1150,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />
</svg>
{
//svg variables
const height = 500;
//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//visualization variables
const spacing = 20;
const strokeMinimum = 1;
const strokeVariation = 100;
const curvinessMinimum = 10;
const curvinessVariation = 300;
//list of random colors to choose from
const colors = [
"red",
"blue",
"gold",
"black",
"black",
"black",
"beige",
"white"
];
//loop to make each path
for (let i = 0; i < width; i = i + spacing) {
//create random settings for each path
const curviness = Math.random() * curvinessVariation + curvinessMinimum;
const strokeThickness = Math.random() * strokeVariation + strokeMinimum;
//get random color from array
//Math.random() gives random number between 0 and 1
//(Math.random() * colors.length) will give a random number between 0 and the number of items in an array
//Math.floor() rounds decimal numbers down https://www.w3schools.com/Jsref/jsref_floor.asp
//We round down with Math.floor(), because arrays start at index 0
const randomIndex = Math.floor(Math.random() * colors.length);
//get random color from color array
const randomColorFromArray = colors[randomIndex];
//build s-shaped path
const curvyPath =
"M " +
i +
",0 Q" +
(i - curviness) +
"," +
height * 0.25 +
" " +
i +
"," +
height * 0.5 +
"Q " +
(i + curviness) +
"," +
height * 0.75 +
" " +
i +
"," +
height;
//draw path
svg
.append("path")
.attr("d", curvyPath)
.attr("fill", "none")
.attr("stroke", randomColorFromArray)
.attr("stroke-width", strokeThickness)
.attr("opacity", 0.8)
.attr("stroke-linecap", "round")
//https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap
.attr("stroke-miterlimit", 100);
//https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit
}
//show visualization in Observable
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.