Data

Tools

Indexes

Applications

Experiments

Open Source Science

d3-list-graph

D3 layout for a graph composed of adjacent lists of nodes

https://github.com/flekschas/d3-list-graph

Science Score: 18.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ○
    codemeta.json file
  • ○
    .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (11.2%) to scientific vocabulary

Keywords

d3 es6 graph list svg visualization
Last synced: 6 months ago · JSON representation ·

Repository

D3 layout for a graph composed of adjacent lists of nodes

Basic Info
Statistics
  • Stars: 17
  • Watchers: 4
  • Forks: 0
  • Open Issues: 10
  • Releases: 0
Topics
d3 es6 graph list svg visualization
Created over 10 years ago · Last pushed over 4 years ago
Metadata Files
Readme License Citation

README.md

D3 List Graph Build Status

A flat horizontal scrollable node-link diagram, implemented in ES6 and orchestrated by D3 v4.

Teaser Image

Demo: https://flekschas.github.io/d3-list-graph/

Background Information / Application: SATORI

Note: Starting from version 0.17.0, D3.js v3.x is no longer supported. Please use D3.js v4.x instead. If you need to both version please see here.

Install

shell bower install flekschas/d3-list-graph --save

Dependencies

This visualization depends on the following libraries to be available globally:

  • D3 v4
  • jQuery
  • jQuery's Mousewheel Plugin

Usage

This example assumes that you're using Bower to fetch all code.

```html <!DOCTYPE html> Example

```

Migration from D3.js v3 to v4

Starting from version 0.17.0, D3.js v3.x is no longer supported. If you still need to run old code on D3.js v4 please stick to the following pattern to load both versions but use v4 for the tree graph.

Note: D3.js v4 does not actually create a new object and overwrite the global d3 object because it embraces extensibility and modularization. Therefore, you have to load D3.js v4 first, reassign the variable, and then overwrite it with D3.js v3.

```html <!DOCTYPE html> Example

```

Make sure to load D3.js v4, the list graph layout, the list graph app, and all other version 4 related code first. Then reassign the global variable d3 to d3V4 (or whatever you like to call it). Finally, specify the version 4 of D3 when loading the list graph by püassing a property called d3 and assign d3V4 to it. When that property is unassigned the tool will use the globally available d3 variable and complain if the version doesn't match 4.x.y.

Parameters

Required parameters:

element: Object. DOM element that should act as the base element.

data: Object. Unique key-value list-like object. E.g.: {1: {...}, 2: {...}, 3: {...}}.

rootNodes: Array. List of node ids that should act as root nodes.

Optional parameters:

d3: Object. D3 library. Useful when working with two different version of D3 on the same page.

width: Number [100% of the SVG container]. Number of columns to be shown.

height: Number [100% of the SVG container]. Number of columns to be shown.

scrollbarWidth: Number [6]. Width of the scrollbars.

columns: Number [5]. Number of columns to be shown.

rows: Number [5]. Number of rows to be shown.

iconPath: String [Empty string]. Path to an SVG icon file. Default is an empty string, which is equivalent to inline SVG, meaning that the ListGraphs internal icons are used.

barMode: String [one]. Initial bar mode. Can either be one or two.

highlightActiveLevel: Boolean [false]. If true the currently active root level is highlighted

activeLevel: Number [0]. Offset of the root level to be highlighted. If 1 one level to the right of the root level will be highlighted.

noRootActiveLevelDiff: Number [0]. Negative offset when no manually selected new root level is set.

forceWidth: Boolean [false]. If you want to force the visualization to be of a certain width use this. [Default: false]

sortBy: String. Initial sorting of a property. This string should be identical to the property key.

sortOrder: String [desc]. Initial sort order. Can either be asc or desc.

dispatcher: Function. Can be used to listen to internal events.

lessTransitions: Number [0]. - 0 [Default]: Show all transitions - 1: Show only CSS transitions - 2: Show no transitions

hideOutwardsLinks: Boolean [false]. If true links that point to invisible nodes will not be shown.

nodeInfoContextMenu: Array [[]]. An array of objects specifying which node properties the node context menu should be displayed. E.g. [{ label: 'ID', property: function (data) { return data.id } }].

customTopbarButtons: Array [[]]. An array of objects specifying custom buttons in the topbar. E.g. [{ label: 'Click me', callback: function () { ... }, iconSvg: 'path/to/icon.svg#icon-name' }, iconSpan: 'span class names'].

Develop

To preview the toy development example website do:

shell npm start

In order to build a final production ready library run:

shell npm run build

Note: You can also pass --production to gulp in order to test if the compiled version really works. Note that you have to change the paths in example/index.html.

Owner

  • Name: Fritz Lekschas
  • Login: flekschas
  • Kind: user
  • Location: Somerville, MA

Computer scientist researching visualization systems for large-scale exploration of biomedical data. Harvard CS PhD '21.

Citation (CITATION.bib) 

@article{lekschas2017satori,
  author = {Fritz Lekschas and Nils Gehlenborg},
  title = {SATORI: A System for Ontology-Guided Visual Exploration of Biomedical Data Repositories},
  journal = {Bioinformatics},
  year = {2017},
  month = {11},
  day = {23},
  volume = {34},
  number = {7},
  pages = {1200-1207},
  doi = {10.1093/bioinformatics/btx739},
}

GitHub Events

Total
Last Year

Committers

Last synced: 9 months ago

All Time
  • Total Commits: 636
  • Total Committers: 1
  • Avg Commits per committer: 636.0
  • Development Distribution Score (DDS): 0.0
Past Year
  • Commits: 0
  • Committers: 0
  • Avg Commits per committer: 0.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
Fritz Lekschas s****e@l****e 636
Committer Domains (Top 20 + Academic)
lekschas.de: 1

Issues and Pull Requests

Last synced: 9 months ago

All Time
  • Total issues: 33
  • Total pull requests: 2
  • Average time to close issues: 2 months
  • Average time to close pull requests: N/A
  • Total issue authors: 1
  • Total pull request authors: 1
  • Average comments per issue: 0.39
  • Average comments per pull request: 0.0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 2
Past Year
  • Issues: 0
  • Pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Issue authors: 0
  • Pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • flekschas (28)
Pull Request Authors
  • dependabot[bot] (1)
Top Labels
Issue Labels
bug (11) feature (9) enhancement (8)
Pull Request Labels
dependencies (1)

Dependencies

bower.json bower
  • d3 4.2.2 development
  • jquery 3.1.0 development
  • jquery-mousewheel 3.1.13 development
package.json npm
  • babel 6.5.2 development
  • babel-core 6.16.0 development
  • babel-eslint 7.0.0 development
  • babel-preset-es2015 6.16.0 development
  • babel-preset-es2015-rollup 1.2.0 development
  • eslint 3.7.0 development
  • eslint-config-airbnb 12.0.0 development
  • eslint-plugin-import 1.16.0 development
  • eslint-plugin-jsx-a11y 2.2.2 development
  • eslint-plugin-react 6.3.0 development
  • gulp 3.9.1 development
  • gulp-autoprefixer 3.1.1 development
  • gulp-bump 2.4.0 development
  • gulp-clean 0.3.2 development
  • gulp-clean-css 2.0.13 development
  • gulp-eslint 3.0.1 development
  • gulp-flatten 0.3.1 development
  • gulp-if 2.0.1 development
  • gulp-ignore 2.0.1 development
  • gulp-notify 2.2.0 development
  • gulp-optimize-js 1.1.0 development
  • gulp-plumber 1.1.0 development
  • gulp-rename 1.2.2 development
  • gulp-replace 0.5.4 development
  • gulp-sass 2.3.2 development
  • gulp-sourcemaps 1.6.0 development
  • gulp-svgmin 1.2.3 development
  • gulp-uglify 2.0.0 development
  • gulp-util 3.0.7 development
  • gulp-webserver 0.9.1 development
  • opn 4.0.2 development
  • rollup 0.36.1 development
  • rollup-plugin-babel 2.6.1 development
  • rollup-plugin-commonjs 5.0.4 development
  • rollup-plugin-node-resolve 2.0.0 development
  • run-sequence 1.2.2 development
  • semver 5.3.0 development
  • d3 4.2.6
  • d3-drag 1.0.1
  • d3-scale 1.0.3
  • d3-selection 1.0.2
  • d3-shape 1.0.3
  • d3-transition 1.0.2
  • es6-promise 3.2.1
  • lodash-es 4.16.2