A ♥ for data visualization + interaction
chart = {
const canvas = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("fill", "#f6f6f6")
.style("border", "1px solid #ccc");
const spots = canvas.append("g")
.attr("class", "spots")
.attr("transform", `translate(${width/columns}, ${height/rows})`);
// draw the spots
spots.selectAll("circle.spot")
.data(data)
.enter()
.append("circle")
.attr("class", "spot")
.attr("r", radius)
.attr("fill", d => color(d[2]))
.attr("cx", d => margin + d[0] * spotsWidth / (columns+1))
.attr("cy", d => margin + d[1] * spotsHeight / (rows+1));
return canvas.node();
}
data = d3.range(columns)
.map(col => d3.range(rows)
.map(row => [col, row, Math.floor(Math.random() * selectedPallet.length)]))
.flat();
color = d3.scaleOrdinal(selectedPallet);
spotsWidth = width - 2*margin
spotsHeight = height - 2*margin
spotScheme = [
"#f27f86i", "#ab191a", "#84231a",
"#add6f2", "#5aade1", "#113f7b",
"#113f7b", "#ffe03a", "#fdba69",
"#95caba", "#76beaa", "#06725b",
"#e7c3c7", "#a1a4c5", "#9588bd"
];
pallets = [
"spots",
"schemeCategory10",
"schemeAccent",
"schemeDark2",
"schemePaired",
"schemePastel1",
"schemePastel2",
"schemeSet1",
"schemeSet2",
"schemeSet3"
];
palletDict = {
return {
spots: spotScheme,
schemeCategory10: d3.schemeCategory10,
schemeAccent: d3.schemeAccent,
schemeDark2: d3.schemeDark2,
schemePaired: d3.schemePaired,
schemePastel1: d3.schemePastel1,
schemePastel2: d3.schemePastel2,
schemeSet1: d3.schemeSet1,
schemeSet2: d3.schemeSet2,
schemeSet3: d3.schemeSet3
}
};
selectedPallet = palletDict[pallet]
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.
