<section id="bar-chart-2">
    <div class="simple-grid">
        <div class="intro">
            <h1>Data</h1>
        </div>

        <div class="intro">

            <p>is hidden inside a script tag right here</p>

            <script>
                const dataset = {
                    "blue": 1,
                    "red": 3,
                    "dodgerblue": 3,
                    "forestgreen": 3,
                    "gray": 10,
                    "yellow": 15,
                    "blueviolet": 12,
                    "cadetblue": 5,
                    "dimgray": 20
                }
            </script>
        </div>
    </div>

    <div class="outputBlock">
        <div class="text">
            <h2>The graph</h2>
            <p>click a bar to see the count writ large</p>
        </div>

        <div id="svgOutput"></div>
    </div>
</section>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../js/components/bar-chart-2.js"></script>
<section id="bar-chart-2">
    <div class="simple-grid">
        <div class="intro">
            <h1>Data</h1>
        </div>

        <div class="intro">

            <p>is hidden inside a script tag right here</p>

            <script>
                const dataset = {
                    "blue": 1,
                    "red": 3,
                    "dodgerblue": 3,
                    "forestgreen": 3,
                    "gray": 10,
                    "yellow": 15,
                    "blueviolet": 12,
                    "cadetblue": 5,
                    "dimgray": 20
                }
            </script>
        </div>
    </div>

    <div class="outputBlock">
        <div class="text">
            <h2>The graph</h2>
            <p>click a bar to see the count writ large</p>
        </div>

        <div id="svgOutput"></div>
    </div>
</section>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ path '/js/components/bar-chart-2.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("bar-chart-2 active");
    
        // Let's get this party started.
        console.log("Hello from the main app file");
    
        const button = document.querySelector("#story_submit");
    
        console.dir(dataset);
    
        let datasetArray = [];
        for (var prop in dataset) {
          if (Object.prototype.hasOwnProperty.call(dataset, prop)) {
            datasetArray.push({
              'property': prop,
              'count': dataset[prop]
            })
          }
        }
    
        datasetArray.sort(function (x, y) {
          return d3.ascending(x.count, y.count);
        })
    
        // the d3 part
    
        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(datasetArray, (d) => d.count)])
          .range([25, h - padding]);
    
        svg.selectAll("rect.bar")
          .data(datasetArray)
          .enter()
          .append('rect')
          .attr('class', 'bar')
          .attr('x', (d, i) => {
            return i * (w / datasetArray.length) + 2;
          })
          .attr("y", (d) => {
            return h - yScale(d.count);
          })
          .attr("width", () => {
            return (w / datasetArray.length) - 4;
          })
          .attr("height", (d) => {
            return yScale(d.count);
          })
          .attr("data-count", (d) => (d.count))
          .on("click", barClickHandler);
    
        svg.selectAll("text.title")
          .data(datasetArray)
          .enter()
          .append("text")
          .attr('class', 'title')
          .text((d) => (d.property))
          .attr('x', (d, i) => {
            return i * (w / datasetArray.length) + 10;
          })
          .attr("y", (d) => {
            return h - 10;
          })
          .style('font-family', 'Courier New')
          .style('font-size', '0.75rem')
          .style('font-weight', 'bold')
          .style('fill', 'white');
    
        svg.selectAll("text.count")
          .data(datasetArray)
          .enter()
          .append("text")
          .attr('class', 'count')
          .text((d) => (d.count))
          .attr('x', (d, i) => {
            return i * (w / datasetArray.length) + 20;
          })
          .attr("y", (d) => {
            return h - yScale(d.count) - 10;
          })
          .style('font-size', '0.75rem')
          .style('font-weight', 'bold')
          .style('font-family', 'Courier New')
          .style('fill', 'navy')
          .attr('transform', (d, i) => {
            return `rotate(-90 ${i * (w / datasetArray.length) + 20} ${h - yScale(d.count) - 10}) `
          });
    
    
        function barClickHandler(d, i) {
          console.log("click handled");
    
          if (svg.select('.selected').size() > 0) {
            svg.select('.selected').classed('selected', false);
          }
    
          d3.select(this).classed('selected', true);
    
          svg.select('text.bigLabel').remove();
    
          svg.append('text')
            .attr("x", "10")
            .attr("y", "70")
            .attr('class', 'bigLabel')
            .style('font-family', 'Georgia, serif')
            .style('font-size', '4rem')
            .style('font-weight', 'bold')
            .style('fill', d.property)
            .text(d.property + " ∙ " + d.count);
        }
    
    
      });
    })();
    
  • URL: /components/raw/bar-chart-2/bar-chart-2.js
  • Filesystem Path: components/02-starter-bar-charts/02-bar-chart-2/bar-chart-2.js
  • Size: 3.2 KB
  • Content:
    #bar-chart-2 {
      margin: 1rem;
      padding: 1rem;
      background-color: antiquewhite;
    
      font-family: 'Helvetica Neue', sans-serif;
    
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: normal;
    
      > * {
        margin-bottom: 2rem;
      }
    
      .simple-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2rem;
      }
    
      .intro {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
    
        h1 {
          text-align: right;
          text-transform: uppercase;
        }
      }
    
    
      #output {
        font-family: 'Courier New';
        width: 100%;
    
        ul {
          list-style: none;
          display: grid;
          padding: 0;
          width: 100%;
          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          grid-gap: 1rem 1rem;
    
          li {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: normal;
            border: 1px dotted cornsilk;
            padding: 0.25rem 0;
          }
        }
      }
    
      #svgOutput {
        width: 100%;
      }
    
      svg {
        background: aliceblue;
        border: 1px solid navy;
        width: 100%;
        height: auto;
    
        rect {
          fill: cadetblue;
          transition: fill 0.25s ease;
          stroke: darkcyan;
          stroke-width: 1px;
    
          &.selected {
            fill: aqua;
          }
    
          &:hover {
            fill: cornflowerblue;
    
            &.selected {
              fill: aqua;
            }
          }
        }
    
      }
    
      .outputBlock {
        width: 100%;
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-gap: 2rem;
      }
    
    }
    
  • URL: /components/raw/bar-chart-2/bar-chart-2.scss
  • Filesystem Path: components/02-starter-bar-charts/02-bar-chart-2/bar-chart-2.scss
  • Size: 1.6 KB
  • Handle: @bar-chart-2
  • Preview:
  • Filesystem Path: components/02-starter-bar-charts/02-bar-chart-2/bar-chart-2.hbs

No notes defined.