Published
Edited
Jun 12, 2020
md`# Test 2`
d3 = require("d3@5");
data_as_array = {
let data_as_text = await d3.text("https://raw.githubusercontent.com/rzk90/FeatherDuster-Pollution1/master/200610_5_Figure_1%20_Road_traffic_increased_by_29%25_from_1990_to_2018.csv");
return d3.csvParseRows(data_as_text);
}
{
const table = html`<table></table>`;
let tableObject = d3.select(table);
tableObject.append("tr")
.selectAll("th")
.data(data_as_array[0])
.enter()
.append("th")
.text(d => d);
return table;
}
{
const table = html`<table></table>`;
let tableObject = d3.select(table);
tableObject.append("tr")
.selectAll()
.data(data_as_array[0])
.enter()
.append("th")
.text(d => d);
tableObject.selectAll("tr")
.data(data_as_array.slice(1, 5))
.enter()
.append("tr")
.selectAll()
.data(d => d)
.enter()
.append("td")
.text(d => d)
;
return table;
}
flatNodeHeirarchy = {
let root = {children: data_as_json.slice(1)};
return d3.hierarchy(root).sum(d => d.Y1990);
}
packedData = {
let width = 930;
let height = 930;
let pack = d3.pack()
.size([width, height])
.padding(3)
return pack(flatNodeHeirarchy);
}
{
let width = 932;
let height = 932;
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(packedData.leaves())
.enter().append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", d => "#bbccff");
return svg.node()
}
{
let width = 932;
let height = 932;
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
const leaf = svg.selectAll("g")
.data(packedData.leaves())
.enter().append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
let circle = leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", d => "#bbccff");
let current_circle = undefined;
let format = d3.format(",d")
function selectOccupation(d) {
// cleanup previous selected circle
if(current_circle !== undefined){
current_circle.attr("fill", d => "#bbccff");
svg.selectAll("#details-popup").remove();
}
// select the circle
current_circle = d3.select(this);
current_circle.attr("fill","#b2e1f9");
let textblock = svg.selectAll("#details-popup")
.data([d])
.enter()
.append("g")
.attr("id", "details-popup")
.attr("font-size", 14)
.attr("font-family", "sans-serif")
.attr("text-anchor", "start")
.attr("transform", d => `translate(0, 20)`);
textblock.append("text")
.text("Occupation Details:")
.attr("font-weight", "bold");
textblock.append("text")
.text(d => "Description: " + d.data.Occupation_Name)
.attr("y", "16");
textblock.append("text")
.text(d => "Current Employment: " + format(d.data.Employment))
.attr("y", "32");
textblock.append("text")
.text(d => "Projected Growth: " + format(d.data.Employment_Growth))
.attr("y", "48");
textblock.append("text")
.text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase())
.attr("y", "64");
textblock.append("text")
.text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase())
.attr("y", "80");
}
circle.on("click", selectOccupation);
return svg.node()
}
highest_data_as_json = {
const data = JSON.parse(JSON.stringify(data_as_json)).slice(1); // make a copy of the data and then get rid of the first row
return data.map(d => {
if(d.Growth < 0){
d.isGrowing = false;
d.Miles_High = Number(d.Y1990);
d.Miles_Low = Number(d.Y1990) + Number(d.Growth);
}
else {
d.isGrowing = true;
d.Miles_High = Number(d.Y1990) + Number(d.Growth);
d.Miles_Low = Number(d.Y1990);
}
return d;
});
}
highest_packed_data = {
let root = {children: highest_data_as_json.slice(0,-1)};
let highest_flat_node_heirarchy = d3.hierarchy(root).sum(d => d.Miles_High);
let width = 930;
let height = 930;
let pack = d3.pack()
.size([width, height])
.padding(3)
return pack(highest_flat_node_heirarchy);
}
graphic_1 = {
let width = 932;
let height = 932;
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
const leaf = svg.selectAll("g")
.data(highest_packed_data.leaves())
.enter().append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
let circle = leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", d => {
if(d.data.isGrowing){
return "#80a8b2";
}
else{
return "#e9eff0";
}
});
let innerCircles = leaf.append("circle")
.attr("r", d => {
let scale = d3.scaleSqrt()
.domain([0, d.data.Miles_High])
.range([0,d.r]);
return scale(d.data.Miles_Low);
})
.attr("fill", "#d9edf7");
let current_circle = undefined;
let format = d3.format(",d")
function selectOccupation(d) {
// cleanup previous selected circle
if(current_circle !== undefined){
current_circle.attr("fill", d => "#d9edf7");
svg.selectAll("#details-popup").remove();
}
// select the circle
current_circle = d3.select(this);
current_circle.attr("fill","#bef8ff");
let textblock = svg.selectAll("#details-popup")
.data([d])
.enter()
.append("g")
.attr("id", "details-popup")
.attr("font-size", 14)
.attr("font-family", "helvetica")
.attr("text-anchor", "start")
.attr("transform", d => `translate(0, 100)`);
textblock.append("text")
.text("Type:"+ d.data.Type)
.attr("font-weight", "bold");
textblock.append("text")
.text(d => "1990 Road miles (billions): " + d.data.Y1990)
.attr("y", "32");
textblock.append("text")
.text(d => "2018 Road miles (billions): " + d.data.Y2018)
.attr("y", "48");
textblock.append("text")
.text(d => "*darker band indicates growth: " + d.data.Growth)
.attr("y", "60");
}
innerCircles.on("click", selectOccupation);
return svg.node()
}
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.
