Rust crate for creating beautiful interactive Chord Diagrams

Overview

ChordPRO

Chord PRO Released

Chord PRO is the full-featured chord visualization API, producing beautiful interactive visualizations, e.g. those featured on the front page of Reddit.

  • Produce beautiful interactive Chord diagrams.
  • Customize colours and font-sizes.
  • Access Divided mode, enabling two sides to your diagram.
  • Add images and text on hover,
  • Access finer-customisations including HTML injection.
  • Allows commercial use without open source requirement.
  • Currently supports Python, JavaScript, and Rust, with many more to come (accepting requests).

Get it here!

Changelog:

  • 23 December 2020 - Chord PRO now supports reverse_gradients.

reverse_gradients

  • 02 December 2020 - Chord PRO now has [better support] for text customisation with the conjunction parameter.

  • 21 November 2020 - Chord PRO now has better support for asymmetric chord diagrams.

  • 03 November 2020 - Chord PRO now supports nodes with no relationships.

  • 26 October 2020 - Chord PRO now supports Downloading to image when multiple Chord diagrams appear on the same page.

  • 03 October 2020 - Chord PRO now supports visualising occurrences as well as co-occurrences.

  • 29 August 2020 - Chord PRO now supports enabling a Download to image button.

  • 16 August 2020 - Chord PRO now supports radius scaling and bipartite titles.

  • 13 August 2020 - Chord PRO now supports Arc numbers.

  • 23 July 2020 - Chord PRO now supports figure titles.

  • 20 July 2020 - Chord PRO now supports asymmetric mode using symmetric=False! You can also override the verb used in the popup.

  • 14 July 2020 - Chord PRO can now be enabled by entering your license key.

  • 29 June 2020 - Optimisation and bug fixes to the tooltip have massively improved the interactive performance of the visualisation (Rebuild your chord diagrams to take advantage of this change).

  • 22 May 2020 - Optimisation and bug fixes have massively improved the interactive performance of the visualisation (Rebuild your chord diagrams to take advantage of this change).

  • 21 May 2020 - Please update to the latest version of chord. Backwards compatibility has been introduced, so from this version onwards, new versions won't break older ones!

Example Image

Introduction

In a chord diagram (or radial network), entities are arranged radially as segments with their relationships visualised by arcs that connect them. The size of the segments illustrates the numerical proportions, whilst the size of the arc illustrates the significance of the relationships1.

Chord diagrams are useful when trying to convey relationships between different entities, and they can be beautiful and eye-catching.

The Chord Crate

I wasn't able to find any Rust crates for plotting chord diagrams, so I ported my own from Python to Rust.

You can get the package either from crates.io or from the GitHub repository. With your processed data, you should be able to plot something beautiful with just a single line, Chord{ matrix : matrix, names : names, .. Chord::default() }.show()

The primary support is for Jupyter Lab (not the older Jupyter Notebook).

Installation

Available on crates.io.

:dep chord = {Version = "0.2.1"}
use chord::{Chord, Plot};

Examples

You can see the actual interactive examples on this page. The below examples are screenshots.

The Dataset

The focus for this section will be the demonstration of the chord package. To keep it simple, we will use synthetic data that illustrates the co-occurrences between movie genres within the same movie.

let matrix: Vec<Vec<f64>> = vec![
    vec![0., 5., 6., 4., 7., 4.],
    vec![5., 0., 5., 4., 6., 5.],
    vec![6., 5., 0., 4., 5., 5.],
    vec![4., 4., 4., 0., 5., 5.],
    vec![7., 6., 5., 5., 0., 4.],
    vec![4., 5., 5., 5., 4., 0.],
];

let names: Vec<String> = vec![
    "Action",
    "Adventure",
    "Comedy",
    "Drama",
    "Fantasy",
    "Thriller",
]
.into_iter()
.map(String::from)
.collect();

Default Settings

Let's see what the Chord defaults produce when we invoke the show() method.

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    ..Chord::default()
}
.show();

Example Image

You can also save it to a HTML file.

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    ..Chord::default()
}
.to_html();

Different Colours

The defaults are nice, but what if we want different colours? You can pass in almost anything from d3-scale-chromatic, or you could pass in a list of hexadecimal colour codes.

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    colors: "d3.schemeSet2".to_string(),
    ..Chord::default()
}
.show();

Example Image

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    colors: format!("d3.schemeGnBu[{:?}]",names.len()).to_string(),
    ..Chord::default()
}
.show();

Example Image

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    colors: "d3.schemeSet3".to_string(),
    ..Chord::default()
}
.show();

Example Image

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    colors: format!("d3.schemePuRd[{:?}]",names.len()).to_string(),
    ..Chord::default()
}
.show();

Example Image

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    colors: format!("d3.schemeYlGnBu[{:?}]",names.len()).to_string(),
    ..Chord::default()
}
.show();

Example Image

let hex_colours : Vec<String> = vec!["#222222", "#333333", "#4c4c4c", "#666666", "#848484", "#9a9a9a"].into_iter()
.map(String::from)
.collect();

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    colors: format!("{:?}",hex_colours),
    ..Chord::default()
}
.show();

Example Image

Label Styling

We can disable the wrapped labels, and even change the colour.

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    wrap_labels: false,
    label_color:"#4c40bf".to_string(),
    ..Chord::default()
}
.show();

Example Image

Opacity

We can also change the default opacity of the relationships.

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    opacity: 0.1,
    ..Chord::default()
}
.show();

Example Image

Diagram Size

We can change the maximum diagram size by specifying a width.

Chord {
    matrix: matrix.clone(),
    names: names.clone(),
    width: 400.0,
    ..Chord::default()
}
.show()

  1. Tintarev, N., Rostami, S., & Smyth, B. (2018, April). Knowing the unknown: visualising consumption blind-spots in recommender systems. In Proceedings of the 33rd Annual ACM Symposium on Applied Computing (pp. 1396-1399). 

Data and Templates

Chord FREE package

The chord package switches to FREE mode when a username and license are not specified, or if they are both set to "free". This disables the use of all the PRO features.

This uses the Chord FREE API service hosted on the DataCrayon.com (AWS hosted) server to generate your visualisation.

Chord FREE uses the AGPL-3.0 License.

Chord PRO (full-featured) package

The chord package switches to PRO mode when a username and license are specified. This enables the use of all the PRO features.

This uses the Chord PRO API service hosted on the DataCrayon.com (AWS hosted) server to generate your visualisation.

Example Image

Comments
  • Use chordfree endpoint instead of tmpl file

    Use chordfree endpoint instead of tmpl file

    Fixes #4

    This PR is split into two commits:

    • the first commit fixes a bunch of existing warnings/formatting inconsistencies, in line with the standard rustfmt and clippy toolchain. This commit is optional and doesn't affect the functionality of the crate, it just pulls out a bunch of stuff my editor applied automatically for clarity
    • the second commit updates the crate to always use server side rendering. This includes:
      • factoring out the shared functionality to new template_url and render methods
      • removing the unused dependency nanoid

    This is a cool project, thanks for supporting Rust directly!

    opened by tommilligan 3
  • No example picture in the article; dead link

    No example picture in the article; dead link

    The article should have some picture of a chord diaram, for example, like in the repository README.

    Also "Example Image" link at the bottom on Github repository's README does not work.

    opened by vi 3
  • Display bug of the chord diagram

    Display bug of the chord diagram

    Dear Shahin, I bought your book and copy the code to run in Jupyter Lab like this. image

    Nothing error happened, but nothing happened. No chart display.

    By the way, your book is coool.

    opened by AdamW666 3
  • Update required (but no crate update available)

    Update required (but no crate update available)

    I'm using the v0.1.6 crate, which is the latest available version on crates.io

    Today I got the following message in the output file:

    image

    This looks to be because the embedded template URL https://shahinrostami.com/assets/chord/chord_0_0_12.tmpl has been updated to show this message.

    The Python packages looks to be using a new endpoint, https://api.shahin.dev/chordfree, to perform server side rendering (like the pro version always has).

    I have a PR that fixes this, I'll send it over now.

    opened by tommilligan 2
  • Overlapping ribbons

    Overlapping ribbons

    Feedback by gus_massa (https://news.ycombinator.com/item?id=25441136)

    Sometimes the lines to the near blocks cross with the lines to the far blocks. https://imgur.com/a/VdfEQES It would be nice to ensure they never cross, but I'm not sure how hard is that geometric calculation.

    image

    opened by shahinrostami 0
Owner
Dr. Shahin Rostami
Founder and Principal Data Scientist at Polyra. Senior Academic and Consultant in Data Science & AI.
Dr. Shahin Rostami
below is an interactive tool to view and record historical system data.

A time traveling resource monitor for modern Linux systems

Facebook Incubator 824 Dec 31, 2022
This is a Rust implementation of a boid flocking simulation using the ggez graphics crate.

Boidflock This is a Rust implementation of a boid flocking simulation using the ggez graphics crate. The CLI for this program is built using the struc

Andrew Lee 12 Jan 4, 2023
Swash is a pure Rust, cross-platform crate that provides font introspection, complex text shaping and glyph rendering.

Swash is a pure Rust, cross-platform crate that provides font introspection, complex text shaping and glyph rendering. Goals This crate aims to

Chad Brokaw 398 Dec 14, 2022
A small charting/visualization tool and partial vega implementation for Rust

Gust A charting library for rust! Disclaimer This is still very much a work in progress! APIs are very unstable and subject to change. Contributions a

Samuel Resendez 128 Dec 24, 2022
Data plotting library for Rust

plotlib plotlib is a generic data visualisation and plotting library for Rust. It is currently in the very early stages of development. It can current

Matt Williams 417 Dec 31, 2022
Plotly for Rust

Plotly.rs Plotly for Rust Getting Started | Recipes | API Docs | Changelog | | | A plotting library for Rust powered by Plotly.js. Usage Add this to y

Ioannis Giagkiozis 671 Jan 8, 2023
A rust drawing library for high quality data plotting for both WASM and native, statically and realtimely 🦀 📈🚀

Plotters - A Rust drawing library focus on data plotting for both WASM and native applications ?? ?? ?? Plotters is drawing library designed for rende

Hao Hou 2.7k Jan 4, 2023
A Rust library for drawing plots, powered by Gnuplot.

RustGnuplot A Gnuplot controller written in Rust. Documentation See here Examples A simple example: let mut fg = Figure::new(); fg.axes2d() .set_titl

null 353 Dec 26, 2022
Render farm simulator & plotting for optimisation written in Rust.

Farm Usage Simulator Given a few basic charasteristics of a render farm and render jobs this app runs a few randomized farm usage scenarios and plots

ford 2 Jul 17, 2022
A Rust API for Vega-Lite V4 to build chart with a rusty API.

Vega-Lite V4 for Rust A Rust API for Vega-Lite V4 to build chart with a rusty API. Similar to the Altair project in python, this crate build upon Vega

Procyon 18 Nov 26, 2022
Externalize easily the plotting process from Rust to gnuplot.

preexplorer Easy plotter and saver of simple data. Handy tool for development stage or small computational projects. Save data, have a quick view and

Raimundo Saona 4 Jan 7, 2022
A pure Rust visualization library inspired by D3.js

charts A pure Rust visualization library inspired by D3.js. See gallery and examples for code and more charts. Install You can add this as a dependenc

Iulian Gulea 186 Dec 29, 2022
Graphical Rust program that uses a fractal algorithm to draw a tree of sorts

rusty-vegetation Graphical Rust program that uses a fractal algorithm to draw a "tree" of sorts. To Build and Run On Linux: Install build-essentials o

Stephen G Tuggy 4 Dec 4, 2022
A Rust program for visualizing how sections get packed into your Game Boy ROM

GB Packing Visualizer A Rust program for visualizing how sections get packed into your Game Boy ROM. rhythm_land.mp4 Each column represents a ROM bank

Eldred Habert 6 Jan 31, 2022
Lightweight graphs (sparklines) for use with Embedded Rust

Sparklines for Rust's Embedded-graphics Sparklines are small, high resolution graphics embedded in a context of words, numbers or images". Edward Tuft

Bernard Kobos 4 Aug 28, 2022
Easy c̵̰͠r̵̛̠ö̴̪s̶̩̒s̵̭̀-t̶̲͝h̶̯̚r̵̺͐e̷̖̽ḁ̴̍d̶̖̔ ȓ̵͙ė̶͎ḟ̴͙e̸̖͛r̶̖͗ë̶̱́ṉ̵̒ĉ̷̥e̷͚̍ s̷̹͌h̷̲̉a̵̭͋r̷̫̊ḭ̵̊n̷̬͂g̵̦̃ f̶̻̊ơ̵̜ṟ̸̈́ R̵̞̋ù̵̺s̷̖̅ţ̸͗!̸̼͋

Rust S̵̓i̸̓n̵̉ I̴n̴f̶e̸r̵n̷a̴l mutability! Howdy, friendly Rust developer! Ever had a value get m̵̯̅ð̶͊v̴̮̾ê̴̼͘d away right under your nose just when

null 294 Dec 23, 2022
Ember is a minimalistic Rust library for creating 2D graphics, games, and interactive visualizations with ease and simplicity.

Ember Ember is a simple and fun 2D rendering library for Rust, allowing you to quickly create graphics and interactive applications with ease. It uses

null 8 May 4, 2023
🦊 An interactive cli for creating conventional commits.

?? koji An interactive cli for creating conventional commits, built on cocogitto and inspired by cz-cli. Installation Not yet. ?? Usage Using koji # C

Danny 40 Dec 8, 2022