Skip to content

Instantly share code, notes, and snippets.

@eli-s-goldberg

eli-s-goldberg/enmExperimentalData.csv

Created November 13, 2015 11:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eli-s-goldberg/02e5e677abad0e36b55b to your computer and use it in GitHub Desktop.
Save eli-s-goldberg/02e5e677abad0e36b55b to your computer and use it in GitHub Desktop.
Download ZIP
QCM-D experimental data visualization
Raw
readme.md

This example shows how it is possible to use a D3 sunburst visualization (partition layout) to describe and navigate the complex transport QCM-D literature. This live chart was modified from a example code available under open-source licence. Attribution is provided where needed.

Raw
enmExperimentalData.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 3 should actually have 2 columns, instead of 1. in line 2.
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-10_20nm-10mgNM/L-6.0-25C-0.1_1,1
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-10_20nm-10mgNM/L-8.0-25C-0.01_0.1,1
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-1_10nm-10mgNM/L-6.0-25C-0.1_1-3
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-1_10nm-10mgNM/L-8.0-25C-0.1_1-3
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-6.0-25C-0.01_0.1-2
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-6.0-25C-0.1_1-2
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-8.0-25C-0.01_0.1-3
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-8.0-25C-0.1_1,1
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-<1nm-10mgNM/L-6.0-25C-0.1_1,1
BL21RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-<1nm-10mgNM/L-8.0-25C-0.1_1,1
C60-sphere-Alg-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-5.8mgNM/L-5.5-25C-0.1_1,1
C60-sphere-Alg-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C-0.1_1,1
C60-sphere-Alg-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1,1
C60-sphere-Alg-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.1_1,1
C60-sphere-EHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1,1
C60-sphere-EHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1-2
C60-sphere-EHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C->=1,1
C60-sphere-HFA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-15C-0.1_1,1
C60-sphere-HFA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-25C-0.1_1,1
C60-sphere-HFA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-35C-0.1_1,1
C60-sphere-HFA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-45C-0.1_1,1
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-6.05mgNM/L-5.6-25C-0.1_1,1
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-6.05mgNM/L-5.6-25C-0.1_1-3
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6.05mgNM/L-5.6-25C-0.1_1-4
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-15C-0.1_1,1
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-25C-0.1_1,1
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-35C-0.1_1,1
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-45C-0.1_1,1
C60-sphere-HHA-none-0mgNOM/L-L.L.Ex.-NaCl-<1nm-6.05mgNM/L-5.6-25C->=1,1
C60-sphere-SRHA-SRHA-1mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1,1
C60-sphere-SRHA-SRHA-1mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1,1
C60-sphere-SRHA-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-5.8mgNM/L-5.5-25C-0.1_1,1
C60-sphere-SRHA-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C-0.1_1,1
C60-sphere-SRHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.001_0.01,1
C60-sphere-SRHA-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.1_1,1
C60-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1-2
C60-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C->=1-2
C60-sphere-none-Alg-1mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1,1
C60-sphere-none-Alg-1mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1,1
C60-sphere-none-EHA-1mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1,1
C60-sphere-none-EHA-1mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1-2
C60-sphere-none-EHA-1mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1,1
C60-sphere-none-SRHA-1mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1,1
C60-sphere-none-SRHA-1mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.001_0.01,1
C60-sphere-none-SRHA-1mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1,1
C60-sphere-none-SRHA-1mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1-3
C60-sphere-none-SRHA-1mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1,1
C60-sphere-none-SRHA-5mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1-4
C60-sphere-none-SRHA-5mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-2.96mgNM/L-5.2-25C-0.001_0.01,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-2.96mgNM/L-5.2-25C-0.01_0.1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-2.96mgNM/L-5.2-25C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-5.8mgNM/L-5.5-25C-0.001_0.01-3
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-10_20nm-6.05mgNM/L-5.6-25C-0.01_0.1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-2.96mgNM/L-5.2-25C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C-0.1_1-5
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-5.8mgNM/L-5.5-25C->=1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-6.05mgNM/L-5.6-25C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-CaCl2-1_10nm-6.05mgNM/L-5.6-25C->=1-2
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-2.96mgNM/L-5.2-25C-0.01_0.1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-2.96mgNM/L-5.2-25C-0.1_1-2
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C-0.01_0.1-4
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-5.8mgNM/L-5.5-25C->=1-5
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6.05mgNM/L-5.6-25C-0.01_0.1-2
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6.05mgNM/L-5.6-25C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6.05mgNM/L-5.6-25C->=1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-15C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-25C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-35C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-1_10nm-6mgNM/L-6.7-45C-0.1_1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-30_40nm-2.96mgNM/L-5.2-25C-0.01_0.1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-<1nm-5.8mgNM/L-5.5-25C->=1,1
C60-sphere-none-none-0mgNOM/L-L.L.Ex.-NaCl-<1nm-6.05mgNM/L-5.6-25C->=1,1
C60-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1-3
C60-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1-5
C60-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C->=1-6
C60-sphere-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1-2
C60_20hUV-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1,1
C60_20hUV-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1-3
C60_7DUV-sphere-EHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1,1
C60_7DUV-sphere-EHA-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1-3
C60_7DUV-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.1_1,1
C60_7DUV-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1-3
C60_7DUV-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-6.0-25C-0.01_0.1-2
C60_7DUV-sphere-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.01_0.1-2
C60_7DUV-sphere-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-6.0-25C-0.1_1-7
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-10_20nm-10mgNM/L-6.0-25C-0.01_0.1,1
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-10_20nm-10mgNM/L-8.0-25C-0.01_0.1,1
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-1_10nm-10mgNM/L-6.0-25C-0.1_1-3
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-1_10nm-10mgNM/L-8.0-25C-0.01_0.1-2
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-CaCl2-1_10nm-10mgNM/L-8.0-25C-0.1_1,1
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-6.0-25C-0.01_0.1-2
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-6.0-25C-0.1_1-2
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-1_10nm-10mgNM/L-8.0-25C-0.01_0.1-4
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-<1nm-10mgNM/L-6.0-25C-0.1_1,1
MS2RNA-ellipsoid-none-none-0mgNOM/L-stock-NaCl-<1nm-10mgNM/L-8.0-25C-0.1_1,1
MWNT-tube-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-6.07mgNM/L-6.9-25C-0.1_1-6
MWNT-tube-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-6.07mgNM/L-6.9-25C->=1,1
MWNT-tube-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-6.07mgNM/L-6.9-25C-0.1_1-5
MWNT-tube-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-6.07mgNM/L-6.9-25C->=1-2
MWNTHO-tube-none-none-0mgNOM/L-directSonic-CaCl2-10_20nm-5mgNM/L-7.1-25C-0.01_0.1,1
MWNTHO-tube-none-none-0mgNOM/L-directSonic-CaCl2-1_10nm-5mgNM/L-7.1-25C-0.1_1-6
MWNTHO-tube-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-7.1-25C-0.01_0.1,1
MWNTHO-tube-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-7.1-25C-0.1_1,1
MWNTHO-tube-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-7.1-25C-0.1_1-4
MWNTHO-tube-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-7.1-25C->=1,1
MWNTLO-tube-none-none-0mgNOM/L-directSonic-CaCl2-1_10nm-5mgNM/L-7.1-25C-0.1_1-7
MWNTLO-tube-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-5mgNM/L-7.1-25C-0.1_1-4
MWNTLO-tube-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-7.1-25C-0.1_1-2
MWNTLO-tube-none-none-0mgNOM/L-directSonic-NaCl-<1nm-5mgNM/L-7.1-25C->=1,1
PS-ellipsoid-Alg-none-0mgNOM/L-stock-NaCl-1_10nm-6mgNM/L-7.0-20C-0.1_1-3
PS-ellipsoid-Alg-none-0mgNOM/L-stock-NaCl-<1nm-6mgNM/L-7.0-20C-0.1_1,1
PS-ellipsoid-Alg-none-0mgNOM/L-stock-NaCl-<1nm-6mgNM/L-7.0-20C->=1,1
PS-ellipsoid-HHA-none-0mgNOM/L-stock-NaCl-1_10nm-6mgNM/L-7.0-20C-0.1_1-3
PS-ellipsoid-HHA-none-0mgNOM/L-stock-NaCl-<1nm-6mgNM/L-7.0-20C-0.1_1-2
PS-sphere-Alg-none-0mgNOM/L-stock-NaCl-1_10nm-6mgNM/L-7.0-20C-0.1_1-3
PS-sphere-Alg-none-0mgNOM/L-stock-NaCl-<1nm-6mgNM/L-7.0-20C->=1-2
PS-sphere-HHA-none-0mgNOM/L-stock-NaCl-1_10nm-6mgNM/L-7.0-20C-0.1_1-3
PS-sphere-HHA-none-0mgNOM/L-stock-NaCl-<1nm-6mgNM/L-7.0-20C-0.1_1-2
PS-sphere-SRHA-none-0mgNOM/L-stock-NaCl-1_10nm-50mgNM/L-6.0-25C-0.1_1-3
PS-sphere-SRHA-none-0mgNOM/L-stock-NaCl-<1nm-50mgNM/L-6.0-25C-0.1_1-3
PS-sphere-SRHA-none-0mgNOM/L-stock-NaCl-<1nm-50mgNM/L-6.0-25C->=1-4
PS-sphere-none-none-0mgNOM/L-stock-NaCl-1_10nm-50mgNM/L-6.0-25C-0.1_1-2
PS-sphere-none-none-0mgNOM/L-stock-NaCl-<1nm-50mgNM/L-6.0-25C-0.1_1-5
PS-sphere-none-none-0mgNOM/L-stock-NaCl-<1nm-50mgNM/L-6.0-25C->=1-2
TiO2-sphere-none-SRHA-10mgNOM/L-directSonic-CaCl2-1_10nm-100mgNM/L-8.0-25C-0.001_0.01-2
TiO2-sphere-none-SRHA-10mgNOM/L-directSonic-CaCl2-1_10nm-100mgNM/L-8.0-25C-0.1_1-2
TiO2-sphere-none-SRHA-10mgNOM/L-directSonic-CaCl2-1_10nm-100mgNM/L-8.0-25C->=1,1
TiO2-sphere-none-SRHA-10mgNOM/L-directSonic-CaCl2-<1nm-100mgNM/L-8.0-25C->=1-2
TiO2-sphere-none-SRHA-10mgNOM/L-directSonic-NaCl-1_10nm-100mgNM/L-8.0-25C-0.01_0.1,1
TiO2-sphere-none-SRHA-10mgNOM/L-directSonic-NaCl-<1nm-100mgNM/L-8.0-25C-0.1_1-5
TiO2-sphere-none-none-0mgNOM/L-directSonic-CaCl2-10_20nm-100mgNM/L-8.0-25C-0.1_1,1
TiO2-sphere-none-none-0mgNOM/L-directSonic-CaCl2-1_10nm-100mgNM/L-8.0-25C-0.1_1-3
TiO2-sphere-none-none-0mgNOM/L-directSonic-CaCl2-20_30nm-100mgNM/L-8.0-25C-0.01_0.1,1
TiO2-sphere-none-none-0mgNOM/L-directSonic-CaCl2-20_30nm-100mgNM/L-8.0-25C-0.1_1,1
TiO2-sphere-none-none-0mgNOM/L-directSonic-CaCl2->50-100mgNM/L-8.0-25C-<0.001,1
TiO2-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-100mgNM/L-8.0-25C-0.01_0.1,1
TiO2-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-100mgNM/L-8.0-25C-0.1_1-3
TiO2-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-100mgNM/L-8.0-25C->=1-2
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-CaCl2-10_20nm-10mgNM/L-7.8-25C-0.1_1,1
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-CaCl2-1_10nm-10mgNM/L-7.8-25C-0.1_1-2
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-CaCl2-30_40nm-10mgNM/L-7.8-25C-0.1_1-2
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-CaCl2-40_50nm-10mgNM/L-7.8-25C-0.01_0.1,1
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-10mgNM/L-7.8-25C-0.01_0.1,1
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-1_10nm-10mgNM/L-7.8-25C-0.1_1-3
ZnO-sphere-SRHA-none-0mgNOM/L-directSonic-NaCl-<1nm-10mgNM/L-7.8-25C-0.1_1-2
ZnO-sphere-none-none-0mgNOM/L-directSonic-CaCl2-10_20nm-10mgNM/L-7.8-25C-0.1_1,1
ZnO-sphere-none-none-0mgNOM/L-directSonic-CaCl2-1_10nm-10mgNM/L-7.8-25C-0.1_1,1
ZnO-sphere-none-none-0mgNOM/L-directSonic-CaCl2-1_10nm-10mgNM/L-7.8-25C->=1,1
ZnO-sphere-none-none-0mgNOM/L-directSonic-CaCl2-30_40nm-10mgNM/L-7.8-25C-0.1_1-2
ZnO-sphere-none-none-0mgNOM/L-directSonic-CaCl2-40_50nm-10mgNM/L-7.8-25C-0.01_0.1,1
ZnO-sphere-none-none-0mgNOM/L-directSonic-NaCl-1_10nm-10mgNM/L-7.8-25C-0.1_1-4
ZnO-sphere-none-none-0mgNOM/L-directSonic-NaCl-<1nm-10mgNM/L-7.8-25C-0.1_1,1
ZnO-sphere-none-none-0mgNOM/L-directSonic-NaCl-<1nm-10mgNM/L-7.8-25C->=1,1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QCM-D alpha parameter literature</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="sequences.css"/>
</head>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 10px;
font-weight: 400;
background-color: #fff;
width: 800px;
height: 800px;
}
#main {
float: left;
width: 800px;
}
#sidebar {
float: left;
width: 100px;
margin-left: 850px;
}
#sequence {
width: 50px;
height: 50px;
font-size: 6px;
font-weight: 750;
}
#legend {
padding: 10px 0 0 0px;
position: relative;
}
#sequence text, #legend text {
font-weight: 400;
font-size: 10px;
fill: #000;
}
#chart {
position: absolute;
margin-top: -75px;
}
#chart path {
stroke: #fff;
}
#explanation {
position: relative;
top: 440px;
left: 335px;
width: 140px;
text-align: center;
color: #666;
z-index: -1;
font-weight: 700;
}
#percentage {
font-size: 4em;
}
</style>
<body>
<font size=7> QCM-D alpha parameter literature. </font>
<font size=2> Data organized in coordination with Coy McNew from Vanderbilt University and Eli Goldberg from ETH Zurich
to support their publication, "Machine learning enabled prediction of attachment efficiency".
Supporting authors: Dr. Martin Scheringer (ETH), Dr. Konrad Hungerbuehler (ETH), and Dr. Eugene J LaBoeuf </font>
<p>
</p>
<div id="main">
<div id="sequence"></div>
<svg version="1.1" id="sunburstPathKey" x="800px" y="0px" width="900px"
height="50px" viewBox="30 0 780 51">
<polygon fill="#DEDFDC" points="37.529,24.782 25.209,0 -40.5,0 -40.5,49.563 25.209,49.563 "/>
<polygon fill="#DEDFDC"
points="758.673,49.563 824.382,49.563 836.701,24.782 824.382,0 758.673,0 770.991,24.782 "/>
<polygon fill="#DEDFDC" points="686.02,49.563 751.73,49.563 764.049,24.782 751.73,0 686.02,0 698.339,24.782 "/>
<polygon fill="#DEDFDC"
points="613.369,49.563 679.077,49.563 691.397,24.782 679.077,0 613.369,0 625.689,24.782 "/>
<polygon fill="#DEDFDC"
points="540.717,49.563 606.427,49.563 618.743,24.782 606.427,0 540.717,0 553.037,24.782 "/>
<polygon fill="#DEDFDC"
points="468.062,49.563 533.773,49.563 546.091,24.782 533.773,0 468.062,0 480.385,24.782 "/>
<polygon fill="#DEDFDC"
points="395.535,49.563 461.245,49.563 473.563,24.782 461.245,0 395.535,0 407.855,24.782 "/>
<polygon fill="#DEDFDC"
points="322.883,49.563 388.591,49.563 400.911,24.782 388.591,0 322.883,0 335.204,24.782 "/>
<polygon fill="#DEDFDC"
points="250.231,49.563 315.939,49.563 328.26,24.782 315.939,0 250.231,0 262.551,24.782 "/>
<polygon fill="#DEDFDC"
points="177.456,49.563 243.165,49.563 255.484,24.782 243.165,0 177.456,0 189.776,24.782 "/>
<polygon fill="#DEDFDC"
points="104.804,49.563 170.513,49.563 182.832,24.782 170.513,0 104.804,0 117.123,24.782 "/>
<polygon fill="#DEDFDC" points="32.152,49.563 97.861,49.563 110.18,24.782 97.861,0 32.152,0 44.471,24.782 "/>
<text transform="matrix(0.7171 0 0 1 648.0056 28.4197)" font-family="'Open Sans'" font-size="14">pH</text>
<text transform="matrix(0.7171 0 0 1 705.9314 28.4197)" font-family="'Open Sans'" font-size="14">Temp.</text>
<text transform="matrix(0.7171 0 0 1 786.3503 21.4207)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Alpha</tspan>
<tspan x="0" y="14" font-family="'Open Sans'" font-size="14">Value</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 558.3435 21.4207)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Particle</tspan>
<tspan x="0" y="14" font-family="'Open Sans'" font-size="14">Conc.</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 493.5535 21.4197)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Debye</tspan>
<tspan x="0" y="14" font-family="'Open Sans'" font-size="14">Length</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 424.7673 21.4197)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Salt</tspan>
<tspan x="0" y="14" font-family="'Open Sans'" font-size="14">Type</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 343.5466 21.4207)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Prep.</tspan>
<tspan x="0" y="14" font-family="'Open Sans'" font-size="14">Method</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 266.092 14.4207)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Dissolved</tspan>
<tspan x="15.958" y="14" font-family="'Open Sans'" font-size="14">NOM</tspan>
<tspan x="14.003" y="28" font-family="'Open Sans'" font-size="14">Conc.</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 195.3167 21.4207)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">Dissolved</tspan>
<tspan x="-1.548" y="14" font-family="'Open Sans'" font-size="14">NOM Type</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 134.8367 21.4197)" enable-background="new ">
<tspan x="0" y="0" font-family="'Open Sans'" font-size="14">NOM</tspan>
<tspan x="0" y="14" font-family="'Open Sans'" font-size="14">Layer</tspan>
</text>
<text transform="matrix(0.7171 0 0 1 54.8455 28.4197)" font-family="'Open Sans'" font-size="14">Shape</text>
<text transform="matrix(0.7171 0 0 1 -36.0208 28.4207)" font-family="'Open Sans'" font-size="14">Nanomaterial
</text>
</svg>
<div id="chart">
<div id="explanation" style="visibility: hidden;">
<span id="percentage"></span><br/>
of the available data satisfies this condition sequence.
</div>
</div>
</div>
<div id="sidebar">
<input type="checkbox" id="togglelegend"> Legend<br/>
<div id="legend" style="visibility: hidden;"></div>
</div>
<script type="text/javascript" src="sequences.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
Raw
sequences.js
// Dimensions of sunburst.
var width = 800;
var height = 800;
var radius = Math.min(width, height) / 2;
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 65, h: 40, s: 6, t: 12
};
// Mapping of step names to colors.
var colors = {
"C60": "#e56400", // nano
"C60_20hUV": "#CE6413",// nano
"C60_7DUV": "#B76526",// nano
"ZnO": "#D6ABF2",// nano
"PS": "#AAF1B2",// nano
"MS2RNA": "#DE4F87",// nano
"BL21RNA": "#D8707E",// nano
"TiO2": "#A6a33d",// nano
"MWNTLO": "#CCE5FF",// nano
"MWNTHO": "#66B2FF",// nano
"MWNT": "#99CCFF",// nano
"sphere": "#F0ABF2",// shape
"ellipsoid": "#DEC9AB",// shape
"tube": "74116D", // shape
"none": "#D3D3D3", // NOM Layer and everything
"HHA": "#A0522D", // NOM Layer Variations on red
"EHA": "#A52A2A", // NOM Layer
"SRHA": "#800000", // NOM Layer
"HFA": "#B8860B", // NOM Layer
"Alg": "#808000", // NOM Layer
"NaCl": "#842DCE", // electrolyte
"CaCl2": "#009999", // electrolyte
"directSonic": "#008000", // Suspension protocol
"stock": "#ffa500", // Suspension protocol
"L.L.Ex.": "#5CACEE", // Suspension protocol
"<1nm": "#B0C4DE", // Debye
"1_10nm": "#B0E0E6", // Debye
"10_20nm": "#ADD8E6", // Debye
"20_30nm": "#87CEEB", // Debye
"30_40nm": "#87CEEB", // Debye
"40_50nm": "#87CEEB", // Debye
">50": "#87CEEB", // Debye
"0mgNOM/L": "#D3D3D3", // NOM concentration None color
"1mgNOM/L": "#F5DEB3", // NOM concentration
"5mgNOM/L": "#DEB887", // NOM concentration
"10mgNOM/L": "#D2B48C",// NOM concentration
"2.96mgNM/L": "#4A766E",//Particle Concentration
"5mgNM/L": "#2FAA96",//Particle Concentration
"5.8mgNM/L": "#8CD9D9",//Particle Concentration
"6mgNM/L": "#36DBCA",//Particle Concentration
"6.05mgNM/L": "#36DBCA",//Particle Concentration same color as below
"6.07mgNM/L": "#36DBCA",//Particle Concentration same color
"10mgNM/L": "#90FEFB",//Particle Concentration
"50mgNM/L": "#DAF4F0", //Particle Concentration
"100mgNM/L": "#DBFEF8", //Particle Concentration
"5.2": "#FFCCE6",// pH
"5.5": "#FF99CC",// pH
"5.6": "#FF66B3",// pH
"6.0": "#FF3399", // pH
"6.7": "#FF0080",// pH
"6.9": "#CC0066",// pH
"7.0": "#CC0066",// pH
"7.1": "#99004D",// pH
"7.8": "#660033",// pH
"8.0": "#471F33",// pH
"15C": "#FFA500",// temp
"20C": "#FF8C00",// temp
"25C": "#FF7F50",// temp
"35C": "#FF6347",// temp
"45C": "#FF4500",// temp
">=1": "#ff0000",// alpha
"0.1_1": "#0000ff",// alpha
"0.01_0.1": "#80ff00",// alpha
"0.001_0.01": "#ffff00",// alpha
"<0.001": "#FF6347"// alpha
};
// Total size of all segments; we set this later, after loading the data.
var totalSize = 0;
var vis = d3.select("#chart").append("svg:svg")
.attr("width", width + 50)
.attr("height", height)
.append("svg:g")
.attr("id", "container")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function (d) {
return d.size;
});
var arc = d3.svg.arc()
.startAngle(function (d) {
return d.x;
})
.endAngle(function (d) {
return d.x + d.dx;
})
.innerRadius(function (d) {
return Math.sqrt(d.y);
})
.outerRadius(function (d) {
return Math.sqrt(d.y + d.dy);
});
// Use d3.text and d3.csv.parseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.
d3.text("enmExperimentalData.csv", function (text) {
var csv = d3.csv.parseRows(text);
var json = buildHierarchy(csv);
createVisualization(json);
});
// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {
// Basic setup of page elements.
initializeBreadcrumbTrail();
drawLegend();
d3.select("#togglelegend").on("click", toggleLegend);
// Bounding circle underneath the sunburst, to make it easier to detect
// when the mouse leaves the parent g.
vis.append("svg:circle")
.attr("r", radius)
.style("opacity", 0);
// For efficiency, filter nodes to keep only those large enough to see.
var nodes = partition.nodes(json)
.filter(function (d) {
return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
});
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter().append("svg:path")
.attr("display", function (d) {
return d.depth ? null : "none";
})
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function (d) {
return colors[d.name];
})
.style("opacity", 1)
.on("mouseover", mouseover);
// Add the mouseleave handler to the bounding circle.
d3.select("#container").on("mouseleave", mouseleave);
// Get total size of the tree = value of root node from partition.
totalSize = path.node().__data__.value;
};
// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) {
var percentage = (100 * d.value / totalSize).toPrecision(3);
var percentageString = percentage + "%";
if (percentage < 0.1) {
percentageString = "< 0.1%";
}
d3.select("#percentage")
.text(percentageString);
d3.select("#explanation")
.style("visibility", "");
var sequenceArray = getAncestors(d);
updateBreadcrumbs(sequenceArray, percentageString);
// Fade all the segments.
d3.selectAll("path")
.style("opacity", 0.1);
// Then highlight only those that are an ancestor of the current segment.
vis.selectAll("path")
.filter(function (node) {
return (sequenceArray.indexOf(node) >= 0);
})
.style("opacity", 1);
}
// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) {
// Hide the breadcrumb trail
d3.select("#trail")
.style("visibility", "hidden");
// Deactivate all segments during transition.
d3.selectAll("path").on("mouseover", null);
// Transition each segment to full opacity and then reactivate it.
d3.selectAll("path")
.transition()
.duration(1000)
.style("opacity", 1)
.each("end", function () {
d3.select(this).on("mouseover", mouseover);
});
d3.select("#explanation")
.style("visibility", "hidden");
}
// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) {
var path = [];
var current = node;
while (current.parent) {
path.unshift(current);
current = current.parent;
}
return path;
}
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", width + 200) // ADD TO WIDTH TO FIT BETTER LOOKING BREADCRUMBTRAIL
.attr("height", 50)
.attr("id", "trail");
// Add the label at the end, for the percentage.
trail.append("svg:text")
.attr("id", "endlabel")
.style("fill", "#000");
}
// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
var points = [];
points.push("0,0");
points.push(b.w + ",0");
points.push(b.w + b.t + "," + (b.h / 2));
points.push(b.w + "," + b.h);
points.push("0," + b.h);
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
points.push(b.t + "," + (b.h / 2));
}
return points.join(" ");
}
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {
// Data join; key function combines name and depth (= position in sequence).
var g = d3.select("#trail")
.selectAll("g")
.data(nodeArray, function (d) {
return d.name + d.depth;
});
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function (d) {
return colors[d.name];
});
entering.append("svg:text")
.attr("x", (b.w + b.t) / 2)
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("dx", ".15em")
.attr("text-anchor", "middle")
.text(function (d) {
return d.name;
});
// Set position for entering and updating nodes.
g.attr("transform", function (d, i) {
return "translate(" + i * (b.w + b.s) + ", 0)";
});
// Remove exiting nodes.
g.exit().remove();
// Now move and update the percentage at the end.
d3.select("#trail").select("#endlabel")
.attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(percentageString);
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
function drawLegend() {
// Dimensions of legend item: width, height, spacing, radius of rounded rect.
var li = {
w: 100, h: 25, s: 3, r: 3
};
var legend = d3.select("#legend").append("svg:svg")
.attr("width", li.w)
.attr("height", d3.keys(colors).length * (li.h + li.s));
var g = legend.selectAll("g")
.data(d3.entries(colors))
.enter().append("svg:g")
.attr("transform", function (d, i) {
return "translate(0," + i * (li.h + li.s) + ")";
});
g.append("svg:rect")
.attr("rx", li.r)
.attr("ry", li.r)
.attr("width", li.w)
.attr("height", li.h)
.style("fill", function (d) {
return d.value;
});
g.append("svg:text")
.attr("x", li.w / 2)
.attr("y", li.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function (d) {
return d.key;
});
}
function toggleLegend() {
var legend = d3.select("#legend");
if (legend.style("visibility") == "hidden") {
legend.style("visibility", "");
} else {
legend.style("visibility", "hidden");
}
}
// Take a 2-column CSV and transform it into a hierarchical structure suitable
// for a partition layout. The first column is a sequence of step names, from
// root to leaf, separated by hyphens. The second column is a count of how
// often that sequence occurred.
function buildHierarchy(csv) {
var root = {"name": "root", "children": []};
for (var i = 0; i < csv.length; i++) {
var sequence = csv[i][0];
var size = +csv[i][1];
if (isNaN(size)) { // e.g. if this is a header row
continue;
}
var parts = sequence.split("-");
var currentNode = root;
for (var j = 0; j < parts.length; j++) {
var children = currentNode["children"];
var nodeName = parts[j];
var childNode;
if (j + 1 < parts.length) {
// Not yet at the end of the sequence; move down the tree.
var foundChild = false;
for (var k = 0; k < children.length; k++) {
if (children[k]["name"] == nodeName) {
childNode = children[k];
foundChild = true;
break;
}
}
// If we don't already have a child node for this branch, create it.
if (!foundChild) {
childNode = {"name": nodeName, "children": []};
children.push(childNode);
}
currentNode = childNode;
} else {
// Reached the end of the sequence; create a leaf node.
childNode = {"name": nodeName, "size": size};
children.push(childNode);
}
}
}
return root;
};
Raw
uniqueFeaturesForColorAssignment.csv
nmId shape nomLayer dissNomType dissNomConcBin prepMethod saltType debyeLengthBin concPumpBin pH tempBin depAttEffBin
0 C60 sphere none none 0mgNOM/L L.L.Ex. NaCl 1_10nm 6mgENM/L 6.7 15C 0.1_1
1 C60-20hUV ellipsoid HHA SRHA 1mgNOM/L directSonic CaCl2 <1nm 6.05mgENM/L 5.6 25C 0.01_0.1
2 C60-7DUV tube HFA EHA 5mgNOM/L stock 10_20nm 5mgENM/L 6.0 35C >=1
3 ZnO SRHA Alg 10mgNOM/L 40_50nm 10mgENM/L 7.8 45C 0.001_0.01
4 PS EHA 30_40nm 2.96mgENM/L 7.0 20C <0.001
5 MS2RNA Alg >50 5.8mgENM/L 5.2
6 BL21RNA 20_30nm 6.07mgENM/L 5.5
7 MWNT 50mgENM/L 8.0
8 TiO2 100mgENM/L 6.9
9 MWNTLO 7.1
10 MWNTHO
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment