Public
Edited
Aug 26, 2022
data_as_array = {
let data_as_text = await d3.text("https://raw.githubusercontent.com/johnhaldeman/talk-on-d3-basics/master/Summary_sommaire_2017_2026.csv");
return d3.csvParseRows(data_as_text);
}
{
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_grouped_as_json = {
const data = JSON.parse(JSON.stringify(highest_data_as_json));
let balance = [];
let surplus = [];
let shortage = [];
let balance_to_surplus = [];
let balance_to_shortage = [];
for(let i in data){
let record = data[i];
let recent_condititions = record.Recent_Labour_Market_Conditions.toUpperCase();
let future_condititions = record.Future_Labour_Market_Conditions.toUpperCase();
if(recent_condititions === "BALANCE" && future_condititions === "BALANCE"){
balance.push(record);
}
else if(recent_condititions === "SHORTAGE" && future_condititions === "SHORTAGE"){
shortage.push(record);
}
else if(recent_condititions === "SURPLUS" && future_condititions === "SURPLUS"){
surplus.push(record);
}
else if(recent_condititions === "BALANCE" && future_condititions === "SHORTAGE"){
balance_to_shortage.push(record);
}
else if(recent_condititions === "BALANCE" && future_condititions === "SURPLUS"){
balance_to_surplus.push(record);
}
}
return [
{Description: "Labour Market Outlook Remains Balanced", children: balance},
{Description: "Labour Market Outlook Remains Shortage", children: shortage},
{Description: "Labour Market Outlook Remains Surplus", children: surplus},
{Description: "Labour Market Balanced to Shortage", children: balance_to_shortage},
{Description: "Labour Market Balanced to Surplus", children: balance_to_surplus},
];
}
nodeHeirarchy = d3.hierarchy({
children: highest_data_grouped_as_json
})
.sum(d => d.Employment_High);
pack = d3.pack()
.size([600-2, 600 -2])
.padding(3)
root = pack.padding(5)(nodeHeirarchy)
root.descendants()
{
let width = 932;
let height = 932;
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
let pack = d3.pack()
.size([width - 2, height - 2])
.padding(3)
const nodeHeirarchy = d3.hierarchy({
children: highest_data_grouped_as_json
})
.sum(d => d.Employment_High);
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
const root = pack.padding(7)(nodeHeirarchy)
const leaf = svg.selectAll("g")
.data(root.descendants())
.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.height !== 0){
return "none";
}
if(d.data.isGrowing){
return "#5cb85c";
}
else{
return "#d9534f";
}
});
let innerCircles = leaf.append("circle")
.attr("r", d => {
let scale = d3.scaleSqrt()
.domain([0, d.data.Employment_High])
.range([0,d.r]);
return scale(d.data.Employment_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","#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");
}
innerCircles.on("click", selectOccupation);
return svg.node()
}
{
return drawFinal()
}
drawFinal = function(){
let width = 932;
let height = 932;
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
let pack = d3.pack()
.size([width - 2, height - 2])
.padding(3)
const nodeHeirarchy = d3.hierarchy({
children: highest_data_grouped_as_json
})
.sum(d => d.Employment_High);
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
const root = pack.padding(7)(nodeHeirarchy)
const leaf = svg.selectAll("g")
.data(root.descendants())
.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.height !== 0){
return "none";
}
if(d.data.isGrowing){
return "#5cb85c";
}
else{
return "#d9534f";
}
});
let innerCircles = leaf.append("circle")
.attr("r", d => {
let scale = d3.scaleSqrt()
.domain([0, d.data.Employment_High])
.range([0,d.r]);
return scale(d.data.Employment_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","#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");
}
innerCircles.on("click", selectOccupation);
const categories = root.children;
svg.selectAll(".categories")
.data(categories)
.enter()
.append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + d.r + 1})`)
.append("text")
.text(d => d.data.Description)
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
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.
