Published
Edited
May 11, 2019
1 star
md`# d3 color tests`
graphic = {
let width = 660 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom
let svg = DOM.svg(width, height)
let g = d3.select(svg).append('g')
var colors = ["#11100e","#727b7a","#b2b4ac","#d3d3c9","#bfd1d4","#398ea9","#407695","#1e3154","#672948","#daa294","#e6434d","#dc2004","#a34014","#e78a09","#d9cb4d","#bec04c","#56844f"]
let r = g.selectAll('rect')
.data(colors)
.enter()
.append('rect')
.style('fill', d => d)
.style('opacity', 0.75)
.style('stroke', d => d)
.attr("x", (d, i) =>i * 35)
.attr("y", 0)
.attr("width", d => width/(d.length+1))
.attr("height", height)
yield svg;
}
style = html`<style>
svg {
background:#e1e1e1;
}
}</style>`
margin = ({top: 20, right: 10, bottom: 20, left: 10})
d3 = require("d3@5")
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.
