Cascaded-Treemap by @thutam89 - Codewith.it

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

Referenze

multipart/form-dataCodifica dei caratteri di un form
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<blockquote>Inserisce citazioni in un documento HTML
<abbr>Inserisce abbreviazioni e acronimi
formnovalidateImpedisce la convalida di un singolo elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Meraviglie d\'Italia

Navbar Example 3

esercitazione n1

Calcolatrice classica

nomedascegliere

esame di informatica

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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');
});