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