interactive_filtering – GD benchmark sets

Type to search for datasets by name or feature. Results will appear here.

console.log(benchmark_datasets)

document.getElementById('dataset-search').addEventListener('input', function(e) {
    const query = e.target.value.toLowerCase();
    // Example: filter and log matching dataset names
    const matches = benchmark_datasets.filter(d => {
      const nameMatch = d.Name && d.Name.toLowerCase().includes(query);
      const featureMatch = d["graph features handled"] && d["graph features handled"].toLowerCase().includes(query);
      return nameMatch || featureMatch;
    });
    // You can replace this with code to update the UI with the filtered results
    const resultsContainer = document.getElementById('search-results');
    resultsContainer.innerHTML = ''; // Clear previous results
    if (matches.length > 0 && query.length > 0) {
        resultsContainer.innerHTML = `<strong>Found ${matches.length} matching datasets:</strong>`;
        matches.forEach(match => {
            const resultItem = document.createElement('div');
            resultItem.className = 'search-result-item';
            resultItem.innerHTML = `<a class="dataset-link" href="#${name_cleanup(match.Name)}">${match.Name}</a> - ${match["graph features handled"] || "No features listed"}`;
            resultsContainer.appendChild(resultItem);
        });
    } else if (query.length > 0) {
        resultsContainer.innerHTML = '<i>No matching datasets found.</i>';
    } else {
        resultsContainer.innerHTML = '<i>Type to search for datasets by name or feature. Results will appear here.</i>';
    }
});

Tag-filtered Navigation

The following interactive filtering system is an initial overview over the contents of the paper, and can be used to navigate and identify datasets and papers easily. The left column contains all the properties used to tag graphs in the datasets (additional information about the nature of these tags can be found in ?@sec-collection-process and ?@sec-data-processing). Each tag has an associated checkbox: selecting a tag (or more than one) will filter the datasets and papers to only show those that contain the selected tags. The middle column contains the datasets, and the right column contains the papers. Clicking on a dataset or paper will scroll the page to the corresponding section in the paper. The datasets and papers are sorted alphabetically by name and citation name, respectively. The tags, datasets, and papers are generated from the data in the repository, and are updated automatically when the data changes.

Tags

Datsets

Papers

Airlines, Migrations, and Air Traffic

Amazon

Assorted Collaboration Network

Assorted Fiscal Network

AT&T

Autonomous System Network

Biological Pathways (KEGG)

Blogposts, Tweets, and Forums

World Greenhouse Gas Emissions

Co-Phylogenetic Trees

Code Dependency Graphs

Complete Graphs

World Maps

Control Flow Graphs

Enron

FM3

GION

Graphviz Examples

Internet Mapping Project

Investment Interdependence

KnownCR

Mathematics Genealogy

Matrix Market

Medical Patient Records

Militarized Interstate Disputes (MID)

Pajek

Protein Interactions (Publications)

RandDAG

Rome-Lib

Scotch Graph Collection

SNAP (Stanford Network Analysis Platform)

Social Networks

Stanford GraphBase

SteinLib

Storylines (Movie Plots)

SuiteSparse Matrix Collection

Transportation Networks

Tree of Life

Walshaw

WebCompute

World Bank Trade Data

[@Ahmed2020]

[@Alegra2021]

[@Angori2019]

[@Arleo2019]

[@Bach2014]

[@Ballweg2018]

[@Barnes1986]

[@Bartolomeo2021]

[@Bekos2007]

[@Bekos2018]

[@Bertault2000]

[@Bhatt1984]

[@Bhore2021]

[@Biedl2018]

[@Binucci2016]

[@Binucci2021]

[@Brsig2020]

[@Buchheim2006]

[@Buchheim2008]

[@Buchin2011]

[@Calamoneri2018]

[@Castermans2018]

[@Chen2019]

[@Chimani2008]

[@Chimani2012]

[@Chimani2021]

[@Clancy2019]

[@DIBATTISTA2000]

[@DRGraph21]

[@dang2016]

[@Demel2018]

[@Devkota2019]

[@DiBattista1997b]

[@DiGiacomo2020]

[@Didimo2018]

[@Didimo2019]

[@Dwyer2013]

[@Eades2018]

[@Ersoy2011]

[@Firman2019]

[@Forster2002]

[@Forster2005]

[@Frishman2008]

[@Frster2021]

[@Fruchterman1991]

[@Fulek2018]

[@Gange2011]

[@Gansner1993]

[@Gansner2005]

[@Gansner2005b]

[@Gansner2006]

[@Gansner2013]

[@Gibson2012]

[@Giovannangeli2021]

[@Grabowicz2014]

[@Gronemann2016]

[@Gronemann2016b]

[@Gutwenger2004]

[@Hachul2005]

[@Hachul2006]

[@Heinsohn2018]

[@Henry2007]

[@Holten2006]

[@Holten2009]

[@Hong2019]

[@Huang2016]

[@Hummel2019]

[@Jabrayilov2016]

[@Jacomy2014]

[@Jnger2018]

[@KOREN20051867]

[@Kindermann2018]

[@Klawitter2018]

[@Klawitter2021]

[@Klemz2021]

[@Lim2021]

[@Lin2010]

[@Liu2017]

[@Mallach2019]

[@Marner2014]

[@Meidiana2019]

[@Meulemans2013]

[@Misue2019]

[@Nachmanson2017]

[@NanCao2011]

[@Ni2018]

[@Nickel2019]

[@Niedermann2020]

[@Nllenburg2010]

[@Nllenburg2021]

[@Nollenburg2011]

[@Ogawa2010]

[@Oikonomou2018]

[@Olszewski2018]

[@Ortali2018]

[@Ortmann2017]

[@Perri2020]

[@Purchase2020]

[@Qu2022]

[@Raj2018]

[@Regg2016]

[@Sander1996]

[@ShixiaLiu2013]

[@Simonetto2018]

[@Skambath2016]

[@Sugiyama1981]

[@Tanahashi2012]

[@Tanahashi2015]

[@Taurus2023]

[@Wallinger2022]

[@Walter2020]

[@cui2008]

[@Wongsuphasawat2018]

[@Wu2018]

[@Wu2020]

[@Zhang2010]

[@Zhao2021]

[@arleo2022]

[@barth2002]

[@bast2020]

[@batik2022]

[@bekos2022]

[@binucci2022]

[@binucci2023]

[@brandes1998]

[@brandes2002]

[@brandes2006]

[@brandes2009]

[@burch2011]

[@burch2017]

[@chimani2006]

[@chimani2010]

[@chimani2016]

[@chimani2016b]

[@civril2006]

[@cohen1997]

[@cornel2016]

[@cypko2017]

[@davidson1996]

[@deCol2019]

[@devkota2018]

[@diBartolomeo2022]

[@diBartolomeo2022b]

[@eades1984]

[@felice2019]

[@fisheye2019]

[@frick1995]

[@frishman2004]

[@frishman2007]

[@giovannangeli2023]

[@gove2019]

[@gray2023]

[@greilich2009]

[@hacul2005]

[@harel2001]

[@hoffswell2018]

[@hofmann2017]

[@hu2005efficient]

[@junger1997]

[@kamada19897]

[@klammler2018]

[@koren2002]

[@kruiger2017]

[@lukasczyk2017]

[@meidiana2020]

[@meidiana2022]

[@meidiana2023]

[@mennens2019]

[@miller2023]

[@minghim2006]

[@mizuno2019]

[@muelder2008]

[@muelder2008b]

[@noack2004]

[@nocaj2015]

[@padia2018]

[@padia2019]

[@pawel2000]

[@preiner2020]

[@saket2016]

[@vanDijk2016]

[@vanDijk2018]

[@vandenElzen2013]

[@vonLandesberger2016]

[@wallinger2023]

[@walshaw2001]

[@wang2018]

[@wang2020]

[@welch2017]

[@zarate2018]

[@zeng2019]

[@zheng2019]

[@zhong2023]

{
    //console.log(benchmark_datasets)
    
    // sorry for all the vars instead of let but this was split before into different cells
    var uniqueDataTagSet = new Set(); // set for the tags
    var uniquePaperTagSet = new Set();
    var dataSetNames = []; // list of names of datasets
    var paperNames = []
    var dataMap = {} // maps from the tags to the individual datasets
    var paperMap = {} // maps from the tags to the individual papers
    var nameMap = {} // maps from the cleaned name to the actual name containing potentially special characters

    //console.log(literature)
    // "Citation name": "bekos2022"
    // "Graph feature": "hypergraphs, spatial"
    
    const tagMapping = {
    "hypergraphs": "Hypergraphs",
    "spatial": "Spatial",
    "layered graphs": "N-layers",
    "generic": "Generic",
    "large": "Large",
    "dynamic (discrete)": "Dynamic",
    "dynamic": "Dynamic",
    "dynamic (continuous)": "Dynamic",
    "clusters (generated)": "Clusters (generated)",
    "clusters (pre-existing)": "Clusters (pre-existing)",
    "bundled edges (generated)": "Bundled edges (generated)",
    "directed edges": "Directed edges",
    "weighted edges": "Weighted edges",
    "weighted nodes": "Weighted nodes",
    "hierarchical": "Hierarchical",
    "categorical nodes": "Categorical nodes",
    "trees": "Trees",
    "labeled nodes": "Labeled nodes",
    "bipartite": "Bipartite",
    "tripartite": "Bipartite",
    "labeled edges": "Labeled edges",
    "planar": "Planar",
    "sparse": "Sparse",
    "K-planar": "Planar",
    "2-planar": "Planar",
    "acyclic": "Acyclic",
};

    
    benchmark_datasets.forEach((entry) => {
        let name = name_cleanup(entry.Name)
        nameMap[name] = entry.Name
        dataSetNames.push(name);
        var parts = entry["graph features handled"].split(",").map(item => item.trim())
        for (var part of parts) {
            if (part !== "") {
                uniqueDataTagSet.add(part);
                if (!dataMap[part]) {
                    dataMap[part] = new Set();
                }
                dataMap[part].add(name);
            }
        }
    })
     
    
     
  
    literature.forEach((paper) => {

      paperNames.push(paper["Citation name"]);
      var parts = paper["Graph feature"].split(",").map(item => item.trim())
      for (var part of parts) {
        if (part !== "") {
          uniquePaperTagSet.add(part);
          
          if (part in tagMapping) {
              part = tagMapping[part]
          }
          if (!paperMap[part]) {
              paperMap[part] = new Set();
          }
          
          paperMap[part].add(paper["Citation name"]);
        }
      }
    })
  
    // Add keys not present in the paperTags 
    Object.keys(dataMap).forEach((key) => {
      if (!paperMap[key]) {
        paperMap[key] = new Set();
      }
    })
  
  
    
    var category_tags = {
        0: "Layered",
        2: "Hierarchical",
        4: "Attributes",
        11: "Structures",
        21: "Other",
    }
    
    // if you change this ordering or move around values also change the category map above!!!
    //var uniqueDataTags = [...uniqueDataTagSet]
    var uniqueDataTags = [
        // Layered
        "Bipartite",
        "N-layers",
        
        // Hierarchical
        "Trees",
        "Hierarchical",

        // Attributes
        "Dynamic",
        "Weighted edges",
        "Weighted nodes",
        "Labeled nodes",
        "Categorical nodes",
        "Signed",
        "Spatial",
        
        // Structures
        "Clusters (pre-existing)",
        "Clusters (generated)",
        "Directed edges",
        "Hypergraphs",
        "Bundled edges (generated)",
        "Partition",
        "Multigraph",
        "Acyclic",
        "Mesh",

        // Other
        "Generic",
        "Planar",
        "Nonplanar",
        "Known crossing number",
        "Large",
        "Dense",
        "Sparse",
    ]
    var uniquePaperTags = [...uniquePaperTagSet]  
    //console.log(uniqueDataTags)
    //console.log(uniquePaperTagSet)
    //console.log(dataMap)
    //console.log(paperMap)
    //console.log(dataSetNames)
    //console.log(paperNames)

    // remove empty entries
    paperNames = paperNames.filter(str => str.trim() !== "")
    


    var checkBoxContainer = document.getElementById('checkbox-container');
    var linksListContainer = document.getElementById('datasetlinkslist-container')
    var paperLinksContainer = document.getElementById('paperlinkslist-container')
    var checkboxStates = [];  // Array to keep track of checkbox states (booleans)

    // needs to be in here since we access so many "global" variables
    function displayDataSetLinksList() {
        //console.log(checkboxStates); // current states to check which dataset links to display (index-based)

        const filteredTags = uniqueDataTags.map((item, index) => checkboxStates[index] ? item : undefined)
            .filter(item => item !== undefined);

        //console.log(filteredTags)

        var final_datasets = []
        var final_data_inverse = []

        var final_papers = []
        var final_paper_inverse = []

        if (filteredTags.length == 0) {
            final_datasets = dataSetNames;
            final_papers = paperNames;
        } else {
            // Retrieve an array of sets from the provided keys
            const dataSets = filteredTags.map(key => dataMap[key]);
            const paperSets = filteredTags.map(key => paperMap[key]);
            
            // Calculate the intersection of all sets
            const dataIntersection = dataSets.reduce((acc, set) => new Set([...acc].filter(x => set.has(x))));
            const paperIntersection = paperSets.reduce((acc, set) => new Set([...acc].filter(x => set.has(x))));
            
            final_datasets = [...dataIntersection] // white list
            final_papers = [...paperIntersection]

            // Now, compute the difference between dataSetNames and final_datasets
            const dataDifference = new Set(dataSetNames.filter(x => !final_datasets.includes(x)));
            const paperDifference = new Set(paperNames.filter(x => !final_papers.includes(x)));

            final_data_inverse = [...dataDifference]; // black list
            final_paper_inverse = [...paperDifference]
        }

        //console.log("show: " + final_datasets) // white list 
        //console.log("show: " + final_papers)

        final_datasets.forEach((name) => {
            //console.log(name + '-link')
            let currLinkDiv = document.getElementById(name + '-link')
            if (currLinkDiv != null) {
                currLinkDiv.style.display = 'block';  // Clear the display property to default ('block')
            } 
        })

        final_data_inverse.forEach((name) => {
            //console.log(name + '-link')
            let currLinkDiv = document.getElementById(name + '-link')
            if (currLinkDiv != null) {
                currLinkDiv.style.display = 'none';  // Hide the div
            }
        })

        final_papers.forEach((name) => {
            //console.log(name + '-link')
            let currLinkDiv = document.getElementById(name + '-link')
            if (currLinkDiv != null) {
                currLinkDiv.style.display = 'block';  // Clear the display property to default ('block')
            }
        })

        final_paper_inverse.forEach((name) => {
            //console.log(name + '-link')
            let currLinkDiv = document.getElementById(name + '-link')
            if (currLinkDiv != null) {
                currLinkDiv.style.display = 'none';  // Hide the div
            }
        })

      /*
      // this is how the it ran earlier and it was used to generate the static html links above this
      
      if (final_datasets.length == 0) {
      // display message that no dataset contains all these tags
      linksListContainer.innerHTML = '';
      } else {
      
      linksListContainer.innerHTML = '';
      
      final_datasets.forEach((currDataName) => {
      const anchor = document.createElement('a');
      anchor.href = '#' + currDataName
      anchor.classList.add('dataset-link')
      anchor.textContent = nameMap[currDataName]
      
      const div = document.createElement('div');
      div.id = currDataName + '-link'
      div.appendChild(anchor);
      
      linksListContainer.appendChild(div);
      })
      }
      
      // and here for the paper names
      paperNames = paperNames.filter(str => str.trim() !== "").sort();
      paperNames.forEach((currPaperName) => {

          const div = document.createElement('div');
          div.id = currPaperName + '-link'
          div.textContent = `[@${currPaperName}]`

          paperLinksContainer.appendChild(div);
      });*/
      
    }
   
  // Function to add a new checkbox with a styled span label
  function addCheckbox(index, name) {
      const newCheckbox = document.createElement('input');
      newCheckbox.type = 'checkbox';
      newCheckbox.id = 'checkbox' + index;
      newCheckbox.style.marginRight = '8px'; 
      newCheckbox.classList.add('form-check-input');

      // Creating the span that will act as a label
      const span = document.createElement('span');
      span.classList.add('pill-tag');
      span.classList.add(`pill_color_${name_cleanup(name)}`);
      //span.style.backgroundColor = get_css_color_for_tag(name)
      //span.style.backgroundColor = graph_feature_tags_colors[index % graph_feature_tags_colors.length];  
      span.textContent = name;

      const label = document.createElement('label');
      label.className = 'd-flex align-items-center justify-content-start';
      label.htmlFor = newCheckbox.id;
      label.style.cursor = 'pointer';  // Change the cursor to a pointer on hover
      label.appendChild(newCheckbox);
      label.appendChild(span);  // Append the span to the label

      const div = document.createElement('div');
      div.className = 'form-check d-flex align-items-center';  // Ensure the checkbox and label are aligned
      div.appendChild(label);

      checkBoxContainer.appendChild(div);

      // Update state array and add event listener
      checkboxStates.push(false);
      newCheckbox.addEventListener('change', () => {
          checkboxStates[index] = newCheckbox.checked;
          displayDataSetLinksList()
      });
  }

  // Automatically add checkboxes on load for each tag, we cannot reorder after this!
  uniqueDataTags.forEach((entry, index) => {
      if (category_tags.hasOwnProperty(index)) {
          const span = document.createElement('span');
          span.style.opacity = "50%";  // Setting it to be less obnoxious
          span.textContent = "\u2012 " + category_tags[index] + "\u2012 ";

          const div = document.createElement('div');
          div.className = 'd-flex align-items-center';  
          div.appendChild(span);

          checkBoxContainer.appendChild(div);
      }
      addCheckbox(index, entry);
  })

  // initial call to display all datasets (now a bit redundant but adds the "display" style-attribute)
  displayDataSetLinksList()

}