Public
Edited
Apr 17, 2023
names = ["LARGE DOG","MEDIUM-SIZED DOG","TOYOTA LAND CRUISER","VOLKSWAGEN GOLF","CAT","HAMSTER"]
numbers = [1.1,0.84,0.41,0.18,0.15,0.014]
<svg Width="1000" Height="1000"><style>
/* put style rules in this section. These will apply to the whole file */
/* you can also use inline style="property:value; property:value;" statements in the svg elements below. */
.mysvg{fill:blue; stroke: randcolor; stroke-width:10}
</style></svg>
mySVG = d3.select(svgObject)
mySVG.selectAll("rect", "fill:blue")
.data(numbers)
.join("rect")
.attr("width", d => d * 500)
.attr("height",d => d * 500)
.attr("x", d => d * spacing)
.attr("y", 50)
.attr(randColor)
spacing = 250
randColor = () => {
let r = Math.random() * 255;
let g = Math.random() * 255;
let b = Math.random() * 255;
return "rgb(" + r + "," + g + "," + b + ")";
}
mySVG.selectAll("text")
.data(names)
.join("text")
.text(d => d)
.attr("y", 40)
.attr("x", (d,i) => i * spacing + spacing)
Problems so far
I have used D3 baby steps as the backbone for this exercise but facing some issues
1)Error with names
2)assigning colors to rectangles
3)aligning the text with respected rectangles as shown in the graphics
<svg width="1000" height="1000">
<style>
text{fill: White; stroke: white; stroke-width: 0}
line{fill: White; stroke: white; stroke-width: 1}
</style>
<rect width="900" height="900" x="0" y="100" style="fill:#a5620b;"/>
<text x="730" y="130" Style="font-family: 'Roboto', sans-serif; font-size: 30">LARGE DOG</text>
<text x="680" y="150" Style="font-family: 'Roboto', sans-serif;">Eco-footprint: 0.84 hectares</text>
<line x1="0" y1="100" x2="900" y2="100" />
<line x1="900" y1="100" x2="900" y2="1000" />
<text x="0" y="150" Style="font-family: 'Roboto', sans-serif; font-size: 50" style="stroke:#000;">Land guzzlers</text>
<text x="0" y="175" Style="font-family: 'Roboto', sans-serif; font-size: 15" style="stroke:#000;">The ecological footprint of our pets can make SUVs look positively eco-friendly</text>
<rect width="800" height="800" x="0" y="200" style="fill:#c29657;"/>
<text x="520" y="230" Style="font-family: 'Roboto', sans-serif; font-size: 30">MEDIUM SIZED DOG</text>
<text x="570" y="250" Style="font-family: 'Roboto', sans-serif;">CONSUMPTION PER YEAR</text>
<text x="538" y="270" Style="font-family: 'Roboto', sans-serif;">165kg of meat, 95kg of cereals </text>
<text x="55" y="290" Style="font-family: 'Roboto', sans-serif;">43.3m^2 of land per 1kg of chicken (more for beef and lamb), 13.4m^2 of land per 1kg of cereal </text>
<text x="560" y="310" Style="font-family: 'Roboto', sans-serif;">Eco-footprint: 0.84 hectares</text>
<line x1="0" y1="200" x2="800" y2="200" />
<line x1="800" y1="200" x2="800" y2="1000" />
<rect width="600" height="600" x="0" y="400" style="fill:#cc1f5e;"/>
<text x="270" y="430" Style="font-family: 'Roboto', sans-serif; font-size: 30">TOYOTA LAND CRUISER</text>
<text x="370" y="450" Style="font-family: 'Roboto', sans-serif;">10,000 KM Driver Per Year</text>
<text x="90" y="470" Style="font-family: 'Roboto', sans-serif;">55.1 gigajoules (includes energy required to fuel and construct)</text>
<text x="355" y="490" Style="font-family: 'Roboto', sans-serif;">Eco-footprint: 0.41 hectares</text>
<line x1="0" y1="400" x2="600" y2="400" />
<line x1="600" y1="400" x2="600" y2="1000" />
<rect width="400" height="400" x="0" y="600" style="fill:#a71949;"/>
<text x="115" y="630" Style="font-family: 'Roboto', sans-serif; font-size: 30">VOLKSWAGEN GOLF</text>
<line x1="0" y1="600" x2="400" y2="600" />
<line x1="400" y1="600" x2="400" y2="1000" />
<rect width="350" height="350" x="0" y="650" style="fill:#f7991d;"/>
<text x="285" y="680" Style="font-family: 'Roboto', sans-serif; font-size: 30">CAT</text>
<text x="125" y="700" Style="font-family: 'Roboto', sans-serif;">Eco-footprint: 0.15 hectares</text>
<line x1="0" y1="650" x2="350" y2="650" />
<line x1="350" y1="650" x2="350" y2="1000" />
<rect width="100" height="100" x="0" y="900" style="fill:#231f20;"/>
<text x="105" y="925" Style="font-family: 'Roboto', sans-serif; font-size: 30">HAMSTER</text>
<text x="105" y="950" Style="font-family: 'Roboto', sans-serif;">Eco-footprint:</text>
<text x="105" y="975" Style="font-family: 'Roboto', sans-serif;">0.014 hectares:</text>
<line x1="0" y1="900" x2="100" y2="900" />
<line x1="100" y1="900" x2="100" y2="1000" />
</svg>
landGuzSketch = FileAttachment("land guz sketch.jpg").image()
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.
