<svg width="300" height=300 style="background-color:red">
</svg>
<svg width=300 height=300 style="background-color:aqua;border-radius:20px;">
<circle transform="translate(150,150)" fill="red" opacity="0.5" stroke="blue" r="100"></circle>
</svg>
<svg width=300 height=300 style="overflow:visible;background-color:aqua;border-radius:20px;">
<line transform="rotate(56)" x1=0 y1=0 x2=200 y2=0 stroke="red" stroke-width="5">
</line>
</svg>
<svg width=300 height=300 style="background-color:aqua;border-radius:20px;">
<text transform="translate(150,150)" stroke="red">Test Test Tes</text>
</svg>
<svg width=300 height=300 style="background-color:aqua;border-radius:20px;overflow:visible">
<path
stroke="black"
fill="yellow"
d="M 0,0 L 150,150 L 150,300 L0,300 Z"
></path>
</svg>
<svg width=300 height=300 style="background-color:aqua;border-radius:20px;">
<g transform="translate(0,-100)">
<circle r=40 transform="translate(160,150)" fill='orange' stroke='blue' > </circle>
<circle r=20 transform="translate(260,150)" fill='orange' stroke='blue' > </circle>
</g>
</svg>
min = d3.min(dataTemp, function (d) {
return d.temp;
})
max = d3.max(dataTemp, (d) => d.temp)
valueScale = d3.scaleLinear().domain([min, max]).range([0, 200])
valueScale.ticks(7)
colorScale = d3.scaleLinear().domain([0, max]).range(["orange", "darkred"])
colorScale(0)
d3
.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2)()
arc = d3
.arc()
.innerRadius((d) => d.innerRadius)
.outerRadius((d) => d.outerRadius)
.startAngle((d) => d.startAngle)
.endAngle((d) => d.endAngle)
myObj = ({
innerRadius: 100,
outerRadius: 100,
startAngle: Math.PI / 2,
endAngle: Math.PI
})
arcResult = arc(myObj)
<svg height=300>
<path stroke='black'
fill='none'
transform='translate(150,150)'
d='${arcResult}'>
</path>
</svg>
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.
