<svg width="1200" height="1200">
</svg>
{
landguzzlers.selectAll(".guzzlersrects")
.data(data)
.join("rect")
.attr("x", d=>basepointX)
.attr("y", d=> (basepointY-(Math.sqrt (Number(d["footprint"]) )*1000) ) )
.attr("width", d=> Math.sqrt (Number(d["footprint"]) )*1000)
.attr ("height", d=> Math. sqrt (Number(d["footprint"]))*1000)
.style("fill", (d,i)=>colors[i])
landguzzlers.selectAll('text.value')
.data(data.filter(d => d.title != "HAMSTER"))
.enter()
.append('text')
.join('text.value')
.text(d => d['title'])
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000 - 3))
.attr("y", d=> (basepointY-(Math.sqrt (Number(d["footprint"]) )*1000 - 25) ) )
.attr('text-anchor','end')
.attr('font-size', 25)
.attr('fill', 'white')
landguzzlers.selectAll('text.value')
.data(data.filter(d => d.title =='HAMSTER'))
.enter()
.append('text')
.join('text.value')
.text(d => d['title'])
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000+120))
.attr("y", d=> (basepointY-(Math.sqrt (Number(d["footprint"]) )*1000 - 20) ) )
.attr('text-anchor','end')
.attr('font-size', 25)
.attr('fill', 'white')
landguzzlers.selectAll('text.value')
.data(data)
.enter()
.append('text')
.join('text.value')
.text(d => d['subtitle'])
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000-23))
.attr("y", d=> (basepointY-(Math.sqrt (Number(d["footprint"]) )*1000 - 45) ) )
.attr('text-anchor','end')
.attr('font-size', 18)
.attr('fill', 'white')
landguzzlers.selectAll('text.value')
.data(data)
.enter()
.append('text')
.join('text.value')
.text(d => d['subtitle2'])
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000-23))
.attr("y", d=> (basepointY-(Math.sqrt (Number(d["footprint"]) )*1000 - 65) ) )
.attr('text-anchor','end')
.attr('font-size', 18)
.attr('fill', 'white')
landguzzlers.selectAll('text.value')
.data(data)
.enter()
.append('text')
.join('text.value')
.text(d => d['subtitle3'])
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000-20))
.attr("y", d=> (basepointY-(Math.sqrt (Number(d["footprint"]) )*1000 - 85) ) )
.attr('text-anchor','end')
.attr('font-size', 18)
.attr('fill', 'white')
landguzzlers.selectAll('.rotate')
.data(data. filter (d => d.title == 'LARGE DOG'))
.enter()
.append ('text')
.join('text')
.text(sidetext1)
.attr('x', d => Math.sqrt(Number(d['footprint']) )*980)
.attr('y', d => (basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1010) )
.attr('transform', d => "rotate(90, " + (Math.sqrt(Number(d['footprint']))*980) + "," + ((basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1010)) + ")")
.attr( 'text-anchor', 'start')
.attr( 'font-size', 23)
.attr('fill', 'white')
.classed('.rotate', true)
landguzzlers.selectAll('.rotate')
.data(data. filter (d => d.title == 'MEDIUM-SIZED DOG'))
.enter()
.append ('text')
.join('text')
.text(sidetext2)
.attr('x', d => Math.sqrt(Number(d['footprint']) )*980)
.attr('y', d => (basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1010) )
.attr('transform', d => "rotate(90, " + (Math.sqrt(Number(d['footprint']))*980) + "," + ((basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1010)) + ")")
.attr( 'text-anchor', 'start')
.attr( 'font-size', 23)
.attr('fill', 'white')
.classed('.rotate', true)
landguzzlers.selectAll('.rotate')
.data(data. filter (d => d.title == 'TOYOTA LAND CRUISER'))
.enter()
.append ('text')
.join('text')
.text(sidetext3)
.attr('x', d => Math.sqrt(Number(d['footprint']) )*970)
.attr('y', d => (basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1020) )
.attr('transform', d => "rotate(90, " + (Math.sqrt(Number(d['footprint']))*970) + "," + ((basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1020)) + ")")
.attr( 'text-anchor', 'start')
.attr( 'font-size', 23)
.attr('fill', 'white')
.classed('.rotate', true)
landguzzlers.selectAll('.rotate')
.data(data. filter (d => d.title == 'CAT'))
.enter()
.append ('text')
.join('text')
.text(sidetext4)
.attr('x', d => Math.sqrt(Number(d['footprint']) )*950)
.attr('y', d => (basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1030) )
.attr('transform', d => "rotate(90, " + (Math.sqrt(Number(d['footprint']))*950) + "," + ((basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1030)) + ")")
.attr( 'text-anchor', 'start')
.attr( 'font-size', 23)
.attr('fill', 'white')
.classed('.rotate', true)
landguzzlers.selectAll('.rotate')
.data(data. filter (d => d.title == 'HAMSTER'))
.enter()
.append ('text')
.join('text')
.text(sidetext5)
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000+118))
.attr('y', d => (basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1030 + 10) )
.attr('text-anchor','end')
.attr('font-size', 18)
.attr('fill', 'white')
landguzzlers.selectAll('.rotate')
.data(data. filter (d => d.title == 'HAMSTER'))
.enter()
.append ('text')
.join('text')
.text(sidetext6)
.attr('x', d => (Math.sqrt(Number(d["footprint"]) )*1000+120))
.attr('y', d => (basepointY + 50) - (Math.sqrt(Number(d['footprint']))*1030 - 5 ) )
.attr('text-anchor','end')
.attr('font-size', 18)
.attr('fill', 'white')
}
sidetext1 = ['Eco-footprint: 1.1 hectares']
sidetext2 = ['Eco-footprint: 0.84 hectares']
sidetext3 = ['Eco-footprint: 0.41 hectares']
sidetext4 = ['Eco-footprint: 0.15 hectares']
sidetext5 = ['Eco-footprint:']
sidetext6 = ['0.014 hectares']
.starttext{
fill: white;
text-anchor: start;
font-size: 15px;
}
basepointY = 1100
basepointX = 0
<style>
rect {
stroke: white;
stroke-width: 2;
}
</style>
landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.
data = FileAttachment("land_guzzlers.csv").csv()
colors=["#a6620c","#c29657","#cc1e5e","#a71748","#f6991c","#222021"]
Inputs.table(data)
idx = [1, 2, 3,4, 5]
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.