Generate parliament charts as hast virtual DOM SVG*. Design inspired by the Wikipedia parliament charts. Play around with the live demo! For westminster-style parliament charts, see westminster-svg. If you are using D3, you might prefer working with the d3-parliament module.
*Also compatible with other virtual DOM implementations, see the docs below.
This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.
npm install --save parliament-svgimport parliamentSVG from 'parliament-svg'
const virtualSvg = parliamentSVG(parties, [opt])optcan contain the following options:seatCountis a boolean, iftruethe total seat count will be displayed in the chart. Defaults tofalse.hFunctionis a function that will be used to generate the element tree. Defaults tohastscript'ss()function, custom values need to match that function's signature. You could usevirtual-hyperscript-svg'sh()function here if you prefer working withvirtual-dom, for example.
partiesis an object containing seat count and colour for each party, e.g.:
{
"linke": {
"seats": 64,
"colour": "#a08"
},
"spd": {
"seats": 193,
"colour": "#e02"
},
"gruene": {
"seats": 63,
"colour": "#0b2"
},
"union": {
"seats": 311,
"colour": "#333"
}
}Each seat contains the party name in its class attribute.
For the given parties object and seatCount enabled, the rendered result should look as follows:
If you want to convert the hast tree to an SVG string, use hast-util-to-html (don't get confused by the name, the library can also stringify SVG):
import parliamentSVG from 'parliament-svg'
import { toHtml as toSvg } from 'hast-util-to-html'
const virtualSvg = parliamentSVG(parties, seatCount)
const svg = toSvg(virtualSvg)Check the code example as well.
If you prefer virtual-dom over hast, e.g. for diffing or patching, you can either:
- use
hast-to-hyperscriptto transform the tree after it was generated or - use the
hFunctionparameter documented above with a virtual-domh()function of your choice
- westminster-svg - "westminster-style parliament charts"
- d3-parliament - "parliament charts for D3"
- wikidata-parliament-svg - "draws parliament graphs based on data from wikidata"
If you found a bug or want to propose a feature, feel free to visit the issues page.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
