Skip to content

juliuste/parliament-svg

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

npm version License Contact me

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:

Example: German Bundestag with seat count enabled

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

Contributing

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