Public
Edited
Apr 16
<svg width="1100" height="1100">
<style>
/* edit these styles as you need - this is a starting point*/
rect {stroke: white; stroke-width: 2px;}
text {fill: white; font-family: 'Rajdhani', sans-serif;}
.maintitle {font-size: 39px; fill: black;}
.mainsubtitle {font-size: 18px; fill: black;}
.title {text-anchor: end; font-size: 32px;}
.subtext1, .subtext2, .subtext3 {}
.footprint {font-size: 17px;}
line {stroke: white; stroke-width: 2px;}
</style>
<text x="0" y="27" class="maintitle">Main title-this can be static</text>
<text x="0" y="50" class="mainsubtitle">Subtitle...</text>
<!-- the rest will be drawn by the data using D3 below -->
</svg>
var svgContainer = document.querySelector("svg"); // Make sure your SVG is in the HTML
var landguzzlersViz = d3.select(svgContainer); // no let
landguzzlersViz.selectAll("rect")
.data(land_guzzlers)
.join("rect")
.attr("width", d => Math.sqrt(d.hectares) * 100) // Adjust scaling
.attr("height", d => Math.sqrt(d.hectares) * 100)
.attr("x", 300) // Static for now
.attr("y", (d, i) => i * 150 + 100) // Stack vertically
.style("fill", (d, i) => colors[i])
.style("stroke", "white")
.style("stroke-width", "2px");
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
let landguzzlersViz = d3.select(svgContainer)
// select the cell called svgContainer and make it a d3 object.
// draw Rectangles first - get this section to work before you try the others.
landguzzlersViz.selectAll("rect")
.data(land_guzzlers) // the name of the data object (see table below)
.join("rect")
.attr("width", d => how_do_we_calculate_the_width_from_d)
.attr("height", d => how_do_we_calculate_the_height_from_d)
.attr("x", what_value_should_these_all_be)
.attr("y", d => how_do_we_calculate_the_y_top_left_of_rectangle_position_from_d)
.style("fill", (d,i) => colors[i]); // I'll give you this one. Can you see how it works? See colors array below.
// uncomment lines below as you go to make them live, and edit.
// Command-slash(/) or Control-slash(/) on a line or selection of lines will comment / uncomment.
// // Now add the Large Dog, Toyota, etc. titles
// // notice that I'm selectingAll objects of a class called .title to only get those text elements.
// landguzzlersViz.selectAll(".title")
// .data(land_guzzlers) // same dataset used again
// .join("text") // new object type created
// .attr("x", d => how_do_we_calculate_this_position)
// .attr("y", d => how_do_we_calculate_this_position)
// .text(d => what_data_field_is_this_coming_from) // this is the text contents, eg. LARGE DOG
// .attr("class", "title"); // tag it with the style class 'title' so the selectAll above works.
// // Now the rotated Eco-Footprint text and values. Note the rotation transform.
// landguzzlersViz.selectAll(".footprint") // selecting a .class of objects again.
// .data(land_guzzlers)
// .join("text")
// .attr("x", d => how_do_we_calculate_this_position)
// .attr("y", d => how_do_we_calculate_this_position)
// .text(d => "Concatenate text: " + d["somecolumname"] + " with a plus")
// .attr("transform", (d,i,nodes) => "rotate(90 " + nodes[i].getAttribute("x") + " " + nodes[i].getAttribute("y") + ")")
// // ^^ OK, so you would not have gotten this one on your own easily. See if you can figure it out.
// // transform is "rotate(angle xPivotPoint yPivotPoint)" This is an SVG transform.
// .attr("class", "footprint"); // tag it with the style class 'footprint'
// ... what other objects do we need and how do we get them. Use the same approaches.
}
colors = ["#a5620b","#c29657","#cc1f5e","#a71949","#f7991d","#231f20"];
// in order Large Dog to Hamster. Reference as colors[i]
land_guzzlers.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
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.
