Filtering and kCores

This demo illustrates the power of selective filtering to provide focus on a subset of data. It uses the graph's kCores to show which nodes have a higher degree of 'connectedness' than others.

Filtering

The opening state of the graph shows the full dataset; all suspects in all countries are displayed. The result is a typically complex and hard to understand network.

By controlling the displayed data, the user can make decisions on information they are interested in by filtering out certain countries or nodes with low 'connectedness'.

kCores

The kCores parameter can be adjusted to show only those nodes (individuals) that are connected to at least a defined number of other nodes. For example, a setting of '1' will filter all nodes that have less than 1 connection to another node, so all the 'singletons' will be hidden. A setting of '4' will hide all nodes that only have connections to 3 or fewer nodes, and will repeat this until all remaining nodes have at least 4 connections. Try setting kCores to '8' to see the dramatic simplification of the graph.

It is clear that kCores is a powerful way to show only more connected nodes; by sequentially increasing the parameter the user can explore the relations of highly connected nodes which are typically significant in a network.

Key functions used:

Code

import KeyLines from "keylines";
import { data } from "./data.js";

let chart;
let kCoresResult;
const graphEngine = KeyLines.getGraphEngine();
const kCoresEl = document.getElementById("slider");
let filterCountries;
let k;

// Runs an organic layout
async function doLayout() {
  await chart.layout("organic", {
    time: 400,
    easing: "linear",
    mode: "adaptive",
  });
}

// Append a new checkbox with label for each country
function createCheckboxMarkup(element, countries) {
  countries.forEach((country) => {
    const newCheckBoxItem = document.createElement("label");
    const countryName = country.country;
    const countryCount = country.count;

    newCheckBoxItem.innerHTML = `
      <input type='checkbox' id=${countryName} disabled=true checked>
      <img src='/public/images/flags/${countryName}.png' style='width: 16px; height: 16px')>
      ${countryName} (${countryCount})`;

    element.append(newCheckBoxItem);
  });
}

function displayCheckboxItems(items) {
  const checkboxColumn1El = document.getElementById("checkboxColumn1");
  const checkboxColumn2El = document.getElementById("checkboxColumn2");

  // Count occurrences of each country
  const countries = {};
  items.forEach((item) => {
    if (item.type === "node") {
      const country = item.d.country;
      countries[country] = (countries[country] || 0) + 1;
    }
  });
  // Convert into array and sort countries in descending order of occurrences
  const countryCounts = Object.keys(countries).map((country) => ({
    country,
    count: countries[country],
  }));
  countryCounts.sort((a, b) => b.count - a.count);

  // Show each country as a checkbox in two columns
  createCheckboxMarkup(checkboxColumn1El, countryCounts.slice(0, 13));
  createCheckboxMarkup(checkboxColumn2El, countryCounts.slice(13));
}

// Model the chart state from original data and user selection
// We include all links as the load function will disregard links that don't have both ends present
function getChartModel() {
  const items = data.items.filter(
    (item) => item.type === "link" || filterCountries.includes(item.d.country),
  );
  return { type: "LinkChart", items };
}

// Returns a new kCores result
function getNewkCores() {
  graphEngine.load(getChartModel());
  return graphEngine.kCores();
}

// Sets the value of filters and kCore values
function setFilters() {
  k = kCoresEl.value;
  filterCountries = [
    ...document.querySelectorAll("input[type=checkbox]:checked"),
  ].map((checkbox) => checkbox.id);
  kCoresResult = getNewkCores();
}

function matchesFilters(item) {
  const countryIsSelected = filterCountries.includes(item.d.country);
  const kCoreIsValid = kCoresResult.values[item.id] >= k;
  return kCoreIsValid && countryIsSelected;
}

function toggleInteraction() {
  const inputItems = document.querySelectorAll("#rhsForm input");
  // Filter the chart when any checkbox is changed
  inputItems.forEach((inputItem) => {
    inputItem.disabled = !inputItem.disabled;
  });
  // focus back on the slider to stop Edge requiring 2 taps
  kCoresEl.focus();
}

// Filter the chart based on user selections
async function doFiltering() {
  setFilters();
  toggleInteraction();
  // Filter the chart and run a layout
  await chart.filter(matchesFilters, { type: "node" });
  await doLayout();
  toggleInteraction();
}

function initialiseInteractions() {
  toggleInteraction();
  const checkBoxes = [...document.querySelectorAll("input[type=checkbox]")];

  // Set the slider max value from kCoresResultAll
  kCoresEl.setAttribute("max", kCoresResult.maximumK);

  // Filter the chart when any checkbox is changed
  checkBoxes.forEach((checkbox) => {
    checkbox.addEventListener("click", doFiltering);
  });

  // Filter the chart when all countries are selected
  document.getElementById("selectAll").addEventListener("click", () => {
    checkBoxes.forEach((checkbox) => {
      checkbox.checked = "checked";
    });
    doFiltering();
  });

  // Filter the chart when all countries are cleared
  document.getElementById("clearAll").addEventListener("click", () => {
    checkBoxes.forEach((checkbox) => {
      checkbox.checked = false;
    });
    doFiltering();
  });

  // Filter the chart when slider is changed
  kCoresEl.addEventListener("change", () => {
    const kCoresValue = kCoresEl.value;
    document.getElementById("kCoresValue").innerHTML = ` ${kCoresValue}`;
    doFiltering();
  });
}

async function loadKeyLines() {
  const options = {
    logo: { u: "/public/images/Logo.png" },
    handMode: true,
  };
  chart = await KeyLines.create({ container: "klchart", options });

  displayCheckboxItems(data.items);

  chart.load(data);
  // Calculate the initial core values
  kCoresResult = chart.graph().kCores();
  await doLayout();
  initialiseInteractions();
}

window.addEventListener("DOMContentLoaded", loadKeyLines);

Data

export const data = {
  type: "LinkChart",
  items: [
    {
      id: "N1",
      t: "Hassan al Fadli",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N2",
      t: "Nabil ibn al-Salim",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N3",
      t: "Mustafa al-Bakr",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N4",
      t: "Ibrahim Abd Bakr",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N5",
      t: "Amir Abdal Faruq",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N6",
      t: "Omar Abu Omari",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N7",
      t: "Sami al Omari",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N8",
      t: "Yusuf al-Fadli",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N9",
      t: "Tariq ibn Bakr",
      c: "#969696",
      tc: false,
      d: {
        country: "Unknown",
      },
      type: "node",
    },
    {
      id: "N10",
      t: "Yusuf Abd Fadli",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N11",
      t: "Ahmed al Rahman",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N12",
      t: "Zaid Abdal Faruq",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N13",
      t: "Yusuf ibn Anwar",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N14",
      t: "Mustafa Abu Fadli",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N15",
      t: "Nabil Abd Najjar",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N16",
      t: "Faisal ibn al-Qureshi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N17",
      t: "Faisal al Salim",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N18",
      t: "Tariq Abdal Zaman",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N19",
      t: "Karim al Najjar",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N20",
      t: "Zaid ibn Faruq",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N21",
      t: "Ahmed ibn al-Faruq",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N22",
      t: "Saad al-Omari",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N23",
      t: "Sami ibn Shafi",
      u: "/public/images/flags/Jordan.png",
      d: {
        country: "Jordan",
      },
      type: "node",
    },
    {
      id: "N24",
      t: "Zaid al Hassan",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N25",
      t: "Ali al-Zaman",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N26",
      t: "Faisal Abdal Ghamdi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N27",
      t: "Tariq al Bakr",
      u: "/public/images/flags/Sudan.png",
      d: {
        country: "Sudan",
      },
      type: "node",
    },
    {
      id: "N28",
      t: "Saad ibn Omari",
      u: "/public/images/flags/Kuwait.png",
      d: {
        country: "Kuwait",
      },
      type: "node",
    },
    {
      id: "N29",
      t: "Bilal al Najjar",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N30",
      t: "Omar al-Omari",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N31",
      t: "Faisal ibn Tahir",
      u: "/public/images/flags/Britain.png",
      d: {
        country: "Britain",
      },
      type: "node",
    },
    {
      id: "N32",
      t: "Ali ibn Harbi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N33",
      t: "Yusuf Abdal Mahdi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N34",
      t: "Mustafa Abu Najjar",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N35",
      t: "Ibrahim al-Rahman",
      u: "/public/images/flags/Yemen.png",
      d: {
        country: "Yemen",
      },
      type: "node",
    },
    {
      id: "N36",
      t: "Yusuf Abd Hassan",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N37",
      t: "Hassan Abd Shehri",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N38",
      t: "Bilal Abd Salim",
      u: "/public/images/flags/USA.png",
      d: {
        country: "USA",
      },
      type: "node",
    },
    {
      id: "N39",
      t: "Omar ibn al-Salim",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N40",
      t: "Faisal Abdal Qureshi",
      u: "/public/images/flags/USA.png",
      d: {
        country: "USA",
      },
      type: "node",
    },
    {
      id: "N41",
      t: "Amir al Tahir",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N42",
      t: "Mohammed al Qureshi",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N43",
      t: "Abdul Abdal Mahdi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N44",
      t: "Zaid ibn al-Qureshi",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N45",
      t: "Abdul Abdal Harbi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N46",
      t: "Nabil Abdal Tahir",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N47",
      t: "Mustafa ibn al-Karim",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N48",
      t: "Zaid Abd Hussein",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N49",
      t: "Houssaine Kherchtou",
      u: "/public/images/flags/Italy.png",
      d: {
        country: "Italy",
      },
      type: "node",
    },
    {
      id: "N50",
      t: "Abdul Abd Fawaz",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N51",
      t: "Omar al Faruq",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N52",
      t: "Abdul Abd Fadli",
      u: "/public/images/flags/Tanzania.png",
      d: {
        country: "Tanzania",
      },
      type: "node",
    },
    {
      id: "N53",
      t: "Saad Abd Shafi",
      u: "/public/images/flags/Britain.png",
      d: {
        country: "Britain",
      },
      type: "node",
    },
    {
      id: "N54",
      t: "Faisal bin Faruq",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N55",
      t: "Khalid ibn Hassan",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N56",
      t: "Amir ibn Mahdi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N57",
      t: "Amir ibn al-Harbi",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N58",
      t: "Yusuf Abdal Rahman",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N59",
      t: "Zaid Abd Bakr",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N60",
      t: "Ali al Karim",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N61",
      t: "Nabil bin Mahdi",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N62",
      t: "Amir Abdal Bakr",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N63",
      t: "Zaid al Harbi",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N64",
      t: "Zaid ibn Hassan",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N65",
      t: "Amir al-Hassan",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N66",
      t: "Khalid al Salim",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N67",
      t: "Hassan Abdal Hassan",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N68",
      t: "Jamal Abu Shehri",
      u: "/public/images/flags/USA.png",
      d: {
        country: "USA",
      },
      type: "node",
    },
    {
      id: "N69",
      t: "Nabil ibn al-Fadli",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N70",
      t: "Karim ibn al-Shehri",
      c: "#969696",
      tc: false,
      d: {
        country: "Unknown",
      },
      type: "node",
    },
    {
      id: "N71",
      t: "Yusuf al-Karim",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N72",
      t: "Mustafa bin Faruq",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N73",
      t: "Ali Abd Shafi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N74",
      t: "Mohammed bin Anwar",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N75",
      t: "Khalid al-Hussein",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N76",
      t: "Amir Abd Omari",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N77",
      t: "Amir Abu Ghamdi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N78",
      t: "Yusuf al Shafi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N79",
      t: "Abdul Abdal Shehri",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N80",
      t: "Yusuf Abd Qureshi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N81",
      t: "Mohammed Abu Fadli",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N82",
      t: "Bilal al Rahman",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N83",
      t: "Karim al-Fadli",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N84",
      t: "Ali Abdal Omari",
      u: "/public/images/flags/Morocco.png",
      d: {
        country: "Morocco",
      },
      type: "node",
    },
    {
      id: "N85",
      t: "Nabil al Omari",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N86",
      t: "Saad Abdal Omari",
      u: "/public/images/flags/USA.png",
      d: {
        country: "USA",
      },
      type: "node",
    },
    {
      id: "N87",
      t: "Bilal al Anwar",
      u: "/public/images/flags/Canada.png",
      d: {
        country: "Canada",
      },
      type: "node",
    },
    {
      id: "N88",
      t: "Khalid ibn al-Najjar",
      u: "/public/images/flags/Yemen.png",
      d: {
        country: "Yemen",
      },
      type: "node",
    },
    {
      id: "N89",
      t: "Khalid ibn Tahir",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N90",
      t: "Yusuf Abu Fadli",
      u: "/public/images/flags/Britain.png",
      d: {
        country: "Britain",
      },
      type: "node",
    },
    {
      id: "N91",
      t: "Saad al Fadli",
      u: "/public/images/flags/Pakistan.png",
      d: {
        country: "Pakistan",
      },
      type: "node",
    },
    {
      id: "N92",
      t: "Mohammed Abd Anwar",
      c: "#969696",
      tc: false,
      d: {
        country: "Unknown",
      },
      type: "node",
    },
    {
      id: "N93",
      t: "Bilal al-Zaman",
      c: "#969696",
      tc: false,
      d: {
        country: "Unknown",
      },
      type: "node",
    },
    {
      id: "N94",
      t: "Ali Abd Mahdi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N95",
      t: "Faisal Abdal Omari",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N96",
      t: "Zaid Abu Shafi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N97",
      t: "Mohammed Abu Hassan",
      u: "/public/images/flags/Canada.png",
      d: {
        country: "Canada",
      },
      type: "node",
    },
    {
      id: "N98",
      t: "Saad Abdal Fadli",
      u: "/public/images/flags/Canada.png",
      d: {
        country: "Canada",
      },
      type: "node",
    },
    {
      id: "N99",
      t: "Ali Abdal Hassan",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N100",
      t: "Saad ibn al-Karim",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N101",
      t: "Saad bin Omari",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N102",
      t: "Ali bin Harbi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N103",
      t: "Mohammed bin Ghamdi",
      u: "/public/images/flags/Saudi Arabia.png",
      d: {
        country: "Saudi_Arabia",
      },
      type: "node",
    },
    {
      id: "N104",
      t: "James Wright",
      u: "/public/images/flags/Germany.png",
      d: {
        country: "Germany",
      },
      type: "node",
    },
    {
      id: "N105",
      t: "Nabil Abd Qureshi",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N106",
      t: "Mustafa al Anwar",
      c: "#969696",
      tc: false,
      d: {
        country: "Unknown",
      },
      type: "node",
    },
    {
      id: "N107",
      t: "Bilal ibn al-Zaman",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N108",
      t: "Abdul Abu Najjar",
      u: "/public/images/flags/Afghanistan.png",
      d: {
        country: "Afghanistan",
      },
      type: "node",
    },
    {
      id: "N109",
      t: "Hassan Abdal Najjar",
      u: "/public/images/flags/Britain.png",
      d: {
        country: "Britain",
      },
      type: "node",
    },
    {
      id: "N110",
      t: "Ibrahim Abd Qureshi",
      u: "/public/images/flags/Britain.png",
      d: {
        country: "Britain",
      },
      type: "node",
    },
    {
      id: "N111",

// ...truncated 10016 lines

HTML

<!doctype html>
<html lang="en" style="background-color: #2d383f">
  <head>
    <meta charset="utf-8" />
    <title>Filtering and kCores</title>
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="klchart" class="klchart"></div>
    <script type="module" src="./code.js"></script>
  </body>
</html>

CSS

#slider-container {
  width: 100%;
}

input[type="range"] {
  width: 90%;
  margin-bottom: 10px;
}

fieldset {
  margin-top: 10px;
}

form label:not(.checkbox) {
  margin: 5px 0px;
}

#checkboxColumn1 label.checkbox,
#checkboxColumn2 label.checkbox {
  width: 100%;
}

#checkboxColumn1,
#checkboxColumn2 {
  width: 49%;
  display: inline-block;
  vertical-align: top;
}

Search

Filtering

kCores

Terms of use