Published
Edited
Apr 5, 2021
14 stars
Insert cell
Insert cell
Insert cell
html `<svg viewBox="0 0 2200 240">
<path d="${person1}" fill=${colorScale(1)} stroke="black" stroke="black" stroke-width="10" stroke-linejoin="miter" linejoin="round" stroke-linejoin="miter" stroke-linecap="round"/>
</svg>`
Insert cell
Insert cell
html `<svg viewBox="0 0 2200 240">
<path d="${person2}" fill=${colorScale(2)} stroke="black" stroke-width="10" stroke-linejoin="miter" linejoin="round" stroke-linejoin="miter" stroke-linecap="round"/>
</svg>`
Insert cell
Insert cell
html `<svg viewBox="0 0 2200 240">
<path d="${person3}" fill=${colorScale(3)} stroke="black" stroke-width="10" stroke-linejoin="miter" linejoin="round" stroke-linejoin="miter" stroke-linecap="round"/>
</svg>`
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create('svg')
.attr("viewBox", [0,0, 1000, 800])
// TODO give the SVG a yellow background with a rect

svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#FEF713");
const title = svg.append("text")
.attr("x", 640)
.attr("y", 150)
.attr("text-anchor", "middle")
.style("font-size", "150px")
.style("font-family", "Londrina Outline")
.style("font-weight", 500)
.text("2019 NYE");
const ltitle1 = svg.append("text")
.attr("x", 640)
.attr("y", 490)
.attr("text-anchor", "middle")
.style("font-size", "30px")
.style("font-family", "Londrina Outline")
.style("font-weight", 700)
//.style("fill", "#c2bc0a")
.text("Minutes");
const ltitle2 = svg.append("text")
.attr("x", 645)
.attr("y", 300)
.attr("text-anchor", "middle")
.style("font-size", "30px")
.style("font-family", "Londrina Outline")
.style("font-weight", 700)
//.style("fill", "#c2bc0a")
.text("Debuted");
// make a grid to put the figures in
const figures = svg
.selectAll('path')
.data(peopleData)
.enter()
.append('path')
.attr('transform', (d, i) => `translate(${(i % 10) * 50 + 80},${Math.floor(i / 10) * 60 + 170})scale(0.3)`)
.attr('d', d => d.personPath)
.attr('stroke', 'black')
.attr('stroke-linecap', 'round')
.attr('stroke-width', '5')
.attr('fill', d => colorScale(d.outline))
figures.append("title")
.text(d => `${d.title}`);
/* Annotation */
const legend = svg.append("g");
legend.selectAll("rect")
.data(mylegend)
.join('rect')
.attr('x', 600)
.attr('y', 500)
.attr('width', 50)
.attr('height', 20)
.attr('stroke', 'black')
.attr('stroke-width', '2')
.attr('fill', (d,i) => colorScale(i+1))
.attr('transform', (d,i) => "translate(0," + i * 25 + ")")

legend.selectAll("g")
.data(mylegend)
.join('text')
.attr('x', 625)
.attr('y', 515)
.attr('transform', (d,i) => "translate(0," + i * 25 + ")")
.attr("font-size", "1em")
.attr("color", "black")
.text(function(d){ return d;})
.attr("text-anchor", "middle")
.attr("font-family", "Montserrat")
const legend2 = svg.append("g");
legend2.selectAll('path')
.data(mylegend2)
.enter()
.append('path')
.attr('transform', (d, i) =>
`translate(${(i % 10) * 35 + 600},${Math.floor(i / 10) * 60 + 310})scale(0.2)`
)
.attr('d', d => shapeFunc(d))
.attr('stroke', 'black')
.attr('stroke-linecap', 'round')
.attr('stroke-width', '10')
.attr('fill', 'none')
legend2.selectAll("g")
.data(mylegend2)
.join('text')
.attr('x', 615)
.attr('y', 370)
.attr('transform', (d,i) => "translate(" + i * 35 + ",0)")
.attr("font-size", "1em")
//.attr("fill", "#c2bc0a")
.text(function(d){ return d;})
.attr("text-anchor", "middle")
.attr("font-family", "Montserrat")


return svg.node();

}
Insert cell
mylegend = ["<5","5-10","10-15","15-20", "20+"]
Insert cell
mylegend2 = ["1.0", "2.0", "3.0"]
Insert cell
// 0-5
// 5-10
// 10-15
// 15-20
// 20+
colorScale = d3.scaleOrdinal(["#F37C14", "#29A9E6", "#E7325B", "#8DD77E", "#BD6CC5"])
Insert cell
Insert cell
Insert cell
Insert cell
html `<style>@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');</style>`
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more