Public
Edited
Apr 19, 2023
Insert cell
Insert cell
<svg width="1000" height="300">
<path d="M 20,200 C 30,0 500,0 700,200" style="fill: none; stroke: url(#myGradient); stroke-width: 3"></path>
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue"/>
<stop offset="55%" stop-color="blue"/>
<stop offset="55%" stop-color="cyan"/>
<stop offset="100%" stop-color="cyan"/>
</linearGradient>
</defs>
</svg>
Insert cell
Insert cell
Insert cell
<svg width="1000" height="100">
<rect x="20" y="20" width="700" height="60" style="fill: url(#myGradient2"></rect>
<defs>
<linearGradient id="myGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue"/>
<stop offset="100%" stop-color="cyan"/>
</linearGradient>
</defs>
</svg>
Insert cell
Insert cell
Insert cell
Insert cell
path = d3.select(svg).selectAll("path")
Insert cell
startX = 20
Insert cell
endX = 700
Insert cell
totalLength = path.node().getTotalLength()
Insert cell
lengthAtPercent = percent/100 * totalLength
Insert cell
pointAtLength = path.node().getPointAtLength(lengthAtPercent)
Insert cell
xAtPercent = pointAtLength.x
Insert cell
xDistanceAtPercent = xAtPercent - startX
Insert cell
pathTotalWidth = endX - startX
Insert cell
gradientStop = xDistanceAtPercent/pathTotalWidth * 100
Insert cell
d3.select(svg2).select("#firstStop").attr("offset", gradientStop + "%")
Insert cell
d3.select(svg2).select("#secondStart").attr("offset", gradientStop + "%")
Insert cell
Insert cell
<svg width="1000" height="300">
<path d="M ${startX},200 C 30,0 500,0 ${endX},200" style="fill: none; stroke: url(#linear1); stroke-width: 3"></path>
<defs>
<linearGradient id="linear1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue"/>
<stop offset="${gradientStop}%" stop-color="blue"/>
<stop offset="${gradientStop}%" stop-color="cyan"/>
<stop offset="100%" stop-color="cyan"/>
</linearGradient>
</defs>
</svg>
Insert cell
d3.select(svg2).selectAll(".markline")
.data(d3.range(startX,endX+1,pathTotalWidth/10))
.join("line")
.attr("x1", d=>d)
.attr("x2", d=>d)
.attr("y1", 200)
.attr("y2", 20)
.style("stroke","#eee")
.classed("markline",true)
Insert cell
d3.select(svg2).append("circle")
.attr("cx", pointAtLength.x)
.attr("cy", pointAtLength.y)
.attr("r", 3)
Insert cell
Insert cell
Insert cell
<svg width="1000" height="300">
<path d="M ${startX},200 A 600 600 0 0 1 ${endX},200" style="fill: none; stroke: url(#linear2); stroke-width: 3"></path>
<defs>
<linearGradient id="linear2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue"/>
<stop offset="${gradientStop}%" stop-color="blue"/>
<stop offset="${gradientStop}%" stop-color="cyan"/>
<stop offset="100%" stop-color="cyan"/>
</linearGradient>
</defs>
</svg>
Insert cell
Insert cell
Insert cell
Insert cell
d3.select(gdmockup).selectAll("g.person")
.data(gdmockdata)
.join("g")
.each((d,i,nodes) => {
let g = d3.select(nodes[i]);
let ageDeathPercent = Math.round(d.ageDeath / d.ageProjected * 100);
//let offlinehackPercent = Math.round(d.offlinehack) / d.onlinehack * 100);
let gradient = g.append("defs").append("linearGradient");
gradient.attr("id", "g" + i);
gradient.attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%");
gradient.append("stop").attr("offset","0%").attr("stop-color",color1);
gradient.append("stop").attr("offset",ageDeathPercent + "%").attr("stop-color",color1);
gradient.append("stop").attr("offset",ageDeathPercent + "%").attr("stop-color",color1).attr("stop-opacity",0.2);
gradient.append("stop").attr("offset","100%").attr("stop-color",color1).attr("stop-opacity",0.2);

let arcRadius = d.ageProjected * 5;
let arcEndX = d.ageProjected * 7;
g.append("path")
.attr("d", "M 20,200 A " + arcRadius + " " + arcRadius + " 0 0 1 " + arcEndX + ",200")
.style("fill","none")
.style("stroke", "url(#g" + i + ")")
})
Insert cell
viewof color1 = Inputs.color({label: "Favorite color", value: "#a77b00"})
Insert cell
Insert cell
gdmockdata
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell

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.
Learn more