preignition / multi-chart

lit-element building blocks for charts and visualization (based on d3.js v5)

<multi-chart>

Build composable, markup-based, extensible visualizations for the web.

<multi-chart> is a lit-element-based library to compose markup-driven and data-driven vizualization layers.

Motivation

While building vizualisation for the web, it is difficult to find the right balance between low-level vizualization kernel (like d3) that requires a lot of development work, and high-level black box library that are difficult to configure beyond a certain point.

<multi-chart> is a attempt to provide the best of two the worlds: low level extensible webcomponents (often wrapper around d3.js modules like d3-axis) composed together to build complex charts. The library proposes ready-to-use configurable charts, but also the building blocks for accomodating more complex use case.

This library plays well with <multi-geo> (similar library for geo charts like choropleth) and <multi-verse>, a graphical interactive multi-dimensional analysis tool. Together, they offer a markup-based alternative to tools like dc.js.

Demo and API

Demo and API are now available on netlify.

Examples

Pie

Bar

Stack

Radar

Bubble

multi-chart's Issues

Demo link on https://www.webcomponents.org/element/polymerEl/multi-chart returns 403 error

Demo link on https://www.webcomponents.org/element/polymerEl/multi-chart points to a RawGit URL. According to https://rawgit.com...

RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end.

Polymer 3 and d3v5 support?

Hi, are you planning on upgrading to Polymer 3 anytime soon?
Also, it seems like you use d3-bundle-element, which in turn seems to use d3v4?

This project seems like a good fit to upgrade to d3v5 and Polymer 3 to make more use of ES modules?

License in bower.json

Please add license to bower.json. I created awesome chart elements collection, this element is missing.

https://beta.webcomponents.org/element/PolymerEl/multi-chart
https://beta.webcomponents.org/collection/StartPolymer/awesome-chart-elements

legend hidden in bar charts demo

notarget No matching version found for vaadin-themable-mixin@^1.2.1

It seems that the npm package has been moved.

npm i @vaadin/vaadin-themable-mixin

how to handle multiple data sets in line/bar charts

Could you give an example of a line chart that has more than one line drawn, as well as a bar chart with more than one data set?