Live data from Hacker News

Responsive bar charts in HTML and CSS

9elements.com

11–20 of 31 posts

Re: Responsive bar charts in HTML and CSS

#11
post #6

"While responsive and accessible SVGs are possible, they require manual client-side JavaScript logic" an oxymoron, given that many assistive devices don't run JS [eg text-browsers like lynx]

“given that many assistive devices don't run JS [eg text-browsers like lynx]”

an oxymoron, given that many assistive devices don’t cooperate with any of the web or HMI accessibility guidelines at all [eg my wheelchair]

Re: Responsive bar charts in HTML and CSS

#13
post #3

An article about responsive bar charts without them? (Firefox) I'm not hip enough to find this funny.

The very first chart is a ‘bar’ chart running horizontally, not sure what’s missing (Firefox 127.0.2 64-bit). There are code examples down below….

Re: Responsive bar charts in HTML and CSS

#15
post #3

An article about responsive bar charts without them? (Firefox) I'm not hip enough to find this funny.

The very first chart is a ‘bar’ chart running horizontally, not sure what’s missing (Firefox 127.0.2 64-bit). There are code examples down below….

It's an image. None of the charts are responsive charts in HTML and CSS.

I didn't even notice the CodePen at first because it doesn't load automatically (instead displays a cropped and zoomed image).

Re: Responsive bar charts in HTML and CSS

#16

Earlier quoted context omitted.

The very first chart is a ‘bar’ chart running horizontally, not sure what’s missing (Firefox 127.0.2 64-bit). There are code examples down below….

It's an image. None of the charts are responsive charts in HTML and CSS. I didn't even notice the CodePen at first because it doesn't load automatically (instead displays a cropped and zoomed image).

You are correct they are images besides the CodePen, I did not inspect them before commenting (hope the images is at least the output of the code). Guessing it must have something to do with the companies hosting platform tools and authoring code to it but have no idea why.

Re: Responsive bar charts in HTML and CSS

#17
I’ve been using a similar technique to display our poll data[1] for several years, although without using grid. If you can measure the text because you know which font will be used, and store the widths of various characters, you can take a little more control over layout too, even while rendering server-side.

I also started writing a simple responsive SVG charting library[2], but the author is right in that there are some fluid layouts that are just impossible to realise with SVG at the moment.

[1]: https://poll.lowyinstitute.org/report/2024/global-powers-and...

[2]: https://stephenhutchings.github.io/shown/

Re: Responsive bar charts in HTML and CSS

#18
post #3

An article about responsive bar charts without them? (Firefox) I'm not hip enough to find this funny.

We live in an era where people will unironically tell you your article written in html/css might be a bit difficult to include on their website.

There's never been an era where that wasn't difficult for the majority of humans.

What's changed isn't that becoming harder, it's that hosting websites which don't need any understanding of html/css has become hugely easier and therefore done by far more people, including less tech-savvy people.

Somehow you're seeing that as a bad thing, focussing on the fact that the number of websites that are set up with the operator using html directly to create each page has decreased from 100%, but that's not actually a negative it's just the side effect of the positive changes!

(Sure there are some specific situations where a person who would be capable of using raw html chooses to use a CMS or something that does restrict them, but it only restricts them if they don't care enough to choose one of the millions of simple options for not having that restriction.)

Try to notice that your glass is more than half full, and that it's never been easier for anyone to create a website with the choice of manually writing hrml or not!

Re: Responsive bar charts in HTML and CSS

#19
Making charts (of any kind) accessible is a really hard endeavour. I watched the demo videos and if I’m allowed to make a suggestion... Add the context to the data points. A simple “50k” might not cut it for people navigating the plot with their fingers over a smartphone.

Full disclosure: I worked with those peeps a decade ago and really love their work.

Re: Responsive bar charts in HTML and CSS

#20
post #18

Earlier quoted context omitted.

We live in an era where people will unironically tell you your article written in html/css might be a bit difficult to include on their website.

There's never been an era where that wasn't difficult for the majority of humans. What's changed isn't that becoming harder, it's that hosting websites which don't need any understanding of html/css has become hugely easier and therefore done by far more people, including less tech-savvy people. Somehow you're seeing that as a bad thing, focussing on the fact that the number of websites that are set up with the opera…

Easy page generators are definitely a good default which have enabled more people to create content (and not just recently, think myspace era and before) but the point wasn't "and it was better when you had to write HTML/CSS manually to have a page" rather "and these platform tools have started to elide the option to embed HTML/CSS when you want". This doesn't mean wanting to throw out the easy to use interfaces for a traditional CMS and writing everything out it means easy embeddability.

As an example think mediawiki and markdown. Each was designed to allow you to just make content, each has powerful GUI tools, and each was designed to allow direct embedding as needed. A lot of blog platforms have started to drop the latter bit for no gain in making the former bit more accessible than it would be otherwise.

Post reply on HN