ffoodd / chaarts Goto Github PK
View Code? Open in Web Editor NEWCharts with HTML & CSS
Home Page: https://ffoodd.github.io/chaarts
License: MIT License
Charts with HTML & CSS
Home Page: https://ffoodd.github.io/chaarts
License: MIT License
Most properties in charts are animatable — clip-path
, I'm staring at you.
There shouldn't be any issue with transition handling (on value change, for example, or on intersectionning viewport).
So I think it should be tried :)
Chaarts line for example has a hardcoded °C
unit in its tooltips. Should be customizable through a custom prop.
There's an interesting experiment on Codepen by @clement445, using max()
to replace @while
loop.
Marshall Humprhies wrote "How to make a line chart chart with CSS" on CSS-Tricks and it's very interesting since using trigonometry (as it's done in our pie and radar charts) we could have a more consistent line than using clip-path
only.
Since content has been duplicated in #21, code examples are — but obviously shouldn't be since each incoming changes in chaarts would need to be documented twice…
But using partial templates for code examples would solve this :)
Here it is: https://datavizproject.com/
There are explanations and various visual examples for each charts type.
.table-chart
class in JS code block (which should be .chaarts
),.chaarts
,There're tons of things to explain and link in charts.scss
main file, a shame it's not documented yet!
FWIW, chaarts is very close to be usable as a library, after #9.
Dist files to package:
Anything else?
Keeping progressive enhancement in mind, we might be able to use scrollable charts and improve it with scroll-snap
CSS module.
Simply check:
axe-linter doesn't do that much; the oldish axe-webdriver is way too heavy to run in CI for each push…
So what now?
Maybe pa11y-ci, like in Bootstrap?
Eg. first line chart, displaying some temperatures mont by month, could use data.gouv.fr datasource about regional temperatures over years.
Another pertinent dataset is environmental impact comparisons (in French).
After reading Ana's Tudor post entitled "While You Weren’t Looking, CSS Gradients Got Better " — and finding Can I Use support table about double position, I think we have some serious user cases for this in Chaarts.
There's probably more things to add to the configuration file, isn't it?
Saving at least an octet per color:
Michelle Barker makes a pointin "7 usages for custom properties" about preventing long code duplication for vendor-prefixed properties — like clip-path
.
Our very long polygon()
function is indeed duplicated after Autoprefixer work… So let's do this :)
offset-path
is really promising, and I guess we could use it in some of the charts.
It's easily reproducible with your online example.
On the multiple columns chart, when a column has a value of 100, it's placement turns wrong and shift the other columns' placement after it.
See the video below.
I guess something is wrong in this declaration…
.chaarts[class*="column"] td {
grid-row: calc( 100 - var(--value) )/-3;
}
… but I'm not sure what the -3
is for, although I can confirm that without it the 99 other values won't work 😅
filter
allows a lot of things. The first idea stepping in my mind is using grayscale()
function on other parts when hovering a chart, to improve the overall contrast between highlighted part and the others.
grid
and shape-outside
.Base on my Paris Web 2020 slides, add an example to randomize values and explain the setProperty
method and setTimeout
requirement for transitions.
Making them available in a pen would be better than polluting main project, obviously :)
<cite>
should contain the title, as clearly stated in MDN.
Chartability is a kind of WCAG 2.1 extension dedicated to data visualization. From the site:
Chartability is a methodology for ensuring that data visualizations, systems, and interfaces are accessible. Chartability is organized into principles with testable criteria and focused on creating an outcome that is an inclusive data experience for people with disabilities.
It's basically an evaluation tool, so I guess anyone in the topic might want to audit chaarts following the distributed workbook.
→ https://twitter.com/patrickbrosset/status/1225527904026710016
And maybe Viola Song or someone for the shape editor?
Because you know, test is better than think.
WCAG non-text contrasts examples explains tons of very useful things, and have a few pie charts examples.
If you use a decimal value (e.g. 23.33) to get a 23.33% percentage, the size of the share is well rendered but the content of the "tooltip" is wrong.
For my example, I had 3 values:
And it's rendering like this (Chrome and Firefox had the same result).
I think it's because the counter-reset
property just accepts integer.
I'm not sure there's any way to fix this or any workaround possible but It's good to know. I guess I'll just round the numbers then.
Adrian Roselli came up with a very fun Venn Diagram experiment using grid
and shape-outside
.
I think the same trick could be used for bubble charts too, however I’m not very confident about table
-based markup.
Need to try :D
Could also ease fine tuning support.
Relates to sseeeed #87, see here for references :)
Bonjour,
Peut-on animer les Column charts?
Merci.
@htmlvv came up with :focus-within
idea to enhance charts' interactions; it might be a nice way to push charts further by adding a complete interaction layer :)
Have a look at path()
docs on MDN: if we're able to get shorter styles compared to polygon()
, that can worth it!
As suggested by Lea Verou in a comment on her post about "Simple pie charts with fallback, today", using conic-gradient()
in a mask-image
could lead to the same result than the current clip-path()
thing—less verbose and less maths.
Worth a try and a proof-of-concept, at least. :)
Just see sseeeedd #101 :)
The pie chart has a padding calculated like this padding-top: calc(var(--radius) - 2rem);
which looks fine but when you have a tooltip on the upper side of the chart, it is cropped.
No issue with tooltips on the other sides though.
I fixed it with a padding-top: calc(var(--radius) + 2rem);
and it looks fine.
I don't know what was the idea behind your math (why the - 2rem
) so I'll let you with this :p
Based on conic-gradient()
and therefore not visually accessible, might worth a deep look—and at least, a mention in the conic-gradient()
note.
Some details in Miraim Suzanne"s slides are interesting:
radial-gradient()
to display some kind of points for values;grid
to place headers along their axis.A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.