jellojs

> Create engaging and interactive data stories with jellojs!

!example

See this for a live demo. Each circle in the visualization represents a company.

How to Use

install jellojs
``
npm install @chngl/jellojs

or

yarn add @chngl/jellojs
`
use it in your application
`
import { useEffect, useRef, useState } from 'react';
import Jello from '@chngl/jellojs

function App({data}) {
const canvasRef = useRef(null);
let jelloRef = useRef(null);

useEffect(() => {
// initialize a Jello object
const jello = new Jello(canvasRef.current, data, {});
// and render
jello.displayImageBy('logo').render();
jelloRef.current = jello;
}, []);

return (

{
jelloRef.current.clusterBy('industry').render();
}}>
cluster by industry

);
}

export default App;
`


Data Format


`
// data passed to Jello is a list of objects with a required id field and some other properties
// see the example:
[
{
id: 'recsvS4fzgihwjxw5',
funding: 1099,
company: 'ServiceTitan',
headquarter: 'South California',
employees: 1600,
year_founded: 2012,
years_since_founded: 9,
years_since_founded_category: '5 to 10 years',
valuation: 9.5,
industry: 'Internet software & services',
sub_industry: 'Contractor software',
logo: 'https://dl.airtable.com/.attachments/733b263af4e572f9515cdf024e1dcec6/820b1151/pngkey.com-titans-logo-png-1943963.png'
},
{
id: 'rectPxkKSTdvRS6Sc',
funding: 379,
company: 'Guild Education',
headquarter: 'Other',
employees: 1000,
year_founded: 2015,
years_since_founded: 6,
years_since_founded_category: '5 to 10 years',
valuation: 3.75,
industry: 'Internet software & services',
sub_industry: 'Education platform',
logo: 'https://dl.airtable.com/.attachments/fe6df6c4925cea7e3256a8693322dc8e/eb2ec9cf/Gbi5ki-_.jpeg'
},
{
id: 'recu8xRYrRjVehsPR',
funding: 1,
company: 'Zapier',
headquarter: 'San Francisco Bay Area, California',
employees: 500,
year_founded: 2011,
years_since_founded: 10,
years_since_founded_category: '5 to 10 years',
valuation: 4,
industry: 'Internet software & services',
sub_industry: 'Workflow automation',
logo: 'https://dl.airtable.com/.attachments/21fd529d7106a88c34acc6e38a11ea0f/02b50013/zapier-logo-png-transparent.png'
},
...
]
`

Available Operations

use colorBy to display the circles in different colors based on the dimension
`
jello.colorBy('industry').render();
`

use clusterBy to display the circles in clusters
`
jello.clusterBy('industry').render();
`

use sizeBy to change the size for each circle
`
jello.sizeBy('rank').render();
`

use sortBy to sort the circles based on the dimension
`
jello.sortBy({dim: 'valuation', order: 'desc'}).render();
`

use displayImageBy to display an image on each circle, when this is set, setColorBy will be no effect
`
jello.displayImageBy('logo').render();
`

use labelBy to display a label on each circle based on the dimension passed in
`
jello.labelBy('logo').render();
`

use filterBy filter out records
`
jello.filterBy({'industry': ['Fintech']}).render();
``

Example Story Built with Jellojs

- Forbes Top 50 Private Companies
- repo for the above example

!example