Cascaded-Treemap by @thutam89 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<abbr>Inserisce abbreviazioni e acronimi
<aside>Definisce un contenuto separato dal testo perincipale
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<div>Crea contenitori generici o sezioni in una pagina
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML

Users

Log in to search for users

Explore

Find inspiration

Esercizi 05/03/2024 es6

TechForge | Riparazioni e Stampa 3D

Review of Functions I

riepilogativo 2

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Cascaded Treemap</title>
    <style>
      body { font-family: sans-serif; }
      .label { font-size: 10px; pointer-events: none; }
    </style>
  </head>
  <body>
    <button id="download-btn">Download SVG</button>
    <svg id="treemapID" width="800" height="500"></svg>
    
    <!-- ✅ Load D3 from CDN -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    
    <!-- ✅ Link to your script -->
    <script type="module" src="./script.js"></script>
  </body>
</html>

// ✅ No need to import D3 again — already loaded via CDN in index.html

const data = {
  name: 'root',
  children: [
    { name: 'A', value: 100 },
    {
      name: 'B',
      children: [
        { name: 'B1', value: 50 },
        { name: 'B2', value: 30 },
        {
          name: 'B3',
          children: [
            { name: 'B3.1', value: 20 },
            { name: 'B3.2', value: 10 },
          ],
        },
      ],
    },
  ],
};

const width = 800,
  height = 500,
  offset = 4;
const svg = d3.select('svg');

const root = d3
  .hierarchy(data)
  .sum(d => d.value || 0)
  .sort((a, b) => b.value - a.value);

d3.treemap().size([width, height]).padding(1).round(true)(root);

function cascade(root, offset) {
  root.eachAfter(node => {
    let x = 0,
      y = 0;
    if (node.children) {
      for (const child of node.children) {
        if (child.x0 === node.x0) x++;
        if (child.y0 === node.y0) y++;
      }
    }
    node.x0 += x * offset;
    node.x1 += x * offset;
    node.y0 += y * offset;
    node.y1 += y * offset;
  });
}

cascade(root, offset);

function downloadSVG(svgElementId, filename = 'chart.svg') {
  const svg = document.getElementById(svgElementId);
  const serializer = new XMLSerializer();
  let source = serializer.serializeToString(svg);

  // Add namespaces if missing
  if (!source.includes('xmlns="http://www.w3.org/2000/svg"')) {
    source = source.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
  }

  // Create a Blob and trigger download
  const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// ? Pastel color scale using ordinal colors
const pastelColors = [
  '#FFB3BA',
  '#FFDFBA',
  '#FFFFBA',
  '#BAFFC9',
  '#BAE1FF',
  '#E0BBE4',
];

const color = d3
  .scaleOrdinal()
  .domain(d3.range(root.height + 1))
  .range(pastelColors);

const nodes = svg
  .selectAll('g')
  .data(root.descendants())
  .join('g')
  .attr('transform', d => `translate(${d.x0},${d.y0})`);

nodes
  .append('rect')
  .attr('width', d => d.x1 - d.x0)
  .attr('height', d => d.y1 - d.y0)
  .attr('fill', d => color(d.depth))
  .attr('stroke', 'white');

nodes
  .append('text')
  .attr('x', 4)
  .attr('y', 12)
  .attr('class', 'label')
  .text(d => (d.children ? '' : d.data.name));

document.getElementById('download-btn').addEventListener('click', () => {
  downloadSVG('treemapID');
});