Appearance

  2. Examples

PDF ​

exportimage-export

This example uses jsPDF and svg2pdf libraries to create a quality PDF export of Ogma visualisation. It uses SVG export to ensure the quality of the visualisation.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

const graph = await Ogma.parse.jsonFromUrl('solarCity.json');
await ogma.setGraph(graph);
await ogma.view.locateGraph();
await updatePdf();

// Enable the legend
ogma.tools.legend.enable({
  position: 'bottom',
  titleTextAlign: 'center',
  shapeColor: 'black',
  circleStrokeWidth: 1
});

async function updatePdf() {
  const [svgSrc, legend] = await Promise.all([
    // export to svg
    ogma.export.svg({ download: false, clip: true }),
    ogma.tools.legend.export()
  ]);
  // convaert SVG to DOM element
  const svg = toElement<SVGSVGElement>(svgSrc);
  // use the rendered svg to create a pdf
  const doc = new jspdf.jsPDF({ format: 'a4', unit: 'pt' });

  const svgWidth = parseInt(svg.getAttribute('width') || '0');
  const svgHeight = parseInt(svg.getAttribute('height') || '0');

  const margin = 15;

  const pageWidth = doc.getPageWidth() - margin * 2;
  const pageHeight = doc.getPageHeight() - margin * 2;

  // vertical cursor
  let y = margin;

  // fitting ratio canvas to page
  let ratio = 1 / Math.max(svgWidth / pageWidth, svgHeight / pageHeight);

  // seems like big sizes breaks it
  const width = svgWidth * ratio;
  const height = svgHeight * ratio;

  // resize SVG
  svg.setAttribute('width', width.toString());
  svg.setAttribute('height', height.toString());

  // fit the contents of SVG
  svg.setAttribute('viewBox', `0 0 ${width / ratio} ${height / ratio}`);

  // render SVG to PDF
  await doc.svg(svg, { x: margin, y, width, height });
  // scale the legend to fit the vis
  ratio = 1 / (legend.width / width);
  const legendWidth = legend.width * ratio;
  const legendHeight = legend.height * ratio;
  doc.addImage(
    legend,
    'PNG',
    margin,
    y + margin + height - legendHeight,
    legendWidth,
    legendHeight
  );

  // write caption here, not to mangle the visualisation fonts
  doc.setFontSize(12);
  doc.setFont('Helvetica', 'bolditalic');
  doc.text('Figure 1:', margin, margin + 8);
  doc.setFont('Helvetica', 'italic');
  doc.text('Visualisation caption', margin + 54, margin + 8);

  // add border
  doc.rect(
    margin,
    y + margin + height - legendHeight,
    legendWidth,
    legendHeight,
    'S'
  );
  // update the preview
  const blobURL = URL.createObjectURL(
    doc.output('blob', { filename: 'ogma.pdf' })
  );
  document.getElementById('pdf-iframe')!.setAttribute('src', blobURL);
}

// Define the Node style rules
ogma.styles.addNodeRule({
  // the label is the value os the property name.
  text: node => node.getData('properties.name'),

  // the size is proportional to the funding_total property
  radius: ogma.rules.slices({
    field: 'properties.funding_total',
    values: { nbSlices: 7, min: 3, max: 10 }
  }),

  // the color is based on the funding_total property (from red to purple)
  color: ogma.rules.slices({
    field: 'properties.funding_total',
    values: [
      '#161344',
      '#3f1c4c',
      '#632654',
      '#86315b',
      '#a93c63',
      '#cd476a',
      '#f35371'
    ]
  }),

  // assign icons based on the node category
  icon: {
    content: ogma.rules.map({
      field: 'categories',
      values: {
        COMPANY: '\uF135',
        INVESTOR: '\uF19c',
        MARKET: '\uF3a5'
      }
    }),
    font: 'Font Awesome 5 Free',
    color: 'white',
    style: 'bold'
  }
});

// Define the Edge style rules
ogma.styles.addEdgeRule({
  // the label is the value os the property name.
  text: edge => edge.getData('type'),

  // the size is proportional to the raised_amount_usd property
  width: ogma.rules.slices({
    field: 'properties.raised_amount_usd',
    values: { nbSlices: 3, min: 1, max: 5 }
  }),

  // the  color is based on the raised_amount_usd property (from blue to black)
  color: ogma.rules.slices({
    field: 'properties.raised_amount_usd',
    values: ['#54aef3', '#326896', '#132b43'],
    reverse: true
  }),

  // the shape is based on the type of edge
  shape: ogma.rules.map({
    field: 'type',
    values: {
      INVESTED_IN: 'arrow',
      ACQUIRED: 'tapered',
      HAS_MARKET: 'dotted'
    }
  })
});

function toElement<T = HTMLElement>(html: string): T {
  const container = document.createElement('div');
  container.innerHTML = html;
  return container.firstElementChild as T;
}
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/jspdf@2.3.1/dist/jspdf.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/svg2pdf.js@2.1.0/dist/svg2pdf.umd.js"></script>
  </head>

  <body>
    <div id="graph-container"></div>
    <hr />
    <script type="module" src="index.ts"></script>
    <iframe id="pdf-iframe"></iframe>
  </body>
</html>
css
#graph-container {
  height: 300px;
  width: 100%;
}

#pdf-iframe{
  width: 100%;
  height: 300px;
}
json
{
  "nodes": [
    {
      "id": 8666,
      "data": {
        "properties": {
          "name": "Elon Musk",
          "permalink": "/person/elon-musk",
          "url": "http://www.crunchbase.com/person/elon-musk",
          "picture": "img/musk.jpg"
        },
        "categories": [
          "INVESTOR"
        ]
      },
      "attributes": {
        "x": 25.858288814166933,
        "y": -7.103984513542148,
        "text": "Elon Musk",
        "radius": 3,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 6870,
      "data": {
        "properties": {
          "name": "SolarCity",
          "permalink": "/organization/solarcity",
          "founded_at": "01/01/2006",
          "first_funding_at": "15/09/2006",
          "market": " Construction ",
          "founded_quarter": "2006-Q1",
          "founded_year": 2006,
          "state": "CA",
          "url": "http://www.crunchbase.com/organization/solarcity",
          "country": "USA",
          "homepage_url": "http://www.solarcity.com",
          "logo": "http://www.crunchbase.com/organization/solarcity/primary-image/raw",
          "founded_month": "2006-01",
          "funding_rounds": 13,
          "status": "operating",
          "funding_total": 1045040000,
          "region": "SF Bay Area",
          "category": "|Construction|Clean Technology|",
          "last_funding_at": "18/06/2013"
        },
        "categories": [
          "COMPANY",
          "INVESTOR"
        ]
      },
      "attributes": {
        "x": 0.09298533946275711,
        "y": 0.41120362281799316,
        "text": "SolarCity",
        "color": "#f35371",
        "radius": 7,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 7396,
      "data": {
        "properties": {
          "name": "Tesla Motors",
          "permalink": "/organization/tesla-motors",
          "founded_at": "01/01/2003",
          "first_funding_at": "01/04/2004",
          "market": " Automotive ",
          "founded_quarter": "2003-Q1",
          "founded_year": 2003,
          "state": "CA",
          "url": "http://www.crunchbase.com/organization/tesla-motors",
          "country": "USA",
          "homepage_url": "http://www.teslamotors.com",
          "logo": "http://www.crunchbase.com/organization/tesla-motors/primary-image/raw",
          "founded_month": "2003-01",
          "funding_rounds": 11,
          "status": "operating",
          "funding_total": 823000000,
          "region": "SF Bay Area",
          "category": "|Automotive|",
          "last_funding_at": "10/10/2012"
        },
        "categories": [
          "COMPANY"
        ]
      },
      "attributes": {
        "x": 85.876122673705,
        "y": -21.207117111759345,
        "text": "Tesla Motors",
        "color": "#cd476a",
        "radius": 6,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 2982,
      "data": {
        "properties": {
          "name": "First Solar",
          "permalink": "/organization/first-solar",
          "founded_at": "01/01/1999",
          "first_funding_at": "18/06/2013",
          "market": " Semiconductors ",
          "founded_quarter": "1999-Q1",
          "founded_year": 1999,
          "state": "AZ",
          "url": "http://www.crunchbase.com/organization/first-solar",
          "country": "USA",
          "homepage_url": "http://www.firstsolar.com",
          "logo": "http://www.crunchbase.com/organization/first-solar/primary-image/raw",
          "founded_month": "1999-01",
          "funding_rounds": 1,
          "status": "operating",
          "funding_total": 427700000,
          "region": "Phoenix",
          "category": "|Semiconductors|Clean Technology|",
          "last_funding_at": "18/06/2013"
        },
        "categories": [
          "COMPANY",
          "INVESTOR"
        ]
      },
      "attributes": {
        "x": -27.6874947092224,
        "y": -21.207117111759345,
        "text": "First Solar",
        "color": "#632654",
        "radius": 3,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 3388,
      "data": {
        "properties": {
          "name": "Google",
          "permalink": "/organization/google",
          "founded_at": "07/09/1998",
          "first_funding_at": "01/08/1998",
          "market": " Software ",
          "founded_quarter": "1998-Q3",
          "founded_year": 1998,
          "state": "CA",
          "url": "http://www.crunchbase.com/organization/google",
          "country": "USA",
          "homepage_url": "https://www.google.com",
          "logo": "http://www.crunchbase.com/organization/google/primary-image/raw",
          "founded_m

...