Public
Edited
May 5, 2023
LEEland_guzzlers.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
dataset = FileAttachment("LEEland_guzzlers.csv").csv()
<svg width="750" height="750">
<style>
rect {stroke:white; stroke-width:2}
.LARGEDOG {fill: #a5620b;}
.MEDIUM-SIZEDDOG {fill: #c29657}
.TOYOTALANDCRUISER {fill: #cc1f5e}
.VOLKSWAGENGOLF {fill: #a71949}
.CAT {fill: #f7991d}
.HAMSTER {fill: #231f20}
/* 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. */
text {stroke:black; stroke-width:15; font: Source Serif Pro}
text2 {stroke:black; stroke-width:15; font: Source Serif Pro}
text3 {stroke:black; stroke-width:15; font: Source Serif Pro}
text4 {stroke:black; stroke-width:15; font: Source Serif Pro}
</style>
<!-- svg graphic elements go here, like <rect>, <line>, <text> -->
<!-- remember that 0,0 (x=0, y=0) is at the top-left of the svg drawing space -->
</svg>
LEEviz = d3.select(LEEland_guzzlersSVG)
squares = LEEviz.selectAll("rect")
.data(largedogbottom)
.join("rect")
.attr("width", d => d.footprint * 500)
.attr("height", d => d.footprint * 500)
.attr("x", 5)
.attr("y", d => 750 - (d.footprint*500))
.attr("style", d => {
if (d.title == "HAMSTER") {return "fill:#231f20;";}
else if (d.title == "CAT") {return "fill:#f7991d;";}
else if (d.title == "VOLKSWAGEN GOLF") {return "fill:#a71949;";}
else if (d.title == "TOYOTA LAND CRUISER") {return "fill:#cc1f5e;";}
else if (d.title == "MEDIUM-SIZED DOG") {return "fill:#c29657;";}
else if (d.title == "LARGE DOG") {return "fill:#a5620b;";}
else {return "fill:yellow;";}
});
titles = LEEviz.selectAll("text")
.data(largedogbottom)
.join("text")
.text(d => d.title)
.attr("x", d => d.footprint*500)
.attr("y", d => 770 - (d.footprint*500))
.attr("style", )
subtitles1 = LEEviz.selectAll("text")
.data(largedogbottom)
.join("text2")
.text(d => d.subtitle)
.attr("x", d => d.footprint*500)
.attr("y", d => 790 - (d.footprint*500))
.attr("style")
subtitles2 = LEEviz.selectAll("text")
.data(largedogbottom)
.join("text3")
.text(d => d.subtitle2)
.attr("x", d => d.footprint*500)
.attr("y", d => 810 - (d.footprint*500))
.attr("style")
subtitles3 = LEEviz.selectAll("text")
.data(largedogbottom)
.join("text4")
.text(d => d.subtitle3)
.attr("x", d => d.footprint*500)
.attr("y", d => 830 - (d.footprint*500))
.attr("style")
land_guzzlers@3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
largedogbottom = FileAttachment("land_guzzlers@3.csv").csv()
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.
