Appearance
Legend
This example shows how to use the legend tool. The legend is automatically generated from the styles applied by the design module.
ts
import Ogma from '@linkurious/ogma';
type NodeData = {
properties: {
name: string;
funding_total: number;
};
categories: string[];
};
type EdgeData = {
type: string;
properties: {
raised_amount_usd: number;
};
};
const ogma = new Ogma<NodeData, EdgeData>({
container: 'graph-container'
});
const graph = await Ogma.parse.jsonFromUrl<NodeData, EdgeData>(
'solarCity-nostyle.json'
);
await ogma.setGraph(graph);
await ogma.view.locateGraph();
// 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'
}
})
});
// Enable the legend
ogma.tools.legend.enable({
position: 'bottom',
titleTextAlign: 'center',
shapeColor: 'black',
circleStrokeWidth: 1
});html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css"
rel="stylesheet"
/>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="graph-container"></div>
<!-- we force the loading of the font awesome -->
<i class="fa fa-camera-retro fa-1x" style="color: rgba(0, 0, 0, 0)"></i>
<script type="module" src="index.ts"></script>
</body>
</html>css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}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"
]
},
"x": 25.858288814166933,
"y": -7.103984513542148
},
{
"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"
]
},
"x": 0.09298533946275711,
"y": 0.41120362281799316
},
{
"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"
]
},
"x": 85.876122673705,
"y": -21.207117111759345
},
{
"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"
]
},
"x": -27.6874947092224,
"y": -21.207117111759345
},
{
"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_month": "1998-09",
"funding_rounds": 2,
"status": "operating",
"funding_total": 25100000,
"region": "SF Bay Area",
"category": "|Software|Video Streaming|Information Technology|Blogging Platforms|Email|Search|",
"last_funding_at": "07/06/1999"
},
"categories": [
"COMPANY"
]
},
"x": 17.30193137441551,
"y": -22.990838850758205
},
{
"id": 8372,
"data": {
"properties": {
"name": "Zep Solar",
"permalink": "/organization/zep-solar",
"founded_at": "01/01/2009",
"first_funding_at": "20/11/2013",
"market": " Clean Technology ",
"founded_quarter": "2009-Q1",
"founded_year": 2009,
"state": "CA",
"url": "http://www.crunchbase.com/organization/zep-solar",
"country": "USA",
"homepage_url": "http://www.zepsolar.com",
"logo": "http://www.crunchbase.com/organization/ze
...