Network Diagrams

Edge Bundling

using Vega, VegaDatasets

@vgplot(
    height=720,
    padding=5,
    marks=[
        {
            encode={
                update={
                    align={
                        signal="datum.leftside ? 'right' : 'left'"
                    },
                    fontWeight=[
                        {
                            test="indata('selected', 'source', datum.id)",
                            value="bold"
                        },
                        {
                            test="indata('selected', 'target', datum.id)",
                            value="bold"
                        },
                        {
                            value=nothing
                        }
                    ],
                    x={
                        field="x"
                    },
                    dx={
                        signal="textOffset * (datum.leftside ? -1 : 1)"
                    },
                    fontSize={
                        signal="textSize"
                    },
                    angle={
                        signal="datum.leftside ? datum.angle - 180 : datum.angle"
                    },
                    fill=[
                        {
                            test="datum.id === active",
                            value="black"
                        },
                        {
                            test="indata('selected', 'source', datum.id)",
                            signal="colorIn"
                        },
                        {
                            test="indata('selected', 'target', datum.id)",
                            signal="colorOut"
                        },
                        {
                            value="black"
                        }
                    ],
                    y={
                        field="y"
                    }
                },
                enter={
                    text={
                        field="name"
                    },
                    baseline={
                        value="middle"
                    }
                }
            },
            from={
                data="leaves"
            },
            type="text"
        },
        {
            marks=[
                {
                    encode={
                        update={
                            tension={
                                signal="tension"
                            },
                            stroke=[
                                {
                                    test="parent.source === active",
                                    signal="colorOut"
                                },
                                {
                                    test="parent.target === active",
                                    signal="colorIn"
                                },
                                {
                                    value="steelblue"
                                }
                            ],
                            x={
                                field="x"
                            },
                            strokeOpacity=[
                                {
                                    test="parent.source === active || parent.target === active",
                                    value=1
                                },
                                {
                                    value=0.2
                                }
                            ],
                            y={
                                field="y"
                            }
                        },
                        enter={
                            interpolate={
                                value="bundle"
                            },
                            strokeWidth={
                                value=1.5
                            }
                        }
                    },
                    interactive=false,
                    from={
                        data="path"
                    },
                    type="line"
                }
            ],
            from={
                facet={
                    name="path",
                    data="dependencies",
                    field="treepath"
                }
            },
            type="group"
        }
    ],
    data=[
        {
            name="tree",
            values=dataset("flare"),
            transform=[
                {
                    key="id",
                    parentKey="parent",
                    type="stratify"
                },
                {
                    method={
                        signal="layout"
                    },
                    as=[
                        "alpha",
                        "beta",
                        "depth",
                        "children"
                    ],
                    size=[
                        1,
                        1
                    ],
                    type="tree"
                },
                {
                    as="angle",
                    expr="(rotate + extent * datum.alpha + 270) % 360",
                    type="formula"
                },
                {
                    as="leftside",
                    expr="inrange(datum.angle, [90, 270])",
                    type="formula"
                },
                {
                    as="x",
                    expr="originX + radius * datum.beta * cos(PI * datum.angle / 180)",
                    type="formula"
                },
                {
                    as="y",
                    expr="originY + radius * datum.beta * sin(PI * datum.angle / 180)",
                    type="formula"
                }
            ]
        },
        {
            name="leaves",
            source="tree",
            transform=[
                {
                    expr="!datum.children",
                    type="filter"
                }
            ]
        },
        {
            name="dependencies",
            values=dataset("flare-dependencies"),
            transform=[
                {
                    initonly=true,
                    as="treepath",
                    expr="treePath('tree', datum.source, datum.target)",
                    type="formula"
                }
            ]
        },
        {
            name="selected",
            source="dependencies",
            transform=[
                {
                    expr="datum.source === active || datum.target === active",
                    type="filter"
                }
            ]
        }
    ],
    scales=[
        {
            name="color",
            range=[
                {
                    signal="colorIn"
                },
                {
                    signal="colorOut"
                }
            ],
            domain=[
                "depends on",
                "imported by"
            ],
            type="ordinal"
        }
    ],
    width=720,
    autosize="none",
    signals=[
        {
            name="tension",
            bind={
                step=0.01,
                max=1,
                min=0,
                input="range"
            },
            value=0.85
        },
        {
            name="radius",
            bind={
                max=400,
                min=20,
                input="range"
            },
            value=280
        },
        {
            name="extent",
            bind={
                step=1,
                max=360,
                min=0,
                input="range"
            },
            value=360
        },
        {
            name="rotate",
            bind={
                step=1,
                max=360,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="textSize",
            bind={
                step=1,
                max=20,
                min=2,
                input="range"
            },
            value=8
        },
        {
            name="textOffset",
            bind={
                step=1,
                max=10,
                min=0,
                input="range"
            },
            value=2
        },
        {
            name="layout",
            bind={
                options=[
                    "tidy",
                    "cluster"
                ],
                input="radio"
            },
            value="cluster"
        },
        {
            name="colorIn",
            value="firebrick"
        },
        {
            name="colorOut",
            value="forestgreen"
        },
        {
            name="originX",
            update="width / 2"
        },
        {
            name="originY",
            update="height / 2"
        },
        {
            name="active",
            on=[
                {
                    events="text:mouseover",
                    update="datum.id"
                },
                {
                    events="mouseover[!event.item]",
                    update="null"
                }
            ],
            value=nothing
        }
    ],
    legends=[
        {
            stroke="color",
            title="Dependencies",
            symbolType="stroke",
            orient="bottom-right"
        }
    ]
)
AgglomerativeClusterCommunityStructureHierarchicalClusterMergeEdgeBetweennessCentralityLinkDistanceMaxFlowMinCutShortestPathsSpanningTreeAspectRatioBankerEasingFunctionSequenceArrayInterpolatorColorInterpolatorDateInterpolatorInterpolatorMatrixInterpolatorNumberInterpolatorObjectInterpolatorPointInterpolatorRectangleInterpolatorISchedulableParallelPauseSchedulerSequenceTransitionTransitionerTransitionEventTweenConvertersDelimitedTextConverterGraphMLConverterIDataConverterJSONConverterDataFieldDataSchemaDataSetDataSourceDataTableDataUtilDirtySpriteLineSpriteRectSpriteTextSpriteFlareVisDragForceGravityForceIForceNBodyForceParticleSimulationSpringSpringForceAggregateExpressionAndArithmeticAverageBinaryExpressionComparisonCompositeExpressionCountDateUtilDistinctExpressionExpressionIteratorFnIfIsALiteralMatchMaximumaddandaveragecountdistinctdiveqfngtgteiffisaltltemaxminmodmulneqnotororderbyrangeselectstddevsubsumupdatevariancewherexor_MinimumNotOrQueryRangeStringUtilSumVariableVarianceXorIScaleMapLinearScaleLogScaleOrdinalScaleQuantileScaleQuantitativeScaleRootScaleScaleScaleTypeTimeScaleArraysColorsDatesDisplaysFilterGeometryFibonacciHeapHeapNodeIEvaluableIPredicateIValueProxyDenseMatrixIMatrixSparseMatrixMathsOrientationColorPalettePaletteShapePaletteSizePalettePropertyShapesSortStatsStringsAxesAxisAxisGridLineAxisLabelCartesianAxesAnchorControlClickControlControlControlListDragControlExpandControlHoverControlIControlPanZoomControlSelectionControlTooltipControlDataDataListDataSpriteEdgeSpriteNodeSpriteArrowTypeEdgeRendererIRendererShapeRendererScaleBindingTreeTreeBuilderDataEventSelectionEventTooltipEventVisualizationEventLegendLegendItemLegendRangeBifocalDistortionDistortionFisheyeDistortionColorEncoderEncoderPropertyEncoderShapeEncoderSizeEncoderFisheyeTreeFilterGraphDistanceFilterVisibilityFilterIOperatorLabelerRadialLabelerStackedAreaLabelerAxisLayoutBundledEdgeRouterCircleLayoutCirclePackingLayoutDendrogramLayoutForceDirectedLayoutIcicleTreeLayoutIndentedTreeLayoutLayoutNodeLinkTreeLayoutPieLayoutRadialTreeLayoutRandomLayoutStackedAreaLayoutTreeMapLayoutOperatorOperatorListOperatorSequenceOperatorSwitchSortOperatorVisualizationdepends onimported byDependencies

Force Directed Layout

TODO We need to figure out how we can handle this type of data loading first.

Reorderable Matrix

TODO We need to figure out how we can handle this type of data loading first.

Arc Diagram

TODO We need to figure out how we can handle this type of data loading first.

Airport Connections

TODO We need to figure out how we can handle this type of data loading first.