JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
<script src="https://unpkg.com/[email protected]/crossfilter.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dc@3/dc.css">
<script src="https://unpkg.com/dc@3/dc.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
<div id="packetPie"></div>
<h3>group by mac, reduce counts (first 5)</h3>
<pre id="macPacket"></pre>
<h3>array of keys for each value</h3>
<pre id="valueKeys"></pre>
<h3>key: count, value: macs (first 2)</h3>
<pre id="keyCount-valueMacs"></pre>

CSS

body {
  font-family: sans-serif;
}

#packetPie {
  float: none;
}

JavaScript

//function plotVendor() {

var packets = [
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:26",
    "longitude": -1.9361,
    "mac": "dc:d9:16:3d",
    "packet": "AP-RES",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:26",
    "longitude": -1.936,
    "mac": "dc:d9:16:3d",
    "packet": "PR-REQ",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:34",
    "longitude": -1.9361,
    "mac": "dc:d9:16:3d",
    "packet": "PR-REQ",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:34",
    "longitude": -1.936,
    "mac": "dc:d9:16:3d",
    "packet": "AP-RES",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:26",
    "longitude": -1.9361,
    "mac": "dc:da:16:3d",
    "packet": "AP-RES",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:26",
    "longitude": -1.936,
    "mac": "dc:da:16:3d",
    "packet": "PR-REQ",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:34",
    "longitude": -1.9361,
    "mac": "dc:d9:16:3a",
    "packet": "PR-REQ",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
    "vendor": "Huawei Technologies Co.Ltd",
    "SSID": "eduroam",
    "timestamp": "2018-07-10 12:25:34",
    "longitude": -1.936,
    "mac": "dc:d9:16:3b",
    "packet": "AP-RES",
    "latitude": 52.4505,
    "identifier": "Client"
  },
  {
  ...