Funny seeing this here with your comment, as I was exploring using ECharts for a project recently to work exactly with HTMX from a Clojure backend. I eventually settled on Chart.js as I found that for my use case, I wanted the charts to more easily fit their dynamically sized container, which isn’t quite as simple with ECharts and Vega. I also didn't need particularly complex plots. Nevertheless, this is a nice project! There remain some open challenges with web-based visualisation libraries more generally around responsive design and accessibility, but we’ve come a long way.
I've been meaning to practice some data visualization tasks... If anybody knows any cool datasets they'd recommend that aren't your run of the mill kaggle consumer data or whatever. I'm particularly interested in bioinformatics/genetics data but not really sure of where to look (and have almost no background, just personally interested in comp-bio).. If anyone could recommend cool and open esoteric data/possible projects, that would be awesome.
It looks neat, but unlike the Hans Rosling example someone else mentioned, the animation adds no additional information. Showing just the last frame would get the same point across much quicker and more accessible. It's a form of chartjunk.
You know how a presenter asks questions on a topic where he is the expert? Same goes for this animation. It does not show but hide information to keep the reader engaged. I found myself guessing who will be first and boy was I wrong. My ego would have prevented me from noticing, if the chart would have been presented to me right away.
On YouTube you can see how well this works. There are channels with a huge follower base just existing because of this animation.
Not completely unrelated, the mechanical horse race game that used to be at The D in Vegas, and now is at the Linq (I think?) has a similar effect on the human psyche. As does gambling on most sporting events. Anything with a lot of ups and downs. I really started to think about this when I was developing casino games about 15 years ago. But the same is true with any game, or any future event. When an outcome is unknown, we experience time as a set of discrete emotional peaks and valleys - we experience an extra dimension of time, the high/low. Apart from being a highly successful design hook, I think it can be a really powerful way to encode information. Especially if you have time-referenced data and you've already exhausted the other axes or relative sizes you might use to convey your dimensions. Like, my main argument with using that "race" is that you could use the x-axis for something else, and have the whole graph change over time.
But you're very right that this indeed relies on an emotional component to achieve the full effect of conveying time in two dimensions. If there's no emotional attachment to the outcome, our brains don't process the highs or lows. In that case, a variance chart like open/close prices on the stock market might work better.
These channels don’t exist because it’s a better way to display information. It’s a more click bait way.
A chart that works that way is the title equivalent of “you won’t guess who wins”.
I get sucked into those “X over 50 years videos” and watch to the end to get the satisfaction. But it doesn’t help me remember the outcome at all.
It’s just engagement bait in video form. A chart on a webpage like this is just chart junk like the poster said unless it’s actually updating in real time.
it would get the point across much faster. but it would be a less enjoyable interaction. this is an example graph that i'm never going to look at ever again. i don't even need to care about information. like, it's mostly irrelevant to me. it's a toy example. and it's a bit of a fun example to make people go 'huh, this is a cool vizualisation package'.
if i had a dashboard i needed to use at work set up like that i'd have a bloody conniption after a week. but this isn't a work dashboard -- it's a functionality demo and i'm more likely to remember echarts now as a result (purpose of examples achieved).
1. The race animation adds no information, but better communicates the idea that we're looking at a series of moments in time, each with its own history and emotional impact. Watching the lines race shows us what it would've felt like looking at this graph during each year.
2. The Chartjunk wiki cites Adolf Loos's idea "ornamentation is a crime". But I think we're done with modern minimalism and in the process of rediscovering the joy in ornamentation. This is an aesthetic choice and you may disagree.
At the risk of piling on (others have commented), I'll go so far as to say that there really is more information here if you make the gentle assumption of a human observer.
In the animated version, a human observer here is allowed (forced) to occupy mental states of a real-time observer. They have the experience of "X has jumped ahead - I wonder if it'll last - oh, wow, Y is really surging".
The visceral experience matters, and is impossible to recreate post-hoc if all of the info is presented up front.
(edit: "more information" in so far is it informs more - leaves more impressions on the observer)
Following the parent comment's idea, it'd end up in a table being the best choice 100% of the time.
Because the underlying assumption is that accessibility and the ability to grasp the data that is being conveyed isn't completely dependent on the audience. If I happen to prefer a static chart, an animated chart might still convey the intended thing in a stickier way, to a wider audience.
In a quick web demo, this library was the only one that could handle interactive viewing and manipulation of a very large graph using its GraphGL component !
I don’t think it's a well-known visualization library, but it's quite interesting ...
A very large library of premade charts for web. Probably the largest I've seen. Less customizable than chart.js, and D3 is more of a rendering library than a charting library.
I'm surprised by your claim of it being less customizable than chart.js, it has been very flexible from my experience.
It could rival d3 with a lot of customization and a worse DX from what I've seen: It's essentially a good amount of defaults, but you can override and replace essentially anything.
I was particularly impressed with how performant the demo was as it was playing. I was fully expecting my Macbook-fan to start whirring as it usually does with most javascript-heavy pages.
I don't think I ever see Wechat and Weibo in the "Follow Us" box. Was this donated to Apache by a Chinese company? I feel like we will see a lot more of this in the coming years.
Agreed - geopolitics aside, it's been awesome to see how much Chinese companies have embraced open source in a number of different domains. I think the whole ecosystem is going to greatly benefit from the contributions of Chinese open source projects.
We evaluated pretty much every option and it's the best non-react option. Recharts honestly seems a little nicer if you're using React, but our frontend is in Vue.
Even if one is using react, I think there's value in choosing libraries that are not deeply tied to react such that that logic can be reused when (not if) we need to start migrating away from it.
The problem is non-react chart libraries can be a bit cumbersome to use in React. For example, D3 controls the DOM itself through various transformations. React is not aware of these updates and combining react's state based DOM manipulation with random updates from a charting library gets messy.
It’s probably more performant. Chart.js isn’t designed for a ton of data and we recommend sampling before visualization . We have a builtin plugin that does a form of min/max sampling to retain peaks but cut down on the amount of data points drawn
If you're looking for a chart library for a web client, I also recommend charts.css. It's a godsend honestly, the concept is way simpler than most charts libraries and can achieve the same thing. Makes it so simple to use the old way, server side rendering, htmx, etc...
In the same vein, I've long had a soft-spot for the JS-enhanced https://pancake-charts.surge.sh/ (developed by NYT graphics team and used for the covid charts).
Did you even look at echarts demos, or amcharts demos for that matter -- it's basically the same thing, but paid for: https://www.amcharts.com/demos ?
I don't have anything against charts.css, but it's like comparing a children's plastic toy to a real space shuttle. I spend most of my work hours developing a heavy business analytics application (not unlike Apache Superset), and it would simply be impossible to implement it with something like chart.css
While I agree with other replies that ECharts provides a lot more functionality than this lib, it does look very nice the way it transforms a semantic table of data into the chart!
I'm using ECharts (and happy with it) but there are some places where I want like a sparkline in every row of a data table, which is a lot of ECharts instances to instantiate, and this lib looks like it'd be great for that.
What a complete exhaustive set of examples! Very useful. Both SVG and Canvas renderers differ very little and both seem to be super performant. The declarative API is just so simple... harkens back to the age of batteries-included web frameworks like Ext.
262 comments
[ 3.5 ms ] story [ 262 ms ] threadhttps://chartscss.org/
I've done this for more simpler elements. Copilot helped me come up with a little bit of custom JS in those cases.
I had to disable hx-history to get around a problem of the charts getting double instantiated
it feels a bit of a lame workaround but I never managed to get to the bottom of it
apart from that, totally happy
https://www.ncbi.nlm.nih.gov/datasets/
https://github.com/OpenGene/awesome-bio-datasets
https://echarts.apache.org/examples/en/editor.html?c=line-ra...
Toggle the switches to trigger the race. By the way, well done Norway.
https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
https://en.wikipedia.org/wiki/Chartjunk
On YouTube you can see how well this works. There are channels with a huge follower base just existing because of this animation.
But you're very right that this indeed relies on an emotional component to achieve the full effect of conveying time in two dimensions. If there's no emotional attachment to the outcome, our brains don't process the highs or lows. In that case, a variance chart like open/close prices on the stock market might work better.
A chart that works that way is the title equivalent of “you won’t guess who wins”.
I get sucked into those “X over 50 years videos” and watch to the end to get the satisfaction. But it doesn’t help me remember the outcome at all.
It’s just engagement bait in video form. A chart on a webpage like this is just chart junk like the poster said unless it’s actually updating in real time.
if i had a dashboard i needed to use at work set up like that i'd have a bloody conniption after a week. but this isn't a work dashboard -- it's a functionality demo and i'm more likely to remember echarts now as a result (purpose of examples achieved).
2. The Chartjunk wiki cites Adolf Loos's idea "ornamentation is a crime". But I think we're done with modern minimalism and in the process of rediscovering the joy in ornamentation. This is an aesthetic choice and you may disagree.
https://en.wikipedia.org/wiki/Ornament_and_Crime
In the animated version, a human observer here is allowed (forced) to occupy mental states of a real-time observer. They have the experience of "X has jumped ahead - I wonder if it'll last - oh, wow, Y is really surging".
The visceral experience matters, and is impossible to recreate post-hoc if all of the info is presented up front.
(edit: "more information" in so far is it informs more - leaves more impressions on the observer)
No it removes information; to be able to focus on one period at a time as it evolves.
Seeing a "living graph" of how something evolves is different than seeing the graph fully drawn statically, that cannot be considered chart junk IMO.
Because the underlying assumption is that accessibility and the ability to grasp the data that is being conveyed isn't completely dependent on the audience. If I happen to prefer a static chart, an animated chart might still convey the intended thing in a stickier way, to a wider audience.
I wonder how well it correlates with the oil price.
It could rival d3 with a lot of customization and a worse DX from what I've seen: It's essentially a good amount of defaults, but you can override and replace essentially anything.
https://echarts.apache.org/en/feature.html#mobile
https://github.com/ecomfe
https://preset.io/blog/2021-4-1-why-echarts/
[1] https://superset.apache.org/
We evaluated pretty much every option and it's the best non-react option. Recharts honestly seems a little nicer if you're using React, but our frontend is in Vue.
It’s probably more performant. Chart.js isn’t designed for a ton of data and we recommend sampling before visualization . We have a builtin plugin that does a form of min/max sampling to retain peaks but cut down on the amount of data points drawn
they're about same for line chart rendering when using decimation in both.
Performance seemed quite good with Chart.js in my case, for small to medium datasets.
(Our project mostly uses Chart.js, so I'm more familiar with it.)
https://chartscss.org/
Beautiful charts, shame it looks defunct now.
Did you even look at echarts demos, or amcharts demos for that matter -- it's basically the same thing, but paid for: https://www.amcharts.com/demos ?
I don't have anything against charts.css, but it's like comparing a children's plastic toy to a real space shuttle. I spend most of my work hours developing a heavy business analytics application (not unlike Apache Superset), and it would simply be impossible to implement it with something like chart.css
I'm using ECharts (and happy with it) but there are some places where I want like a sparkline in every row of a data table, which is a lot of ECharts instances to instantiate, and this lib looks like it'd be great for that.
If there are a huge number of datapoints, this library will paint itself in the corner.