Social networks: Visualize connections between entities
Any graph structure: Flexible node and edge data
Interactive features:
Drag nodes to rearrange the layout
Zoom and pan to explore large networks
Toggle edge labels on/off
Color nodes by categorical attributes
Adjust connection strength cutoff
Switch between different layout algorithms
Example 1: Stock Correlation Network with Multiple Scenarios
This example shows correlations between stock returns across different time periods. Stocks are colored by sector to reveal industry clustering patterns.
Smart cutoff calculation for optimal visualization
Try this: Switch between scenarios to see how correlations change across different time periods.
Notice how nodes stay in place while edges change - this makes it easy to identify robust correlations.
Adjust the cutoff slider to filter weak correlations. Stocks in the same sector (same color) often cluster together.
Stock Correlation Network - Multiple Scenarios
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: stock_graph_data
Example 2: City Proximity Network with Correlation Methods
This example shows similarity between cities based on their economic indicators, with both Pearson and Spearman correlations available.
Features demonstrated:
Correlation method selector (Pearson vs Spearman)
Node coloring by geographic region
Circle layout showing regional grouping
Dynamic edge filtering based on selected method
Try this: Switch between Pearson and Spearman correlation methods to see how the network changes.
Pearson measures linear relationships while Spearman measures rank-based relationships.
City Economic Similarity Network
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: city_graph_data
Example 3: Social Network with Demographics
This example shows a social network where people are connected based on similarity.
You can color nodes by different demographic attributes.
Try this: Switch between coloring by Department, Team, and Location to see different community patterns.
Social Network - Connection Patterns
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: social_graph_data
Example 4: Research Collaboration Network
This example shows collaboration patterns between researchers across different institutions and fields.
Multiple coloring attributes (Institution and Field)
Dense network with many connections
Different cutoff sensitivity
Observation: Researchers at the same institution (same color) often collaborate more,
but there are also strong cross-institutional collaborations visible in the network.
Research Collaboration Network
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: research_graph_data
Example 5: Product Similarity Network with Grid Layout
This example demonstrates the grid layout option, organizing nodes in a regular grid pattern.
Features demonstrated:
Grid layout for organized visualization
Product categorization
Lower cutoff showing more connections
Use case: Grid layouts are useful when you want a clean, organized view
of all nodes with connections overlaid.
Product Purchase Co-occurrence Network
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: product_graph_data
Example 6: Trading Strategy Network with Sharpe Ratio Coloring (Global Gradient)
This example demonstrates continuous color mapping with a global gradient.
Features demonstrated:
Continuous color mapping: Nodes colored by Sharpe Ratio using a continuous gradient
Global gradient specification: Single color gradient applied to all continuous variables
No extrapolation (default): Extreme values clamp to min/max gradient colors instead of getting darker
Use case: Trading strategies are nodes, connected by correlation in returns.
Sharpe Ratio is visualized with a continuous color gradient to show performance at a glance.
Color extrapolation: By default, extrapolate_colors=false, which means values beyond the gradient stops
(e.g., Sharpe Ratio < -2.5 or > 2.5) will use the min/max gradient color. This prevents colors from becoming too dark
for extreme values. Set extrapolate_colors=true to continue the gradient beyond the stops.
Try this:
Select "sharpe_ratio (continuous)" from the color dropdown to see the gradient
Compare with "strategy_type (discrete)" to see the difference
Notice how strategies with extreme Sharpe ratios use the min/max gradient colors (no extrapolation)
Trading Strategy Network - Continuous Color (Global Gradient)
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: strategy_graph_data_global
Example 7: Strategy Network with Per-Variable Gradients and Tooltips
This example demonstrates per-variable color gradients with multiple continuous metrics and interactive tooltips.
Use case: When analyzing strategies with multiple metrics, each metric can have
its own intuitive color scale. Low volatility is green (good), high volatility is red (risky).
Tooltips show all metric values at once for easy comparison.
Try this:
Switch between different continuous variables in the color dropdown
Notice how each uses a different, contextually appropriate color gradient
Hover over any node to see a tooltip with all metrics (strategy type, Sharpe ratio, return %, volatility %)
Trading Strategy Network - Per-Variable Gradients
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: strategy_graph_data_pervariable
Example 8: Market Network with Rich Tooltips
This example demonstrates the tooltip_cols parameter for adding extra information to node tooltips.
Features demonstrated:
color_cols: Variables shown in color dropdown AND tooltips (Industry, Returns %)
tooltip_cols: Additional variables shown ONLY in tooltips (GDP Growth, Population, Market Cap)
Information separation: Keep color dropdown clean while showing rich details on hover
How it works:
The color dropdown only shows color_cols options (Industry and Returns %)
Hovering over a node shows ALL information from union(color_cols, tooltip_cols)
This keeps the UI clean while providing detailed context on demand
Try this: Hover over any market node to see:
Market name (node label)
Industry (from color_cols)
Returns % (from color_cols)
GDP Growth % (from tooltip_cols - not in color dropdown)
Population millions (from tooltip_cols - not in color dropdown)
Market Cap billions (from tooltip_cols - not in color dropdown)
Use case: When you have many attributes but only want to color by a few key ones,
use tooltip_cols to provide additional context without cluttering the color selection dropdown.
African Markets Network - Rich Tooltips Example
(Apply variable selection & reorganize layout)
(Changing layout recalculates)
Tip: Deselected variables become translucent. Click "Recalculate Graph" to remove them and reorganize.
Switching scenarios updates edges but keeps node positions.
Data: market_graph_data
Summary
The Graph chart type provides flexible network visualization with these key capabilities:
Input Formats
Correlation matrices: High correlation = strong connection