singaporeBudget= FileAttachment("2022-budget-sg@1.csv").csv();
singaporeBudget[99] //Find the 100th object
//applying d3.groups to group the data into arrays
groupedDatawithArray= d3.groups(desiredData, d => d.sector);
//applying d3.group to map it.
groupedData = d3.group(desiredData, d => d.sector);
hierarchycount = d3.hierarchy(groupedData);
//creating the value,x,y,r
hierarchy = d3.hierarchy(groupedData).sum(d => d.expenditure);
circlePackingChart = {
const root = pack(hierarchy);
//console.log(root)
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif")
// .attr("text-anchor", "middle");
// create the shadow effect
const shadow = DOM.uid("shadow");
svg.append("filter")
.attr("id", shadow.id)
.append("feDropShadow")
.attr("flood-opacity", 0.3)
.attr("dx", 0)
.attr("dy", 1);
//create the nodes (circles + shadow in the hierarchical mode)
const node = svg.selectAll("g")
.data(d3.group(root.descendants(), d => d.height))
.join("g")
.attr("filter", shadow)
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x},${d.y})`)
node.append("circle")
.attr("r", d => d.r) //radius computed by the D3 pack module
.attr("fill", d => color(d.height)) //color based on the node depth
.call(addTooltip); //Add a tooltip for each circle
const leaf = node.filter(d => !d.children); //filter out the data if its not d.children
leaf.select("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
return svg.node();
}
pack = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(hierarchy);
pack(hierarchy);
addTooltip = node => {
node.on("mouseover", function(e,d) {
if(d.depth != 0){
tooltip.html(tooltipMesage(d));
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
.style('visibility', 'visible');
}else{
tooltip.style('visibility', 'hidden');
}
})
.on('mousemove', function(e) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
})
.on("mouseout", function(e,d) {
tooltip
.style('visibility', 'hidden')
});
return node;
}
tooltip = d3.select('body')
.append('div')
.attr('id', 'barchart-tooltip')
.style('position', 'absolute')
.style('z-index', '1')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('font-size', '14px')
.style('max-width', '200px')
.style('border-radius', '4px')
.style('color', '#fff');
tooltipMesage = d =>{
let msg = '';
switch(d.depth){
case 1:
msg = '<b>Sector</b>: ' + d.data[0] +'<br/>' +
'<b>Amount</b>: ' + format(d.value) +'$';;
break;
case 2:
msg = '<b>Programme</b>: ' + d.data.programme +'<br/>' +
'<b>Amount</b>: ' + format(d.value) +'$';
;
break;
// case 3:
// msg = '<b>Department</b>: '+d.data.department +'<br/>'+
// '<b>Program</b>: '+d.data.program +'<br/>'+
// '<b>Chapter</b>: '+d.data.chapter +'<br/>'+
// '<b>Article</b>: '+d.data.article +'<br/>'+
// '<b>Amount</b>: '+format(d.data.amount)+'€';
// break;
}
return msg;
}
color = d3.scaleSequential([8, 0], d3.interpolateMagma)
format = d3.format(".3s")
height = 700;
width = 700;
margin = ({top: 20, right: 20, bottom: 20, left: 20});
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.
