Plot Diagrams

Note

Gratefully pilfering and far too closely mimic-ing the incredible giants at “Data to Vis” and “The R Graph Gallery”, replicated in spirit here to practice the workflows. I have copied and minimally modified their structures for my own use in the context of my atlas for seamless reading, but you really should go read this in their words.

CautionUnder refinement

This is being reworked, several placeholders and defaults are still present.

By Data Type

Numeric

flowchart TD
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Numeric}}:::plotnode --> B{{One numeric variable}}:::plotnode
    A --> C{{Two numeric variables}}:::plotnode
    C --> CN{{Not ordered}}:::plotnode
    CN --> CNF{{Few Points}}:::plotnode
    CN --> CNM{{Many points}}:::plotnode
    C --> CO{{Ordered}}:::plotnode
    A --> D{{Three numeric variables}}:::plotnode
    D --> DN{{Not ordered}}:::plotnode
    D --> DO{{Ordered}}:::plotnode
    A --> E{{Many numeric variables}}:::plotnode
    E --> EO{{Ordered}}:::plotnode
    E --> EN{{Not ordered}}:::plotnode

    B --> PDHist1(("Histogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_histogram.png' width='40' height='30'/>")):::c_dist
    PDHist1 --> PDDensity1(("Density <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_density.png' width='40' height='30'/>")):::c_dist

    CNF --> PDBox1(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox1 --> PDHist2(("Histogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_histogram.png' width='40' height='30'/>")):::c_dist
    PDHist2 --> PDScat1(("Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_scatter.png' width='40' height='30'/>")):::c_corr

    CNM --> PDViolin1(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin1 --> PDDensity2(("Density <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_density.png' width='40' height='30'/>")):::c_dist
    PDDensity2 --> PDScat2(("Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_scatter.png' width='40' height='30'/>")):::c_corr

    CO --> PDConScat1(("Con. Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_connected_scatter.png' width='40' height='30'/>")):::c_corr
    PDConScat1 --> PDArea1(("Area Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_area.png' width='40' height='30'/>")):::c_evol
    PDArea1 --> PDLine1(("Line Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_line.png' width='40' height='30'/>")):::c_evol

    DN --> PDBox2(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox2 --> PDViolin2(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin2 --> PDBub1(("Bubble <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_bubble.png' width='40' height='30'/>")):::c_corr
    PDBub1 --> PDLine2(("Line Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_line.png' width='40' height='30'/>")):::c_evol
    PDLine2 --> PDArea2(("Area Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_area.png' width='40' height='30'/>")):::c_evol

    EO --> PDArea3(("Area Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_area.png' width='40' height='30'/>")):::c_evol
    DO --> PDArea3
    PDArea3 --> PDStream1(("Streamgraph <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_streamchart.png' width='40' height='30'/>")):::c_evol
    PDStream1 --> PDLine3(("Line Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_line.png' width='40' height='30'/>")):::c_evol

    EN --> PDBox3(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox3 --> PDViolin3(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin3 --> PDRidge1(("Ridgeline <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_ridgeline.png' width='40' height='30'/>")):::c_dist
    PDRidge1 --> PDCorr1(("Correlogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_correlogram.png' width='40' height='30'/>")):::c_corr
    PDCorr1 --> PDHeat1(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr
    PDHeat1 --> PDDendro1(("Dendrogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_dendrogram.png' width='40' height='30'/>")):::c_whole

    %% Click Interactions
    click PDHist1 "https://jimcoll.github.io/classes/PD_Histogram.html"
    click PDHist2 "https://jimcoll.github.io/classes/PD_Histogram.html"
    click PDDensity1 "https://jimcoll.github.io/classes/PD_Density.html"
    click PDDensity2 "https://jimcoll.github.io/classes/PD_Density.html"
    click PDBox1 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox2 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox3 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDScat1 "https://jimcoll.github.io/classes/PD_Scatter.html"
    click PDScat2 "https://jimcoll.github.io/classes/PD_Scatter.html"
    click PDViolin1 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDViolin2 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDViolin3 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDConScat1 "https://jimcoll.github.io/classes/PD_Connected_scatter.html"
    click PDArea1 "https://jimcoll.github.io/classes/PD_Area.html"
    click PDArea2 "https://jimcoll.github.io/classes/PD_Area.html"
    click PDArea3 "https://jimcoll.github.io/classes/PD_Area.html"
    click PDLine1 "https://jimcoll.github.io/classes/PD_Line.html"
    click PDLine2 "https://jimcoll.github.io/classes/PD_Line.html"
    click PDLine3 "https://jimcoll.github.io/classes/PD_Line.html"
    click PDBub1 "https://jimcoll.github.io/classes/PD_Bubble.html"
    click PDStream1 "https://jimcoll.github.io/classes/PD_Streamchart.html"
    click PDRidge1 "https://jimcoll.github.io/classes/PD_Ridgeline.html"
    click PDCorr1 "https://jimcoll.github.io/classes/PD_Correlogram.html"
    click PDHeat1 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDDendro1 "https://jimcoll.github.io/classes/PD_Dendrogram.html"

Catagorical

flowchart TD
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Categorical}}:::plotnode --> B{{One Categorical variable}}:::plotnode
    A --> C{{Two or more Categorical variable}}:::plotnode
    C --> D{{two lists}}:::plotnode       
    C --> E{{Nested}}:::plotnode  
    C --> F{{Subgroup}}:::plotnode 
    C --> G{{Adjacecy}}:::plotnode 

    B --> PDBar1(("Barplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar1 --> PDLollipop1(("Lollipop <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_lollipop.png' width='40' height='30'/>")):::c_rank
    PDLollipop1 --> PDHeat1(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr
    PDHeat1 --> PDWord1(("Wordcloud <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_wordcloud.png' width='40' height='30'/>")):::c_rank
    PDWord1 --> PDDoughnut1(("Doughnut <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_doughnut.png' width='40' height='30'/>")):::c_whole
    PDDoughnut1 --> PDPie1(("Pie Chart <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_pie_chart.png' width='40' height='30'/>")):::c_whole
    PDPie1 --> PDTreemap1(("Treemap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_treemap.png' width='40' height='30'/>")):::c_whole
    PDTreemap1 --> PDCircPack1(("Circular Pack <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_circular_packing.png' width='40' height='30'/>")):::c_whole

    D --> PDVenn1(("Venn <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_venn_diagram.png' width='40' height='30'/>")):::c_whole

    E --> PDTreemap2(("Treemap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_treemap.png' width='40' height='30'/>")):::c_whole
    PDTreemap2 --> PDCircPack2(("Circular Pack <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_circular_packing.png' width='40' height='30'/>")):::c_whole
    PDCircPack2 --> PDSun1(("Sunburst <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sunburst.png' width='40' height='30'/>")):::c_whole
    PDSun1 --> PDBar2(("Barplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar2 --> PDDendro1(("Dendrogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_dendrogram.png' width='40' height='30'/>")):::c_whole

    F --> PDScat1(("Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_scatter.png' width='40' height='30'/>")):::c_corr
    PDScat1 --> PDHeat2(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr
    PDHeat2 --> PDLollipop2(("Lollipop <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_lollipop.png' width='40' height='30'/>")):::c_rank
    PDLollipop2 --> PDBar3(("Barplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar3 --> PDParallel1(("Parallel <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_parallel.png' width='40' height='30'/>")):::c_rank
    PDParallel1 --> PDRadar1(("Radar <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_radar.png' width='40' height='30'/>")):::c_rank
    PDRadar1 --> PDSankey1(("Sankey <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo

    G --> PDSankey2(("Sankey <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo
    PDSankey2 --> PDHeat3(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr

    %% Click Interactions
    click PDBar1 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDBar2 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDBar3 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDLollipop1 "https://jimcoll.github.io/classes/PD_Lollipop.html"
    click PDLollipop2 "https://jimcoll.github.io/classes/PD_Lollipop.html"
    click PDHeat1 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDHeat2 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDHeat3 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDWord1 "https://jimcoll.github.io/classes/PD_Wordcloud.html"
    click PDDoughnut1 "https://jimcoll.github.io/classes/PD_Doughnut.html"
    click PDPie1 "https://jimcoll.github.io/classes/PD_Pie_chart.html"
    click PDTreemap1 "https://jimcoll.github.io/classes/PD_Treemap.html"
    click PDTreemap2 "https://jimcoll.github.io/classes/PD_Treemap.html"
    click PDCircPack1 "https://jimcoll.github.io/classes/PD_Circular_packing.html"
    click PDCircPack2 "https://jimcoll.github.io/classes/PD_Circular_packing.html"
    click PDVenn1 "https://jimcoll.github.io/classes/PD_Venn_diagram.html"
    click PDSun1 "https://jimcoll.github.io/classes/PD_Sunburst.html"
    click PDDendro1 "https://jimcoll.github.io/classes/PD_Dendrogram.html"
    click PDScat1 "https://jimcoll.github.io/classes/PD_Scatter.html"
    click PDParallel1 "https://jimcoll.github.io/classes/PD_Parallel.html"
    click PDRadar1 "https://jimcoll.github.io/classes/PD_Radar.html"
    click PDSankey1 "https://jimcoll.github.io/classes/PD_Sankey.html"
    click PDSankey2 "https://jimcoll.github.io/classes/PD_Sankey.html"

Numeric and Catagorical

flowchart TD
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    Root{{Num & Cat}}:::plotnode --> A{{One Num, One Cat}}:::plotnode
    Root --> B{{One Cat, Several Num}}:::plotnode
    Root --> C{{Several Cat, One Num}}:::plotnode

    A --> A1{{One obs. per group}}:::plotnode
    A --> A2{{Several obs. per group}}:::plotnode

    A1 --> PDBox1(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox1 --> PDLollipop1(("Lollipop <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_lollipop.png' width='40' height='30'/>")):::c_rank
    PDLollipop1 --> PDDoughnut1(("Doughnut <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_doughnut.png' width='40' height='30'/>")):::c_whole
    PDDoughnut1 --> PDPie1(("Pie <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_pie_chart.png' width='40' height='30'/>")):::c_whole
    PDPie1 --> PDWord1(("Word Cloud <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_wordcloud.png' width='40' height='30'/>")):::c_rank
    PDWord1 --> PDTreemap1(("Treemap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_treemap.png' width='40' height='30'/>")):::c_whole
    PDTreemap1 --> PDCircPack1(("Circular Packing <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_circular_packing.png' width='40' height='30'/>")):::c_whole

    A2 --> PDBox2(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox2 --> PDViolin1(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin1 --> PDRidge1(("Ridgeline <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_ridgeline.png' width='40' height='30'/>")):::c_dist
    PDRidge1 --> PDDensity1(("Density <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_density.png' width='40' height='30'/>")):::c_dist
    PDDensity1 --> PDHist1(("Histogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_histogram.png' width='40' height='30'/>")):::c_dist

    B --> B1{{No Order}}:::plotnode
    B --> B2{{A Num is Ordered}}:::plotnode
    B --> B3{{One Value per Group}}:::plotnode

    B1 --> PDScat1(("Grouped Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_scatter.png' width='40' height='30'/>")):::c_corr
    PDScat1 --> PDDensity2(("2D Density <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_density.png' width='40' height='30'/>")):::c_dist
    PDDensity2 --> PDBox3(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox3 --> PDViolin2(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin2 --> PDScat2(("PCA <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_scatter.png' width='40' height='30'/>")):::c_corr
    PDScat2 --> PDCorr1(("Correlogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_correlogram.png' width='40' height='30'/>")):::c_corr

    B2 --> PDStack1(("Stacked Area <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_area.png' width='40' height='30'/>")):::c_evol
    PDStack1 --> PDArea1(("Area <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_area.png' width='40' height='30'/>")):::c_evol
    PDArea1 --> PDStream1(("Streamgraph <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_streamchart.png' width='40' height='30'/>")):::c_evol
    PDStream1 --> PDLine1(("Line Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_line.png' width='40' height='30'/>")):::c_evol
    PDLine1 --> PDConScat1(("Connected Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_connected_scatter.png' width='40' height='30'/>")):::c_corr

    B3 --> PDScat3(("Grouped Scatter <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_scatter.png' width='40' height='30'/>")):::c_corr
    PDScat3 --> PDHeat1(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr
    PDHeat1 --> PDLollipop2(("Lollipop <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_lollipop.png' width='40' height='30'/>")):::c_rank
    PDLollipop2 --> PDBar1(("Grouped Bar <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar1 --> PDBar2(("Stacked Bar <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar2 --> PDParallel1(("Parallel Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_parallel.png' width='40' height='30'/>")):::c_rank
    PDParallel1 --> PDRadar1(("Spider Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_radar.png' width='40' height='30'/>")):::c_rank
    PDRadar1 --> PDSankey1(("Sankey Diagram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo

    C --> C1{{Subgroup}}:::plotnode
    C --> C2{{Nested}}:::plotnode
    C --> C3{{Adjacency}}:::plotnode

    C1 --> C1_1{{One obs. per group}}:::plotnode
    C1 --> C1_2{{Several obs. per group}}:::plotnode
    C1_1 --> PDScat3
    C1_2 --> PDBox4(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox4 --> PDViolin3(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist

    C2 --> C2_1{{One obs. per group}}:::plotnode
    C2 --> C2_2{{Several obs. per group}}:::plotnode
    C2_1 --> PDBar3(("Barplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar3 --> PDDendro1(("Dendrogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_dendrogram.png' width='40' height='30'/>")):::c_whole
    PDDendro1 --> PDSun1(("Sunburst <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sunburst.png' width='40' height='30'/>")):::c_whole
    PDSun1 --> PDTreemap2(("Treemap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_treemap.png' width='40' height='30'/>")):::c_whole
    PDTreemap2 --> PDCircPack2(("Circular Packing <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_circular_packing.png' width='40' height='30'/>")):::c_whole

    C2_2 --> PDBox5(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox5 --> PDViolin4(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist

    C3 --> PDNet1(("Network <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_network.png' width='40' height='30'/>")):::c_geo
    PDNet1 --> PDChord1(("Chord <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_chord.png' width='40' height='30'/>")):::c_geo
    PDChord1 --> PDArc1(("Arc <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_network.png' width='40' height='30'/>")):::c_geo
    PDArc1 --> PDSankey2(("Sankey <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo
    PDSankey2 --> PDHeat2(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr

    %% Click Interactions
    click PDBox1 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox2 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox3 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox4 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox5 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDLollipop1 "https://jimcoll.github.io/classes/PD_Lollipop.html"
    click PDLollipop2 "https://jimcoll.github.io/classes/PD_Lollipop.html"
    click PDDoughnut1 "https://jimcoll.github.io/classes/PD_Doughnut.html"
    click PDPie1 "https://jimcoll.github.io/classes/PD_Pie_chart.html"
    click PDWord1 "https://jimcoll.github.io/classes/PD_Wordcloud.html"
    click PDTreemap1 "https://jimcoll.github.io/classes/PD_Treemap.html"
    click PDTreemap2 "https://jimcoll.github.io/classes/PD_Treemap.html"
    click PDCircPack1 "https://jimcoll.github.io/classes/PD_Circular_packing.html"
    click PDCircPack2 "https://jimcoll.github.io/classes/PD_Circular_packing.html"
    click PDViolin1 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDViolin2 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDViolin3 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDViolin4 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDRidge1 "https://jimcoll.github.io/classes/PD_Ridgeline.html"
    click PDDensity1 "https://jimcoll.github.io/classes/PD_Density.html"
    click PDDensity2 "https://jimcoll.github.io/classes/PD_Density.html"
    click PDHist1 "https://jimcoll.github.io/classes/PD_Histogram.html"
    click PDScat1 "https://jimcoll.github.io/classes/PD_Scatter.html"
    click PDScat2 "https://jimcoll.github.io/classes/PD_Scatter.html"
    click PDScat3 "https://jimcoll.github.io/classes/PD_Scatter.html"
    click PDCorr1 "https://jimcoll.github.io/classes/PD_Correlogram.html"
    click PDStack1 "https://jimcoll.github.io/classes/PD_Stacked_area.html"
    click PDArea1 "https://jimcoll.github.io/classes/PD_Area.html"
    click PDStream1 "https://jimcoll.github.io/classes/PD_Streamchart.html"
    click PDLine1 "https://jimcoll.github.io/classes/PD_Line.html"
    click PDConScat1 "https://jimcoll.github.io/classes/PD_Connected_scatter.html"
    click PDHeat1 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDHeat2 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDBar1 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDBar2 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDBar3 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDParallel1 "https://jimcoll.github.io/classes/PD_Parallel.html"
    click PDRadar1 "https://jimcoll.github.io/classes/PD_Radar.html"
    click PDSankey1 "https://jimcoll.github.io/classes/PD_Sankey.html"
    click PDSankey2 "https://jimcoll.github.io/classes/PD_Sankey.html"
    click PDDendro1 "https://jimcoll.github.io/classes/PD_Dendrogram.html"
    click PDSun1 "https://jimcoll.github.io/classes/PD_Sunburst.html"
    click PDNet1 "https://jimcoll.github.io/classes/PD_Network.html"
    click PDChord1 "https://jimcoll.github.io/classes/PD_Chord.html"
    click PDArc1 "https://jimcoll.github.io/classes/PD_Arc.html"

Maps

flowchart TD
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Map}}:::plotnode --> PDbasemap(("Baseamaps <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDbasemap --> PDMapCon(("Connection <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_connection.png' width='40' height='30'/>")):::c_geo
    PDMapCon --> PDChoro(("Choropleth <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_choropleth.png' width='40' height='30'/>")):::c_geo
    PDChoro --> PDHex(("Hexbin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_hexbin.png' width='40' height='30'/>")):::c_geo
    PDHex --> PDCarto(("Cartogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_cartogram.png' width='40' height='30'/>")):::c_geo

    %% Click Interactions
    click PDCarto "https://jimcoll.github.io/classes/PD_Cartogram.html"
    click PDbasemap "https://jimcoll.github.io/classes/PD_Cartogram.html"
    click PDChord "https://jimcoll.github.io/classes/PD_Chord.html"
    click PDMapCon "https://jimcoll.github.io/classes/PD_Connection.html"
    click PDChoro "https://jimcoll.github.io/classes/PD_Choropleth.html"
    click PDHex "https://jimcoll.github.io/classes/PD_Hexbin.html"

Network

flowchart TD
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Network}}:::plotnode --> B{{Network}}:::plotnode
    A --> C{{Nested}}:::plotnode
    C --> CNV{{No Value}}:::plotnode
    C --> CVFL{{Value for Leaf}}:::plotnode
    C --> CVFE{{Value for Edge}}:::plotnode
    C --> CVFC{{Value for Connection}}:::plotnode

    B --> PDNet1(("Network <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_network.png' width='40' height='30'/>")):::c_geo
    PDNet1 --> PDChord1(("Chord <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_chord.png' width='40' height='30'/>")):::c_geo
    PDChord1 --> PDSankey1(("Sankey <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo
    PDSankey1 --> PDHeat1(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr
    PDHeat1 --> PDHive1(("Hive <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_hive.png' width='40' height='30'/>")):::c_geo

    CNV --> PDDendro1(("Dendrogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_dendrogram.png' width='40' height='30'/>")):::c_whole
    CVFL --> PDDendro1
    PDDendro1 --> PDTreemap1(("Treemap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_treemap.png' width='40' height='30'/>")):::c_whole
    PDTreemap1 --> PDCircPack1(("Circular Pack <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_circular_packing.png' width='40' height='30'/>")):::c_whole
    PDCircPack1 --> PDSun1(("Sunburst <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sunburst.png' width='40' height='30'/>")):::c_whole
    PDSun1 --> PDSankey2(("Sankey <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo

    CVFE --> PDDendro2(("Dendrogram <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_dendrogram.png' width='40' height='30'/>")):::c_whole
    PDDendro2 --> PDSankey3(("Sankey <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_sankey.png' width='40' height='30'/>")):::c_geo
    PDSankey3 --> PDChord2(("Chord <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_chord.png' width='40' height='30'/>")):::c_geo
    
    CVFC --> PDChord3(("Chord <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_chord.png' width='40' height='30'/>")):::c_geo

    %% Click Interactions
    click PDNet1 "https://jimcoll.github.io/classes/PD_Network.html"
    click PDChord1 "https://jimcoll.github.io/classes/PD_Chord.html"
    click PDChord2 "https://jimcoll.github.io/classes/PD_Chord.html"
    click PDChord3 "https://jimcoll.github.io/classes/PD_Chord.html"
    click PDSankey1 "https://jimcoll.github.io/classes/PD_Sankey.html"
    click PDSankey2 "https://jimcoll.github.io/classes/PD_Sankey.html"
    click PDSankey3 "https://jimcoll.github.io/classes/PD_Sankey.html"
    click PDHeat1 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDHive1 "https://jimcoll.github.io/classes/PD_Hive.html"
    click PDDendro1 "https://jimcoll.github.io/classes/PD_Dendrogram.html"
    click PDDendro2 "https://jimcoll.github.io/classes/PD_Dendrogram.html"
    click PDTreemap1 "https://jimcoll.github.io/classes/PD_Treemap.html"
    click PDCircPack1 "https://jimcoll.github.io/classes/PD_Circular_packing.html"
    click PDSun1 "https://jimcoll.github.io/classes/PD_Sunburst.html"

Time Series

flowchart TD
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Time Series}}:::plotnode --> B{{One series}}:::plotnode
    A --> C{{Several series}}:::plotnode

    B --> PDBox1(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox1 --> PDViolin1(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin1 --> PDRidge1(("Ridgeline <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_ridgeline.png' width='40' height='30'/>")):::c_dist
    PDRidge1 --> PDArea1(("Area Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_area.png' width='40' height='30'/>")):::c_evol
    PDArea1 --> PDLine1(("Line Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_line.png' width='40' height='30'/>")):::c_evol
    PDLine1 --> PDBar1(("Barplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_barplot.png' width='40' height='30'/>")):::c_rank
    PDBar1 --> PDLollipop1(("Lollipop <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_lollipop.png' width='40' height='30'/>")):::c_rank

    C --> PDBox2(("Boxplot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_boxplot.png' width='40' height='30'/>")):::c_dist
    PDBox2 --> PDViolin2(("Violin <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_violin.png' width='40' height='30'/>")):::c_dist
    PDViolin2 --> PDRidge2(("Ridgeline <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_ridgeline.png' width='40' height='30'/>")):::c_dist
    PDRidge2 --> PDHeat1(("Heatmap <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_heatmap.png' width='40' height='30'/>")):::c_corr
    PDHeat1--> PDLine2(("Line Plot <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_line.png' width='40' height='30'/>")):::c_evol
    PDLine2 --> PDStream1(("Streamgraph <br/> <img src='https://github.com/JimColl/classes/raw/master/_pd_streamchart.png' width='40' height='30'/>")):::c_evol

    %% Click Interactions
    click PDBox1 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDBox2 "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click PDViolin1 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDViolin2 "https://jimcoll.github.io/classes/PD_Violin.html"
    click PDRidge1 "https://jimcoll.github.io/classes/PD_Ridgeline.html"
    click PDRidge2 "https://jimcoll.github.io/classes/PD_Ridgeline.html"
    click PDArea1 "https://jimcoll.github.io/classes/PD_Area.html"
    click PDLine1 "https://jimcoll.github.io/classes/PD_Line.html"
    click PDLine2 "https://jimcoll.github.io/classes/PD_Line.html"
    click PDBar1 "https://jimcoll.github.io/classes/PD_Barplot.html"
    click PDLollipop1 "https://jimcoll.github.io/classes/PD_Lollipop.html"
    click PDHeat1 "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click PDStream1 "https://jimcoll.github.io/classes/PD_Streamchart.html"

Clustered by Intent

Distribution

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_dist fill:#2D4F1E,stroke:#1B3012,stroke-width:2px,color:#fff,font-weight:bold;
    
    A{{Distribution}}:::plotnode --> B(Violin):::c_dist
    A --> C(Density):::c_dist
    A --> D(Histograms):::c_dist
    A --> E(Boxplot):::c_dist
    A --> F(Ridgeline):::c_dist
    
    %% Click Interactions
    click B "https://jimcoll.github.io/classes/PD_Violin.html"
    click C "https://jimcoll.github.io/classes/PD_Density.html"
    click D "https://jimcoll.github.io/classes/PD_Histogram.html"
    click E "https://jimcoll.github.io/classes/PD_Boxplot.html"
    click F "https://jimcoll.github.io/classes/PD_Ridgeline.html"

Corrolation

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_corr fill:#A64B2A,stroke:#632D19,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Correlation}}:::plotnode--> B(Scatter):::c_corr
    A --> C(Heatmap):::c_corr
    A --> D(Correlogram):::c_corr
    A --> E(Bubble):::c_corr
    A --> F(Connected Scatter):::c_corr
    A --> G(Density):::c_corr
    A --> H(3D):::c_corr
    A --> I(Taylor Diagram):::c_corr

    %% Click Interactions
    click B "https://jimcoll.github.io/classes/PD_Scatter.html"
    click C "https://jimcoll.github.io/classes/PD_Heatmap.html"
    click D "https://jimcoll.github.io/classes/PD_Correlogram.html"
    click E "https://jimcoll.github.io/classes/PD_Bubble.html"
    click F "https://jimcoll.github.io/classes/PD_Connected_scatter.html"
    click G "https://jimcoll.github.io/classes/PD_Density.html"
    click H "https://jimcoll.github.io/classes/PD_3D.html"
    click I "https://jimcoll.github.io/classes/PD_Taylor_Diagram.html"

Ranking

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_rank fill:#D4A373,stroke:#9E7954,stroke-width:2px,color:#000,font-weight:bold;

    A{{Ranking}}:::plotnode --> B(Barplot):::c_rank
    A --> C(Spider / Radar):::c_rank
    A --> D(Wordcloud):::c_rank
    A --> E(Parallel):::c_rank
    A --> F(Lollipop):::c_rank
    A --> G(Circular Barplot):::c_rank

    %% Click Interactions
    click B "https://jimcoll.github.io/classes/PD_Barplot.html"
    click C "https://jimcoll.github.io/classes/PD_Radar.html"
    click D "https://jimcoll.github.io/classes/PD_Wordcloud.html"
    click E "https://jimcoll.github.io/classes/PD_Parallel.html"
    click F "https://jimcoll.github.io/classes/PD_Lollipop.html"
    click G "https://jimcoll.github.io/classes/PD_Circular_Barplot.html"

Part of a whole

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_whole fill:#A3B18A,stroke:#588157,stroke-width:2px,color:#000,font-weight:bold;

    A{{Part of Whole}}:::plotnode --> B(Treemap):::c_whole
    A --> C(Venn Diagram):::c_whole
    A --> D(Doughnut):::c_whole
    A --> E(Pie Chart):::c_whole
    A --> F(Dendrogram):::c_whole
    A --> G(Circular Packing):::c_whole
    A --> H(Sunburst):::c_whole
    A --> I(Quadrant):::c_whole

    %% Click Interactions
    click B "https://jimcoll.github.io/classes/PD_Treemap.html"
    click C "https://jimcoll.github.io/classes/PD_Venn_diagram.html"
    click D "https://jimcoll.github.io/classes/PD_Doughnut.html"
    click E "https://jimcoll.github.io/classes/PD_Pie_chart.html"
    click F "https://jimcoll.github.io/classes/PD_Dendrogram.html"
    click G "https://jimcoll.github.io/classes/PD_Circular_packing.html"
    click H "https://jimcoll.github.io/classes/PD_Sunburst.html"
    click I "https://jimcoll.github.io/classes/PD_quadrant.html"

Evolution

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_evol fill:#6B8A8D,stroke:#4A6163,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Evolution}}:::plotnode --> B(Line):::c_evol
    A --> C(Area):::c_evol
    A --> D(Stacked Area):::c_evol
    A --> E(Streamchart):::c_evol

    %% Click Interactions
    click B "https://jimcoll.github.io/classes/PD_Line.html"
    click C "https://jimcoll.github.io/classes/PD_Area.html"
    click D "https://jimcoll.github.io/classes/PD_Stacked_area.html"
    click E "https://jimcoll.github.io/classes/PD_Streamchart.html"

Map

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Map}}:::plotnode --> B(Choropleth):::c_geo
    A --> C(Hexbin):::c_geo
    A --> D(Cartogram):::c_geo
    A --> E(Connection Map):::c_geo

    %% Click Interactions
    click B "https://jimcoll.github.io/classes/PD_Choropleth.html"
    click C "https://jimcoll.github.io/classes/PD_Hexbin.html"
    click D "https://jimcoll.github.io/classes/PD_Cartogram.html"
    click E "https://jimcoll.github.io/classes/PD_Connection.html"

Flow

flowchart LR
    classDef plotnode fill:#E8E9EB,stroke:#333,stroke-width:2px,color:#000,font-weight:bold;
    classDef c_geo fill:#344E41,stroke:#1B263B,stroke-width:2px,color:#fff,font-weight:bold;

    A{{Flow}}:::plotnode --> B(Chord Diagram):::c_geo
    A --> C(Network):::c_geo
    A --> D(Sankey):::c_geo
    A --> E(Arc Diagram):::c_geo
    A --> F(Edge Bundling):::c_geo
    A --> G(Hive):::c_geo

    click B "https://jimcoll.github.io/classes/PD_Chord.html
    click C "https://jimcoll.github.io/classes/PD_Network.html"
    click D "https://jimcoll.github.io/classes/PD_Sankey.html"
    click E "https://jimcoll.github.io/classes/PD_Arc.html"
    click F "https://jimcoll.github.io/classes/PD_Edge.html"
    click G "https://jimcoll.github.io/classes/PD_Hive.html"

A full listing

Scatter

clusterings
No matching items
Note

Again, all credit to the authors of this framing at “Data to Vis”. Please, go see how a real professional does this.