<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>
<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>
path = d3.select(svg).selectAll("path")
startX = 20
endX = 700
totalLength = path.node().getTotalLength()
lengthAtPercent = percent/100 * totalLength
pointAtLength = path.node().getPointAtLength(lengthAtPercent)
xAtPercent = pointAtLength.x
xDistanceAtPercent = xAtPercent - startX
pathTotalWidth = endX - startX
gradientStop = xDistanceAtPercent/pathTotalWidth * 100
d3.select(svg2).select("#firstStop").attr("offset", gradientStop + "%")
d3.select(svg2).select("#secondStart").attr("offset", gradientStop + "%")
<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>
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)
d3.select(svg2).append("circle")
.attr("cx", pointAtLength.x)
.attr("cy", pointAtLength.y)
.attr("r", 3)
<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>
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 + ")")
})
viewof color1 = Inputs.color({label: "Favorite color", value: "#a77b00"})
gdmockdata
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
