OG
JS
Docs
Demos
Examples
Data format import
Load the same network from four common interchange formats without changing the rendering pipeline.
JSON
CSV
GraphML
GEXF
// Each parser converts a different interchange format into the same `{ nodes, edges }` // contract. Once parsed, the identical `setGraph` and camera path renders every dataset, // so format-specific code stops at the ingestion boundary. import { Ogjs, parseCSV, parseGEXF, parseGraphML, parseJSON } from '../../src/index'; const og = new Ogjs({ container: '#viz', theme: 'light' }); const palette = ['#2563eb', '#7c3aed', '#ea580c', '#059669']; const json = { nodes: [ { id: 'a', label: 'Account' }, { id: 'b', label: 'Device' }, { id: 'c', label: 'Merchant' }, { id: 'd', label: 'Location' }, ], links: [ { source: 'a', target: 'b' }, { source: 'b', target: 'c' }, { source: 'c', target: 'd' }, { source: 'd', target: 'a' }, ] }; const nodeCsv = 'id,label\na,Account\nb,Device\nc,Merchant\nd,Location'; const edgeCsv = 'source,target\na,b\nb,c\nc,d\nd,a'; const graphml = `<graphml><key id="label" attr.name="label"/><graph> <node id="a"><data key="label">Account</data></node><node id="b"><data key="label">Device</data></node> <node id="c"><data key="label">Merchant</data></node><node id="d"><data key="label">Location</data></node> <edge source="a" target="b"/><edge source="b" target="c"/><edge source="c" target="d"/><edge source="d" target="a"/> </graph></graphml>`; const gexf = `<gexf><graph><nodes> <node id="a" label="Account"/><node id="b" label="Device"/> <node id="c" label="Merchant"/><node id="d" label="Location"/> </nodes><edges><edge source="a" target="b"/><edge source="b" target="c"/> <edge source="c" target="d"/><edge source="d" target="a"/></edges></graph></gexf>`; function load(format) { // Format-specific work ends here. Each parser returns the same graph contract, allowing all // layout, styling, interaction, and export code after this point to stay source-agnostic. const parsed = format === 'json' ? parseJSON(json) : format === 'csv' ? parseCSV(nodeCsv, edgeCsv) : format === 'graphml' ? parseGraphML(graphml) : parseGEXF(gexf); // The fixtures omit coordinates. Add only application styling, then ask OGJS for the desired // circular arrangement; imports never need to calculate canvas positions. parsed.nodes.forEach((node, index) => Object.assign(node, { size: 11, color: palette[index], })); og.setGraph(parsed); og.layouts.circular({ radius: 120 }); // Framing reserves the application panel by intent. OGJS derives the scale and translation // from visible graph bounds, so no canvas dimensions appear in integration code. og.camera.fit({ target: 'all', avoid: document.querySelector('.workflow-panel'), paddingPx: 24, maxOccupancy: .52, }); const { nodes, edges } = og.stats(); document.querySelector('#import-status').textContent = `${format.toUpperCase()} · ${nodes} nodes · ${edges} edges`; document.querySelectorAll('[data-format]').forEach((button) => button.setAttribute('aria-pressed', String(button.dataset.format === format))); } document.querySelectorAll('[data-format]').forEach((button) => button.addEventListener('click', () => load(button.dataset.format))); load('json');