Isotope Experiment

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    * { box-sizing: border-box; }

body {
      font-family: sans-serif;
    }

/* ---- button ---- */

.button {
      display: inline-block;
      padding: 0.5em 1.0em;
      background: #EEE;
      border: none;
      border-radius: 7px;
      background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
      color: #222;
      font-family: sans-serif;
      font-size: 16px;
      text-shadow: 0 1px white;
      cursor: pointer;
    }

.button:hover {
      background-color: #8CF;
      text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
      color: #222;
    }

.button:active,
    .button.is-checked {
      background-color: #28F;
    }

.button.is-checked {
      color: white;
      text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
    }

.button:active {
      box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
    }

/* ---- button-group ---- */

.button-group {
      margin-bottom: 20px;
    }

.button-group:after {
      content: '';
      display: block;
      clear: both;
    }

.button-group .button {
      float: left;
      border-radius: 0;
      margin-left: 0;
      margin-right: 1px;
    }

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
    .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
      border: 1px solid #333;
    }

/* clear fix */
    .grid:after {
      content: '';
      display: block;
      clear: both;
    }

/* ---- .element-item ---- */

.element-item {
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      margin: 5px;
      padding: 10px;
      background: #888;
      color: #262524;
    }

.element-item > * {
      margin: 0;
      padding: 0;
    }

.element-item .name {
      position: absolute;

left: 10px;
      top: 60px;
      text-transform: none;
      letter-spacing: 0;
      font-size: 12px;
      font-weight: normal;
    }

.element-item .symbol {
      position: absolute;
      left: 10px;
      top: 0px;
      font-size: 42px;
      font-weight: bold;
      color: white;
    }

.element-item .number {
      position: absolute;
      right: 8px;
      top: 5px;
    }

.element-item .weight {
      position: absolute;
      left: 10px;
      top: 76px;
      font-size: 12px;
    }

#grid {
      position: relative;
      width: 60%;
      margin: 0 auto;
      padding: 0; /* Clears unordered list default of 40px */
  }

.clear:after {
      content: "";
      display: block;
      clear: both;
  }

#grid li {
      list-style-type: none;
      position: relative;
      float: left;
      width: 27.85714285714286%;
      padding: 0 0 32.16760145166612% 0;
      -o-transform: rotate(-60deg) skewY(30deg);
      -moz-transform: rotate(-60deg) skewY(30deg);
      -webkit-transform: rotate(-60deg) skewY(30deg);
      -ms-transform: rotate(-60deg) skewY(30deg);
      transform: rotate(-60deg) skewY(30deg);
      overflow: hidden;
      visibility: hidden;
  }
    
 	#grid li * {
    visibility: visible;
	}

#grid li .hexagon {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fdbf00;
      -o-transform: skewY(-30deg) rotate(60deg);
      -moz-transform: skewY(-30deg) rotate(60deg);
      -webkit-transform: skewY(-30deg) rotate(60deg);
      -ms-transform: skewY(-30deg) rotate(60deg);
      transform: skewY(-30deg) rotate(60deg);
      overflow: hidden;
  }

#grid li:nth-child(3n+2) {
    margin: 0 1%;
  }

#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
      margin-top: -6.9285714285%;
      margin-bottom: -6.9285714285%;
      -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
      -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
      -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
      -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
      transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
    
  #grid li:nth-child(6n+4) { 
      margin-left: 0.5%;
  }

</style>
</head>
<h1>Isotope - filtering &amp; sorting</h1>
<h2>Filter</h2>
<div id="filters" class="button-group">  <button class="button is-checked" data-filter="*">show all</button>
  <button class="button" data-filter=".metal">metal</button>
  <button class="button" data-filter=".transition">transition</button>
  <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
  <button class="button" data-filter=":not(.transition)">not transition</button>
  <button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>
  <button class="button" data-filter="numberGreaterThan50">number > 50</button>
  <button class="button" data-filter="ium">name ends with &ndash;ium</button>
</div>

<h2>Sort</h2>
<div id="sorts" class="button-group">  <button class="button is-checked" data-sort-by="original-order">original order</button>
  <button class="button" data-sort-by="name">name</button>
  <button class="button" data-sort-by="symbol">symbol</button>
  <button class="button" data-sort-by="number">number</button>
  <button class="button" data-sort-by="weight">weight</button>
  <button class="button" data-sort-by="category">category</button>
</div>

<body>
  <script>
   
   
    // init Isotope
    var $grid = $('.grid').isotope({
      itemSelector: '.element-item',
      layoutMode: 'fitRows',
      getSortData: {
        name: '.name',
        symbol: '.symbol',
        number: '.number parseInt',
        category: '[data-category]',
        weight: function( itemElem ) {
          var weight = $( itemElem ).find('.weight').text();
          return parseFloat( weight.replace( /[]/g, '') );
        }
      }
    });

// bind filter button click
    d3.select('#filters').selectAll("button").on( 'click', function() {
      var filterValue = d3.select( this ).attr('data-filter');
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $('.grid').isotope({ filter: filterValue });
    });

// bind sort button click
    d3.select('#sorts').selectAll("button").on( 'click', function() {
      var sortByValue = d3.select(this).attr('data-sort-by');
      $('#grid').isotope({ sortBy: sortByValue });
    });

// change is-checked class on buttons
   	d3.select('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup =  d3.select( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });

</script>
</body>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js