<section id="use-join">
    <h1>Fetching data from an external API</h1>
    <p>(this uses the d3 .join() method which probably doesn't make a huge difference right now)</p>

    <button id="trigger">Load data</button>

    <div class="block">
        <h2>The SVG Output</h2>
        <p>Hover on bars for property title</p>
        <div id="svgOutput"></div>
    </div>

    <div class="block">
        <h2>The text output</h2>
        <div id="outputBox"></div>
    </div>
</section>

<div class="templates">
    <template id="result_box">
        <div class="results_box">
            <div class="result">
                <span class="property"></span>: <span class="count"></span>
            </div>
        </div>
    </template>
</div>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../js/components/use-join.js"></script>
<section id="use-join">
    <h1>Fetching data from an external API</h1>
    <p>(this uses the d3 .join() method which probably doesn't make a huge difference right now)</p>

    <button id="trigger">Load data</button>

    <div class="block">
        <h2>The SVG Output</h2>
        <p>Hover on bars for property title</p>
        <div id="svgOutput"></div>
    </div>

    <div class="block">
        <h2>The text output</h2>
        <div id="outputBox"></div>
    </div>
</section>

<div class="templates">
    <template id="result_box">
        <div class="results_box">
            <div class="result">
                <span class="property"></span>: <span class="count"></span>
            </div>
        </div>
    </template>
</div>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ path '/js/components/use-join.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("use-join active");
    
        const button = document.querySelector('#trigger');
        const outputBox = document.querySelector('#outputBox');
        const svgOutput = document.querySelector('#svgOutput');
    
        button.addEventListener('click', function() {
          const spinnerA = document.createElement('div');
          spinnerA.classList.add('spinner');
          outputBox.appendChild(spinnerA);
    
          const spinnerB = document.createElement('div');
          spinnerB.classList.add('spinner');
          svgOutput.appendChild(spinnerB);
    
          fetch('https://my.api.mockaroo.com/chart-data.json?key=0b401b10&count=25')
            .then(response => response.json())
            .then(data => {
              outputBox.removeChild(spinnerA);
              svgOutput.removeChild(spinnerB);
    
              // d3 version of results
    
              const w = 1000;
              const h = 500;
              const padding = 60;
    
              const svg = d3.select("#svgOutput")
                .append("svg");
    
              svg.attr("viewBox", [0, 0, w, h])
                .attr("preserveAspectRatio", "xMidYMid meet");
    
              const yScale = d3.scaleLinear()
                .domain([0, d3.max(data, (d) => d.count)])
                .range([25, h - padding]);
    
              svg.selectAll("rect.bar")
                .data(data)
                .join('rect')
                  .attr('class', 'bar')
                  .attr('x', (d, i) => {
                    return i * (w / data.length) + 2;
                  })
                  .attr("y", (d) => {
                    return h - yScale(d.count);
                  })
                  .attr("width", () => {
                    return (w / data.length) - 4;
                  })
                  .attr("height", (d) => {
                    return yScale(d.count);
                  })
                  .attr("data-count", (d) => (d.count))
                  .append('title')
                  .text((d) => d.property);
    
              svg.selectAll("text.count")
                .data(data)
                .join("text")
                  .attr('class', 'count')
                  .text((d) => (d.count))
                  .attr('x', (d, i) => {
                    return i * (w / data.length) + 10;
                  })
                  .attr("y", (d) => {
                    return h - yScale(d.count) - 10;
                  })
                  .style('font-size', '1rem')
                  .style('font-weight', 'bold')
                  .style('font-family', 'Courier New')
                  .style('fill', 'navy');
    
              // text version of results
    
              data.forEach(function(item) {
                let template = document.querySelector('#result_box');
                let resultBox = document.importNode(template.content, true);
    
                resultBox.querySelector('.property').innerHTML = item.property;
                resultBox.querySelector('.count').innerHTML = item.count;
    
                outputBox.appendChild(resultBox);
              })
            })
        })
      });
    })();
    
  • URL: /components/raw/use-join/use-join.js
  • Filesystem Path: components/01-misc/04-use-join/use-join.js
  • Size: 2.9 KB
  • Content:
    #use-join {
      @keyframes spin {
        0% {
          transform: rotate(0);
        }
    
        100% {
          transform: rotate(180deg);
        }
      }
    
      #outputBox {
        margin: 2rem 0;
        padding: 2rem;
        border: 2px solid aliceblue;
      }
    
      .spinner {
        width: 4px;
        height: 40px;
        background-color: darkcyan;
        animation: 0.75s ease-in-out both alternate infinite spin;
      }
    
      .results_box {
        margin: 0 0 1rem 0;
        .property {
          font-weight: bold;
        }
      }
    
      #svgOutput {
        margin: 2rem 0;
      }
    
      svg {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid navy;
        background-color: azure;
    
        .bar {
          fill: darkslategray;
        }
      }
    
      .block {
        margin: 2rem 0;
        padding: 2rem 0;
        border-top: 1px solid cadetblue;
      }
    }
    
  • URL: /components/raw/use-join/use-join.scss
  • Filesystem Path: components/01-misc/04-use-join/use-join.scss
  • Size: 768 Bytes

No notes defined.