// code here
// code here
// code here
d3 = require("d3@5")
simpleContainer = {
const container = d3.select(DOM.svg(1000, 100));
container
.insert('rect')
.attr('width', 30)
.attr('height', 30)
.attr('x', 10)
.attr('y', 10)
.attr('fill', 'purple')
.attr('stroke', 'pink')
.attr('stroke-width', 4);
return container.node();
}
colorGroupsContainer = {
const container = d3.select(DOM.svg(1000, 100));
const pinkGroup = container
.append("g")
.attr("id", "pinkGroup")
const greenGroup = container
.append("g")
.attr("id", "greenGroup")
pinkGroup
.append('rect')
.attr('x', 10)
.attr('y', 10)
.attr('width', '50')
.attr('height', '10')
.attr('fill', '#ff96ca');
greenGroup
.append('rect')
.attr('x', 500)
.attr('y', 50)
.attr('width', '100')
.attr('height', '10')
.attr('fill', 'green');
return container.node();
}
createCirclesWithData = {
const container = d3.select(DOM.svg(1000, 100));
const arr = [ 20, 5, 10, 25, 15 ]
container.selectAll("circle")
.data(arr)
.enter().append("circle")
.attr("fill", "steelblue")
.attr("r", function(d) { return d; })
.attr("cx", function(d, i) { return (i+1)*50; })
.attr("cy", 50);
return container.node();
}
oneOddballCircle = {
const container = d3.select(DOM.svg(1000, 100));
const arr = [ 20, 5, 10, 25, 15 ]
container.append("circle")
.attr("fill", "steelblue")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 20);
container.selectAll("circle")
.data(arr)
.enter().append("circle")
.attr("r", function(d) { return d; })
.attr("cx", function(d, i) { return (i+1)*50; })
.attr("cy", 50)
;
return container.node();
}
circlesWithJoin = {
const container = d3.select(DOM.svg(1000, 100));
const arr = [ 20, 5, 10, 25, 15 ]
container.append("circle")
.attr("fill", "steelblue")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 20);
container.selectAll("circle")
.data(arr)
.join("circle")
.attr("r", function(d) { return d; })
.attr("cx", function(d, i) { return (i+1)*50; })
.attr("cy", 50);
return container.node();
}
FileAttachment("simple_bar_chart.png").image()
// This is your starter code
simpleBarCharts = {
const width = 1000;
const height = 100;
const barwidth = 40;
const container = d3.select(DOM.svg(width, height));
const arr = [ 20, 5, 10, 25, 15 ]
return container.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.
