Embed Visualizations
HTML
Given a dataset name or URL, such as Miserables:
-
URL:
https://hub.graphistry.com/graph/graph.html?dataset=Miserables -
HTML:
<iframe src="https://hub.graphistry.com/graph/graph.html?dataset=Miserables"></iframe>
Our most popular configuration is:
<iframe
src="https://hub.graphistry.com/graph/graph.html?dataset=Miserables"
style="border: 1px solid black; width: 100%; height: 100%; min-height: 400px"
></iframe>URL Options
Add parameters to the end of the URL to manipulate the visualizations. For additional inputs or outputs, please email info@graphistry.com.
Example: Do not run layout on page load (play=0) and use a red background (bg=%23FF0000)
<iframe
src="https://hub.graphistry.com/graph/graph.html?dataset=Miserables&play=0&bg=%23FF0000"
style="border: 1px solid black; width: 100%; height: 100%; min-height: 400px"
></iframe>| Category | Parameter | Type | Default | Description |
|---|---|---|---|---|
| page | pageTitle | string | dataset name | HTML meta title tag |
| page | favicon | string | Graphistry favicon | URL of page icon |
| scene | menu | boolean | true | Whether to show all menus |
| scene | showHistograms | boolean | true | Whether to show histogram adder on bottom-right |
| scene | showInspector | boolean | true | Whether to show node/edge entity inspector on the right (see also showLabelPropertiesOnHover) |
| scene | info | boolean | true | Whether to show graph size stats |
| scene | showArrows | boolean | true | |
| scene | pointSize, edgeCurvature, edgeOpacity, pointOpacity | number | ||
| scene | neighborhoodHighlight | String | both | When highlighting a node during a hover, which of its edges to also highlight: incoming, outgoing, both, node |
| scene | neighborhoodHighlightHops | Number | 1 | When highlighting a node during a hover, how many hops away to include edges for highlighting |
| layout | play | integer | Number of milliseconds to run layout on pageload. To not run layout on pageload, try ...&play=0 |
|
| filters | pruneOrphans | boolean | false | After overall filtering, remove nodes that have no nodes |
| layout | left, right, top, bottom | integer | autozoom+autocenter to show all nodes on screen | Manually position camera on pageload. Ex: ...&left=-1.0 |
| layout | lockedX, lockedY, lockedR | boolean | false | Prevent a point from moving based on x position, y position, and radius. Ex: ...&lockedX=true |
| layout | linLog, strongGravity, dissuadeHubs | boolean | false | |
| layout | edgeInfluence, precisionVsSpeed, gravity, scalingRatio | number | ||
| labels | labelOpacity | number | ||
| labels | labelColor, labelBackground | color | ||
| labels | showLabels, showLabelOnHover, showPointsOfInterest, showPointsOfInterestLabel, showActions, shortenLabels | boolean | true | |
| labels | showLabelPropertiesOnHover | boolean | false | |
| labels | pointsOfInterestMax | number | ||
| logo | logoUrl | string | none (do not show) | URL of custom logo image |
| logo | logoAutoInvert | boolean | false | When true, dynamically inverts colors based on dynamic luminosity. Best when used with a transparent white logo. |
| logo | logoPosition | top | bottom | bottom | Position of custom logo image |
| logo | logoMaxHeight | int | Maximum image height; maintains aspect ratio with logoMaxWidth | |
| logo | logoMaxWidth | int | Maximum image width; maintains aspect ratio with logoMaxHeight | |
| logo | logoMaxWidth | int | Maximum image width; maintains aspect ratio with logoMaxHeight |
Additional options
See create dataset for setting additional options like page logo, background image, icon, and point sizes as part of the upload options.
IFrame CSS Style Tips
Control the HTML style by adding style attributes: <iframe style="border: 1px solid black; width: 100%; height: 80%; min-height: 400px" src=...
Control the border:
border: 1px solid black
Control the size:
width: 100%; height: 80%; min-height: 400px