yolantele / geofluxus-circular-sankey

D3, react for sankey visualisations

GeoFluxus Circular Sankey

How to use the CircularSankey component within your React (or other) projects

• install the npm module:

npm i geofluxus-circular-sankey or yarn add geofluxus-circular-sankey

• then in your React (or other) project:

import CircularSanky from 'geofluxus-circular-sankey'

• Use the component:

const YourView = () => <CircularSankey data={yourCircularData} width={900} height={1000} />

Customise Circular Sankey

• pass as props to the component:

prop name	type	example	default
width	number	width={900}	600 min
height	number	height={700}	600 min
absolutePosition	object	absolutePosition={margins}	none
data	object	data={yourCircularData}	(fall-back data provided)
fontColor	string	fontColor={'#f9f9f9'}	black
fontSize	number	fontSize={18}	12 px
unitString	string	unitString={'CO2 t'}	none

Example Use of props for CircularSankey component:

const margins = {
    top: 50,
    left: 300,
    right: 50,
    bottom: 0
}

<CircularSankey
    data={yourCircularData}
    width={900}
    height={1000}
    absolutePosition={pageMargins}
    fontColor={'white'}
    fontSize={18}
    unitString={'CO2 (t)'}
/>

Your Circular Data Shape

• This is very important: Circular Sankey diagram calculates unique node connections and links to them. Pass the object of your Nodes and Links with the value (represents weight/width):

// make sure to provide the names for nodes that are formatted -
// as they will appear on the legend and tooltip hover

const yourCircularData = {
  nodes: [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' }
    ],
  links: [
    {
      source: 'A',
      target: 'B',
      value: 10
    },
    {
      source: 'B',
      target: 'C',
      value: 5
    },
    {
      source: 'B',
      target: 'A',
      value: 1
    },
    {
      source: 'C',
      target: 'A',
      value: 3
    },
  ]
}

See this link for how to translate React Component to Backbone.js class views

The Result

Should be a readable circular sankey with the ability to highlight key data nodes by clicking on the square nodes:

React instance / Hook called outside of fuction issue

currently the community is reporting potential issues with hooks being called outside of function or multiple react instances. In this case, add a resolver to your webpack.config.js :

module.exports = {
resolve: {
alias: {
react: path.resolve('./node_modules/react')
}
},
// other webpack configurations...
}