ffoodd / chaarts Goto Github PK

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.

There's probably more things to add to the configuration file, isn't it?

Bonjour,

Peut-on animer les Column charts?

Merci.

→ https://twitter.com/patrickbrosset/status/1225527904026710016
And maybe Viola Song or someone for the shape editor?

That's the two charts styles missing, when comparing to chart.js.

• Polar charts
• Bubble charts

Yay.

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).

Should check for background-clip: text support before using it.

Keeping progressive enhancement in mind, we might be able to use scrollable charts and improve it with scroll-snap CSS module.

@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 :)

Some details in Miraim Suzanne"s slides are interesting:

• using radial-gradient() to display some kind of points for values;
• using grid to place headers along their axis.

WCAG non-text contrasts examples explains tons of very useful things, and have a few pie charts examples.

Could also ease fine tuning support.

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 :)

There're tons of things to explain and link in charts.scss main file, a shame it's not documented yet!

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

• There's some spelling errors in EN homepage,
• a mention to .table-chart class in JS code block (which should be .chaarts),
• document default styles for tables w/o .chaarts,
• drop or reword outdated content (mostly regarding support).

<cite> should contain the title, as clearly stated in MDN.

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:

• 20
• 56.67
• 23.33

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.

Base on my Paris Web 2020 slides, add an example to randomize values and explain the setProperty method and setTimeout requirement for transitions.

Just see sseeeedd #101 :)

Get some reading:

• Trigonometric functions in CSS on web.dev
• sin() docs on MDN
• Quick mathematical features support test by Ana Tudor on CodePen

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.

Simply check:

• properties and values support in Can I Use?
• current version support with real devices or something like BrowserStack
• then add a small support table with minimum version (based on Can I Use + MDN), probably using SVG logos FTW!

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.

Based on conic-gradient() and therefore not visually accessible, might worth a deep look—and at least, a mention in the conic-gradient() note.

CSS Pie Chart Generator by Bennet Feely

There's an interesting experiment on Codepen by @clement445, using max() to replace @while loop.

There's a very comprehensive guide to CSS containment on Smashing magazine, by Travis Almand.

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 :)

Because you know, test is better than think.

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

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 😅

offset-path is really promising, and I guess we could use it in some of the charts.

• Can I Use offset-path?
• Michelle Barker has an interesting post "Fun with CSS motion path" and some CodePen demos

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. :)

FWIW, chaarts is very close to be usable as a library, after #9.

Dist files to package:

• CSS compiled + minified files
• Sourcemaps
• Sass sources
• JS files for the style toggles (optional)

Anything else?

Saving at least an octet per color:

• MDN reference
• Manuel Matuzovic TIL #33
• Can I Use
• Mathias Bynens explanations and examples, on Twitter

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 :)

Have a look at path() docs on MDN: if we're able to get shorter styles compared to polygon(), that can worth it!

• https://nivo.rocks/
• https://designsystemssurvey.seesparkbox.com/2019/
• https://vega.github.io/vega/examples/
• https://apexcharts.com/
• https://datavizproject.com/
• Bubble chart example by Miram Suzanne. The great trick to handle 3D datas is to stick to 3 columns, and usgin the whole row to display bubbles.
• Adrian Roselli came up with a very fun Venn Diagram experiment using grid and shape-outside.
• https://www.visualisingdata.com/resources/
• google has its own data viz library: https://developers.google.com/chart/interactive/docs/gallery
• https://layercake.graphics/
• Financial Times' chart-doctor
• Visa Charts Components are really exhaustive, albeit being in SVG.
• CSS plot charts by Miriam Suzanne

Chaarts line for example has a hardcoded °C unit in its tooltips. Should be customizable through a custom prop.

Relates to sseeeed #87, see here for references :)

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?

Here it is: https://datavizproject.com/

There are explanations and various visual examples for each charts type.

Making them available in a pen would be better than polluting main project, obviously :)

Top is Chromium, bottom is Firefox, both have striped columns a bit shifted to the right compared to what I would expect.

Not sure how to fix that… yet!

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.