Appearance
PDF
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
...