Generate westminster parliament charts as hast virtual DOM SVG*. Design inspired by the Wikipedia parliament charts. Play around with the live demo! For "normal" parliament charts, see parliament-svg.
*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 westminster-svgimport westminsterSVG from 'westminster-svg'
const virtualSvg = westminsterSVG(parliament, [opt])optcan contain the following options: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.
parliamentis an object containing party information for all four 'sides' of the parliament:headBench,left,crossBenchandright. After the 2017 UK general election it should look as follows:
{
headBench: {
speaker: {
seats: 1,
colour: '#000'
}
},
left: {
labour: {
seats: 262,
colour: '#dc241f',
},
snp: {
seats: 35,
colour: '#ff0',
},
libdems: {
seats: 12,
colour: '#faa61a',
},
sinnfein: {
seats: 7,
colour: '#080',
},
plaidcymru: {
seats: 4,
colour: '#008142',
},
green: {
seats: 1,
colour: '#6ab023',
},
independent: {
seats: 1,
colour: '#aadfff',
}
},
crossBench: {
dup: {
seats: 10,
colour: '#d46a4c',
}
},
right: {
conservative: {
seats: 317,
colour: '#0087dc',
}
}
}Please note that the parties will be displayed in the order of their object keys from left to right (based on the speaker's viewpoint). Further, each seat SVG element contains the party name in its class attribute.
For the given parliament object, 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 westminsterSVG from 'westminster-svg'
import { toHtml as toSvg } from 'hast-util-to-html'
const virtualSvg = westminsterSVG(parliament)
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
If you found a bug or want to propose a feature, feel free to visit the issues page.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent