From b2b8830fdb0a670f5e44237db9c3b45ac3957d93 Mon Sep 17 00:00:00 2001 From: jjeeong17 Date: Fri, 25 Oct 2024 21:38:34 -0400 Subject: [PATCH] depth edited --- treemap/main.js | 181 ++++++++++++++++++++---------------------------- 1 file changed, 75 insertions(+), 106 deletions(-) diff --git a/treemap/main.js b/treemap/main.js index 396e024..bb47325 100644 --- a/treemap/main.js +++ b/treemap/main.js @@ -451,16 +451,21 @@ async function fetchData() { console.log(root.leaves()); + // Create group ID (ocean + newGroup) + const groupIDs = root + .leaves() + .map((d) => d.parent.data[0].replace(/\s+/g, '-') + '_' + d.data[0]); + // Create a group for each node const nodes = svg .selectAll('g') .data(root.leaves()) .enter() .append('g') - .attr('class', (d, i) => { - return root.leaves()[i].parent.data[0]; // Assuming this returns the class name - }) - .attr('transform', (d) => `translate(${d.x0},${d.y0})`); + .attr('transform', (d) => `translate(${d.x0},${d.y0})`) + .attr('id', (d, i) => { + return `${groupIDs[i]}`; + }); // Define colourScale const colourScale = d3 @@ -758,35 +763,35 @@ async function fetchData() { function getDetailedData(ocean) { switch (ocean) { - case 'Pacific': + case 'Pacific Ocean': return { Predator: pPredator, Prey: pPrey, Others: pOthers, }; - case 'Atlantic': + case 'Atlantic Ocean': return { Predator: atPredator, Prey: atPrey, Others: atOthers, }; - case 'Indian': + case 'Indian Ocean': return { Predator: iPredator, Prey: iPrey, Others: iOthers, }; - case 'South': + case 'South Ocean': return { Predator: sPredator, Others: sOthers, }; - case 'North': + case 'North Sea': return { Predator: nPredator, Others: nOthers, }; - case 'Arctic': + case 'Arctic Ocean': return { Predator: arPredator, }; @@ -831,6 +836,66 @@ async function fetchData() { //tree map description disappear when zoom in description.transition().duration(500).style('opacity', 0); + // Aggregate the data for the selected ocean and archetype + const selectedSeaname = d.parent.data[0]; + const selectedNewGroup = d.data[0]; + let rolledupData = getDetailedData(selectedSeaname)[selectedNewGroup]; + rolledupData = Array.from(rolledupData, ([key, value]) => ({ + name: key, + value, + })); + rolledupData = rolledupData.sort((a, b) => b.value - a.value); + + const secondTreemapRoot = d3 + .hierarchy({ children: rolledupData }, (d) => d.children) + .sum((d) => d.value); + + d3.treemap().size([width, height]).padding(3).round(true)( + secondTreemapRoot + ); + + // Create a group for each node + const groupID = `${selectedSeaname.replace( + /\s+/g, + '-' + )}_${selectedNewGroup}`; + const secondTreemap = d3.select(`#${groupID}`); + + if (secondTreemap.empty()) { + secondTreemap = svg.append('g').attr('id', groupID); + } + + secondTreemap + .selectAll('rect') + .data(secondTreemapRoot.leaves(), (d) => d.data.name) + .enter() + .append('rect') + .attr('class', 'detailed-node') + .attr('x', (d) => d.x0) + .attr('y', (d) => d.y0) + .attr('width', (d) => d.x1 - d.x0) + .attr('height', (d) => d.y1 - d.y0) + .attr('fill-opacity', 0.9) + .attr('stroke', 'none') + .attr('id', (d, i) => { + return `${groupID}_${d.data.name}`; + }) + .attr('fill', colourScale(selectedSeaname)); + + secondTreemap + .selectAll('text') + .data(secondTreemapRoot.leaves(), (d) => d.data.name) + .enter() + .append('text') + .text((d) => d.data.name) + .attr('class', 'detailed-node') + .attr('x', (d) => d.x0 + 10) + .attr('y', (d) => d.y0 + 25) + .style('font-family', "'Open Sans', sans-serif") + .style('font-weight', 'regular') + .style('fill', 'white') + .style('font-size', '14px'); + // Secondary Legend, appears when zoomed in and hides when zoom out -------------------------------------------- // Depth const legendDepth = { @@ -1036,102 +1101,6 @@ async function fetchData() { .transition() .duration(1200) .style('opacity', 1); - - // Fetch detailed data and update the treemap - const detailedData = getDetailedData( - 'Pacific', - 'Atlantic', - 'Indian', - 'South', - 'North', - 'Arctic' - ); - console.log('Detailed Data:', detailedData); - - if (Object.keys(detailedData).length > 0) { - const detailedRoot = d3 - .hierarchy({ - children: Object.entries(detailedData).map(([key, value]) => ({ - name: key, - children: Array.from(value, ([depthRange, count]) => ({ - name: getDepthRange(depthRange), - value: count, - })), - })), - }) - .sum((d) => d.value) - .sort((a, b) => b.value - a.value); - - console.log('Detailed Root:', detailedRoot); - - treemapLayout(detailedRoot); - - // const detailedNodes = svg.selectAll(".detailed-node") - // .data(detailedRoot.leaves()) - // .enter() - // .append("g") - // .attr("class", "detailed-node") - // .attr("transform", node => `translate(${x(node.x0)},${y(node.y0)})`); - - // detailedNodes.append("rect") - // .attr("width", node => x(node.x1) - x(node.x0)) - // .attr("height", node => y(node.y1) - y(node.y0)) - // .attr("fill", node => { - // const parentColor = colourScale(d.parent.data[0]); - // const shade = d3.scaleLinear() - // .domain([0, (detailedRoot.children ? detailedRoot.children.length : 1) - 1]) - // .range([0.3, 0.7]); // Make the shade range darker and wider - // return d3.color(parentColor).darker(shade(detailedRoot.children ? detailedRoot.children.indexOf(node) : 1)); - // }) - // .attr("fill-opacity", 1) - // .attr("stroke", "none"); - - // detailedNodes.append("text") - // .attr("x", 10) - // .attr("y", 25) - // .style("font-family", "'Open Sans', sans-serif") - // .style("font-weight", "regular") - // .style("fill", "white") - // .style("font-size", node => { - // const fontSize = Math.min((x(node.x1) - x(node.x0)) / 5, (y(node.y1) - y(node.y0)) / 5, 16); - // return fontSize < 10 ? "0px" : `${fontSize}px`; - // }) - // .text(node => getDepthRange(node.data.name)) - // .each(function(node) { - // const bbox = this.getBBox(); - // if (bbox.width > (x(node.x1) - x(node.x0)) || bbox.height > (y(node.y1) - y(node.y0))) { - // d3.select(this).remove(); - // } - // }); - - // // Add fade-in and scale animation for the detailed nodes - // setTimeout(() => { - // detailedNodes.style("opacity", 0) - // .attr("transform", node => `translate(${x(node.x0)},${y(node.y0)}) scale(0.1)`) - // .transition() - // .duration(1500) - // .style("opacity", 0.9) - // .attr("transform", node => `translate(${x(node.x0)},${y(node.y0)}) scale(1)`); - // }, 2000); - - // detailedNodes.append("text") - // .attr("x", 10) - // .attr("y", 25) - // .style("font-family", "'Open Sans', sans-serif") - // .style("font-weight", "regular") - // .style("fill", "white") - // .style("font-size", node => { - // const fontSize = Math.min((x(node.x1) - x(node.x0)) / 5, (y(node.y1) - y(node.y0)) / 5, 16); - // return fontSize < 10 ? "0px" : `${fontSize}px`; - // }) - // .text(node => getDepthRange(node.data.name)) - // .each(function(node) { - // const bbox = this.getBBox(); - // if (bbox.width > (x(node.x1) - x(node.x0)) || bbox.height > (y(node.y1) - y(node.y0))) { - // d3.select(this).remove(); - // } - // }); - } } nodes.on('click', function (event, d) {