html `<svg height = 400 width = 400 style = "border: green solid 1px">`
html `<svg width = 400 height = 400 style = "border: green solid 1px">
<circle cx = "50" cy = "100" r = "10"/>
<rect x = "200" y = "200" height = "100" width = "100"/>
</svg>`
html `<svg width = 50 height = 50>
<rect x = "10" y = "10" height = "30" width = "30" fill = "purple"
stroke = "pink" stroke-width = "4" opacity = "0.5"/>
</svg>`
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();
}
// d3 is useful to bind data to element to be displayed
// but basically the output now for the rectangle is the same
colorGroupsContainer = {
const container = d3.select(DOM.svg(1000, 100));
const pinkGroup = container // inside container
.append("g")
.attr("id", "pinkGroup") // assign id
.attr('fill', 'pink')
const greenGroup = container
.append("g")
.attr("id", "greenGroup")
.attr('fill', 'green')
const purpleGroup = container
.append("g")
.attr("id", "purpleGroup")
.attr('fill', 'purple')
pinkGroup
.append('rect')
.attr('x', 10)
.attr('y', 10)
.attr('width', '50')
.attr('height', '10')
.attr('fill', '#ff96ca') // can override group attribute
;
greenGroup
.append('rect')
.attr('x', 500)
.attr('y', 50)
.attr('width', '80')
.attr('height', '10')
// .attr('fill', 'green')
;
greenGroup
.append('circle')
.attr('cx', 80)
.attr('cy', 50)
.attr('r', '10')
.attr('fill', 'lime') // can override group attribute
;
purpleGroup
.append('circle')
.attr('cx',40)
.attr('cy', 50)
.attr('r', '10')
// .attr('fill', 'purple')
;
return container.node(); // need to return to show
}
createCirclesWithData = {
const container = d3.select(DOM.svg(1000, 100));
const arr = [ 20, 5, 10, 25, 15 ]
container.selectAll("circle")
.data(arr)
.enter().append("circle") // look at d3indepth for more explanation
.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") // for the next four circles, color not steel blue
.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")
// .exit() //can unselect everything, not very good example but get the idea
.data(arr)
.join("circle") // different way to do
.attr("r", function(d) { return d; })
.attr("cx", function(d, i) { return (i+1)*50; })
.attr("cy", 50)
// .attr("fill", "steelblue") // this will change all to steel blue when using join
;
return container.node();
}
circlesWithGroups = {
const width = 1000;
const height = 100;
const container = d3.select(DOM.svg(width, height));
const arr = [ 20, 5, 10, 25, 15 ]
const componentGroup =
container.selectAll("g")
.data(arr)
.enter().append("g")
.attr("class", "circleGroup")
.attr("transform", (d, i) => `translate(${((i+1) * 50)}, 50)`);
/* Note: this is an alternative if you don't like the backtick syntax:
.attr("transform", (d,i) => "translate(" + (i+1) * 50 + "," + 50 + ")");
*/
/*
Notice that we are not setting x and y locations for the circles or the text below;
they are inherited from the g group.
notice also that componentGroup refers to a list of selections with data bound to them
To see what's going on, uncomment the line below and look in the Console of the Inspector
*/
// console.log(componentGroup);
componentGroup
.append("circle")
.attr("r", d=> d)
.attr("fill", "steelblue");
componentGroup
.append("text")
.attr("fill", "yellow")
.attr("text-anchor", "middle") // SVG attributes
.style("font", "0.75em sans-serif") // CSS styles
.attr("dy", "0.35em") // a tweak to center the text in the circle
.text(d => d);
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();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
