chart = {
const margin = {top: 30, right: 10, bottom: 10, left: 0},
width = 500 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
// add a background color to show the are of the svg
.style("background-color", "yellow");
const group = svg.append("g")
.attr("transform",
`translate(${margin.left},${margin.top})`)
// add a rect to show the area of the group element
group.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
.style('fill', 'black')
return svg.node()
}
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.
