Public
Edited
Mar 31, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("width", 1000)
.attr("height", 200)

// With Hex code
svg
.append("circle")
.attr("cx",100)
.attr("cy",100)
.attr("r",20)
.style("fill", "#69b3a2")

// With a color name
svg
.append("circle")
.attr("cx",200)
.attr("cy",100)
.attr("r",20)
.style("fill", "pink")

// With RGBA
svg
.append("circle")
.attr("cx", 300)
.attr("cy",100)
.attr("r",20)
.style("fill", "rgba(198, 45, 205, 0.8)" )

// With RGB
svg
.append("circle")
.attr("cx", 400)
.attr("cy",100)
.attr("r",20)
.style("fill", "rgba(12, 240, 233)" )

return svg.node()
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("width", 1000)
.attr("height", 200)

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Option 1: selfdefined
const myColorTwoValues = d3
.scaleLinear()
.domain([1,10])
.range(["white", "blue"])
svg
.selectAll()
.data(data)
.join("circle")
.attr("cx", (d, i) => 30 + i*60)
.attr("cy", 50)
.attr("r", 19)
.attr("fill", d => myColorTwoValues(d))

// Option 2: predefined
const myColorSequential = d3
.scaleSequential()
.domain([1,10])
.interpolator(d3.interpolatePuRd)
svg
.selectAll()
.data(data)
.join("circle")
.attr("cx", (d,i) => 30 + i*60)
.attr("cy", 150)
.attr("r", 19)
.attr("fill", d => myColorSequential(d))


return svg.node()
}
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("width", 1000)
.attr("height", 200)

const data = ["Tomato", "Fennel", "Octopus", "Green onion", "Kale"]

// Option 1: selfdefined
var myColorNames = d3
.scaleOrdinal()
.domain(data)
.range(["gold", "teal", "pink", "purple", "grey"])
svg
.selectAll()
.data(data)
.join("circle")
.attr("cx", (d, i) => 30 + i*60)
.attr("cy", 50)
.attr("r", 19)
.attr("fill", d => myColorNames(d))

// Option 2: predefined
var myColorCat = d3
.scaleOrdinal()
.domain(data)
.range(d3.schemeSet3);
svg
.selectAll()
.data(data)
.join("circle")
.attr("cx", (d, i) => 30 + i*60)
.attr("cy", 150)
.attr("r", 19)
.attr("fill", d => myColorCat(d))

return svg.node()
}
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("width", 1000)
.attr("height", 200)

const gradientId = DOM.uid("gradient")
const startColor = d3.schemeCategory10[1]
const endColor = d3.schemeCategory10[3]

const gradiants = svg.append("defs")
.append("linearGradient")
.attr("id", gradientId.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 100)
.attr("x2", 500)
.attr("y1", 100)
.attr("y2", 100)
.call(g => g.append("stop").attr("stop-color", startColor).attr("stop-opacity", 0.5))
.call(g => g.append("stop").attr("offset", "100%").attr("stop-color", endColor));

const line = svg.append("line")
.attr("x1", 100)
.attr("x2", 500)
.attr("y1", 100)
.attr("y2", 100)
.attr("stroke", gradientId)
.attr("stroke-width", "10px")

return svg.node()
}
Insert cell
Insert cell
Insert cell
Insert cell
import {toc} from "@jonfroehlich/collapsible-toc"
Insert cell
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
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