parliament-svg

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.

Installation

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm install --save parliament-svg

Usage

import parliamentSVG from 'parliament-svg'

const virtualSvg = parliamentSVG(parties, [opt])

• opt can contain the following options:
  • seatCount is a boolean, if true the total seat count will be displayed in the chart. Defaults to false.
  • hFunction is a function that will be used to generate the element tree. Defaults to hastscript's s() function, custom values need to match that function's signature. You could use virtual-hyperscript-svg's h() function here if you prefer working with virtual-dom, for example.
• parties is 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.

What if I prefer virtual-dom (or anything else)?

If you prefer virtual-dom over hast, e.g. for diffing or patching, you can either:

• use hast-to-hyperscript to transform the tree after it was generated or
• use the hFunction parameter documented above with a virtual-dom h() function of your choice

See also

• westminster-svg - "westminster-style parliament charts"
• d3-parliament - "parliament charts for D3"
• wikidata-parliament-svg - "draws parliament graphs based on data from wikidata"

Contributing

If you found a bug or want to propose a feature, feel free to visit the issues page.