Visualization
Add and configure the Visualization component in a Docmino document.
When to use
Use Visualization to explain an idea with a custom interactive diagram or model that responds to document inputs or data.
Props
Name⇅
Type⇅
Description⇅
source
string
A JSX module with one default React component export. Only React imports are supported.
bindings
expression
Maps visualization prop names to document input names or IDs.
dataId
string
The ID or label of the Data component providing the dataset.
label
string
The reader-facing label for the component.
aspectRatio
number
The width divided by the height, from 0.25 to 4.
visibleWhen
expression
A condition that controls when the component is visible.
Example
Visualization
0
0255075100
Move the slider to separate the parts. Choose a system to highlight it.
How a bicycle fits together
Loading visualization…
<Input.Slider name="explosion" label="Separate the parts" minimum={0} maximum={100} value={0} />
<Input.Select name="system" label="Explore a system" options={["All", "Frame", "Wheels", "Drivetrain", "Brakes", "Cockpit"]} value="All" />
Move the slider to separate the parts. Choose a system to highlight it.
<Visualization label="How a bicycle fits together" aspectRatio={2} bindings={{"explosion":"explosion","system":"system"}} source={"export default function Bicycle({ explosion = 0, system = \"All\" }) {\n const spread = Math.max(0, Math.min(1, Number(explosion) / 100));\n const opacity = (part) => system === \"All\" || system === part ? 1 : 0.14;\n function Wheel({ x }) {\n return <g transform={\"translate(\" + x + \" 235)\"}>\n <circle r=\"68\" fill=\"none\" strokeWidth=\"8\" />\n <circle r=\"60\" fill=\"none\" strokeWidth=\"1\" />\n {Array.from({ length: 20 }, (_, i) => <line key={i} x2={60 * Math.cos(i * Math.PI / 10)} y2={60 * Math.sin(i * Math.PI / 10)} strokeWidth=\"0.7\" />)}\n <circle r=\"4\" fill=\"white\" strokeWidth=\"2\" />\n </g>;\n }\n return <svg viewBox=\"0 0 720 360\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Bicycle parts separating as the slider increases\">\n <rect width=\"720\" height=\"360\" rx=\"22\" fill=\"#e9e9e7\" />\n <g stroke=\"#343632\" strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\">\n <g opacity={opacity(\"Wheels\")}><Wheel x={200 - spread * 82} /><Wheel x={510 + spread * 82} /></g>\n <g opacity={opacity(\"Frame\")} transform={\"translate(0 \" + (-spread * 35) + \")\"}>\n <path d=\"M200 235 L300 125 L345 235 L200 235 M300 125 L450 110 L345 235 L300 125\" strokeWidth=\"9\" />\n <path d=\"M444 100 L455 128\" strokeWidth=\"12\" />\n </g>\n <g opacity={opacity(\"Cockpit\")} transform={\"translate(0 \" + (-spread * 30) + \")\"}>\n <path d=\"M300 125 L289 94 M266 84 L299 84\" strokeWidth=\"8\" />\n <path d=\"M450 110 L444 77 L465 70 M465 48 L487 58 L518 48\" strokeWidth=\"7\" />\n </g>\n <g opacity={opacity(\"Brakes\")} transform={\"translate(\" + (spread * 36) + \" 0)\"}>\n <path d=\"M455 130 L497 222 L510 235\" strokeWidth=\"7\" />\n <path d=\"M480 70 Q510 110 478 150 M280 108 L269 119 L275 126 M488 152 L501 146 L508 157\" strokeWidth=\"2\" />\n </g>\n <g opacity={opacity(\"Drivetrain\")} transform={\"translate(0 \" + (spread * 72) + \")\"}>\n <path d=\"M211 219 L342 211 A24 24 0 0 1 345 259 L210 251 A16 16 0 0 1 211 219\" strokeWidth=\"2\" />\n <circle cx=\"345\" cy=\"235\" r=\"21\" strokeWidth=\"4\" /><circle cx=\"211\" cy=\"235\" r=\"13\" strokeWidth=\"3\" />\n <path d=\"M345 235 L375 265 M365 265 L387 265 M345 235 L320 205 M310 205 L330 205\" strokeWidth=\"5\" />\n </g>\n </g>\n </svg>;\n}"} />