Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CoinMatrix Bubbles - Live Crypto Visualizer</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    body {
      margin: 0;
      background: radial-gradient(circle at center, #0d1117, #000000);
      font-family: Arial, sans-serif;
      overflow: hidden;
    }

    #controls {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1000;
    }

    #controls button {
      margin-right: 5px;
      padding: 6px 10px;
      font-size: 14px;
      cursor: pointer;
      background-color: #1f1f1f;
      color: #fff;
      border: 1px solid #444;
      border-radius: 4px;
    }

    #controls button.active {
      background-color: #16c784;
      color: black;
    }

    #bubble-chart {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    .bubble {
      stroke: white;
      stroke-width: 1px;
    }

    text {
      text-anchor: middle;
      pointer-events: none;
      font-family: sans-serif;
    }

    .tooltip {
      position: absolute;
      background: rgba(0,0,0,0.85);
      color: white;
      padding: 8px 12px;
      border-radius: 5px;
      pointer-events: none;
      font-size: 13px;
      z-index: 9999;
    }

    .price-label {
      fill: #111;
      font-size: 11px;
      font-weight: bold;
    }

    .symbol-label {
      fill: white;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="controls">
    <button onclick="setIntervalType('24h')" class="active">24h</button>
    <button onclick="setIntervalType('7d')">7d</button>
    <button onclick="setIntervalType('30d')">30d</button>
  </div>
  <div id="bubble-chart"></div>

  <script>
    const width = window.innerWidth;
    const height = window.innerHeight;
    let intervalType = '24h';

    const svg = d3.select("#bubble-chart")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    const tooltip = d3.select("body")
      .append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

    function setIntervalType(type) {
      intervalType = type;
      document.querySelectorAll('#controls button').forEach(btn => {
        btn.classList.remove('active');
      });
      document.querySelector(`#controls button[onclick="setIntervalType('${type}')"]`).classList.add('active');
      updateBubbles();
    }

    function scaleRadius(marketCap) {
      const minCap = 1e7;
      const maxCap = 1e11;
      const minR = 18;
      const maxR = 65;
      const scaled = Math.log10(Math.max(minCap, Math.min(maxCap, marketCap)));
      return ((scaled - 7) / (11 - 7)) * (maxR - minR) + minR;
    }

    function colorByChange(change) {
      return change > 0 ? "#16c784" : "#ea3943";
    }

    async function fetchData() {
      const res = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=200&page=1&sparkline=false&price_change_percentage=24h,7d,30d");
      const data = await res.json();
      return data.map((coin, index) => ({
        index,
        id: coin.id,
        symbol: coin.symbol.toUpperCase(),
        price: coin.current_price,
        market_cap: coin.market_cap,
        change24h: coin.price_change_percentage_24h_in_currency,
        change7d: coin.price_change_percentage_7d_in_currency,
        change30d: coin.price_change_percentage_30d_in_currency,
        radius: scaleRadius(coin.market_cap)
      }));
    }

    let simulation, node;

    async function updateBubbles() {
      const data = await fetchData();

      svg.selectAll("g").remove();

      simulation = d3.forceSimulation(data)
        .force("charge", d3.forceManyBody().strength(0))
        .force("center", d3.forceCenter(width / 2, height / 2))
        .force("collision", d3.forceCollide().radius(d => d.radius + 1.5))
        .on("tick", ticked);

      node = svg.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .on("mouseover", (event, d) => {
          tooltip.transition().duration(200).style("opacity", 0.9);
          tooltip.html(`
            <strong>${d.symbol}</strong><br/>
            $${d.price.toFixed(2)}<br/>
            24h: ${d.change24h?.toFixed(2)}%<br/>
            7d: ${d.change7d?.toFixed(2)}%<br/>
            30d: ${d.change30d?.toFixed(2)}%
          `)
          .style("left", (event.pageX + 10) + "px")
          .style("top", (event.pageY - 28) + "px");
        })
        .on("mouseout", () => {
          tooltip.transition().duration(500).style("opacity", 0);
        });

      node.append("circle")
        .attr("r", d => d.radius)
        .attr("fill", d => {
          if (intervalType === '7d') return colorByChange(d.change7d);
          if (intervalType === '30d') return colorByChange(d.change30d);
          return colorByChange(d.change24h);
        })
        .attr("class", "bubble");

      node.append("text")
        .attr("class", "symbol-label")
        .text(d => d.symbol)
        .attr("dy", "-0.4em")
        .style("font-size", d => Math.max(10, d.radius / 2.5) + "px");

      node.append("text")
        .attr("class", "price-label")
        .text(d => `$${d.price.toFixed(2)}`)
        .attr("dy", "1.1em")
        .style("font-size", d => Math.max(9, d.radius / 3) + "px");

      let tick = 0;
      function ticked() {
        tick += 0.015;
        node.attr("transform", d => {
          const floatY = Math.sin(tick + d.index * 0.2) * 1.8;
          const x = Math.max(d.radius, Math.min(width - d.radius, d.x));
          const y = Math.max(d.radius, Math.min(height - d.radius, d.y + floatY));
          return `translate(${x},${y})`;
        });
      }
    }

    updateBubbles();
  </script>
</body>
</html>


Amit & Crypo

Crypto Content Creator