md`# radialGradient color playground`
html`
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient fr="30%" r="50%" id="myGradient">
<stop offset="0%" stop-color=${fromColor} />
<stop offset="50%" stop-color=${midColor} />
<stop offset="100%" stop-color=${toColor} />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>`
viewof fromColor = color({
value: "#fe938c",
title: "From Color"
})
viewof midColor = color({
value: "#ead2ac",
title: "Middle Color"
})
viewof toColor = color({
value: "#4281a4",
title: "To Color"
})
viewof fromRadius = slider({
title: 'from radius',
value: 0,
step: 10,
min: 0,
max: 50
})
viewof toRadius = slider({
title: 'to radius',
value: 50,
step: 10,
min: 0,
max: 50
})
colorDiscrete_a = ['#fe938c', '#e6b89c', '#ead2ac', '#9cafb7', '#4281a4']
colorDiscrete_b = ['#9c89b8', '#f0a6ca', '#efc3e6', '#f0e6ef', '#b8bedd']
colorDiscrete2 = ["#F8CDD6", "#1C83A9"]
viz = {
const svg = d3
.create("svg")
.attr('viewBox', [0, 0, width, width])
const gradient = DOM.uid();
// const gradient = d3.selectAll('.radial').append("defs").append("radialGradient")
svg.append("radialGradient")
.attr("id", gradient.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", "0%")
.attr("cy", "0%")
.attr("fr", fromRadius+"%")
.attr("r", toRadius+"%")
.selectAll("stop")
.data(d3.ticks(0, 1, 10))
.join("stop")
.attr("offset", d=>d)
.attr("stop-color", colorScale);
const group = svg.append('g')
.attr('transform', `translate(${width/2}, ${width/2})`)
group.append('circle')
.attr('r', width/2)
.attr('fill', `url(#${gradient.id})`)
return svg.node()
}
lengend = {
const svg = d3
.create("svg")
.attr('viewBox', [0, 0, width, width])
const gradient = DOM.uid();
// const gradient = d3.selectAll('.radial').append("defs").append("radialGradient")
svg.append("radialGradient")
.attr("id", gradient.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", "0%")
.attr("cy", "0%")
.attr("fr", fromRadius+"%")
.attr("r", toRadius+"%")
.selectAll("stop")
.data(d3.ticks(0, 1, 10))
.join("stop")
.attr("offset", d=>d)
.attr("stop-color", colorScale);
const group = svg.append('g')
.attr('transform', `translate(${width/2}, ${width/2})`)
group.append('rect')
.attr('x', width/100 * fromRadius)
.attr('width', (toRadius-fromRadius) * width/100)
.attr('height', 20)
.attr('fill', `url(#${gradient.id})`)
return svg.node()
}
d3 = require("d3@6")
import {slider, radio, text, select, color} from '@jashkenas/inputs'
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.
