Every politician plots

Caution! This article is 5 years old. It may be obsolete or show old techniques. It may also still be relevant, and you may find it useful! So it has been marked as deprecated, just in case.

Screenshot of a bar plot of data from Scandinavian parliaments

Last year, while I was working on the Every politician project, I did some research on how to visualize the data we were working with using just plain web technologies (HTML, CSS, JS, SVG, etc.). No bloated and complex frameworks.

I experimented with pure CSS in the first batch, using semantic HTML elements that made sense to present the data in the absence of JavaScript, so that people with screen readers etc. could also get the information read to them and not sound weird. Data lists, tables and <ul> elements can be styled to look like plots!

I also played with SVG, and I had intended to explore the D3.js library, but I have very limited time. The datasets used for the plots is taken from the EveryPolitician project through an AJAX request.

It is still a work in progress, and I want to organize the code a bit better.

See it in action http://epplots.tk/
Creation Date 2016 - 2017.
Technologies GitHub pages, HTML5/CSS/JavaScript, SVG
Description Styling semantic HTML elements to look like plots. Some examples use SVG. Data from the Every politician project. Some examples have animations on hover.
Repository https://github.com/octopusinvitro/ep-plots

Screenshot of a pie chart