[HN Gopher] Charts.css
___________________________________________________________________
Charts.css
Author : pspeter3
Score : 891 points
Date : 2021-03-17 18:07 UTC (1 days ago)
(HTM) web link (chartscss.org)
(TXT) w3m dump (chartscss.org)
| videogreg93 wrote:
| This is just what I needed. Currently using echarts-vue for a
| personal project but it's just too hard to use for what I need it
| for. Too bad this doesn't have pie charts yet.
| owens99 wrote:
| Is this more performant than JS or SVG?
| crazypython wrote:
| Markup should be semantic data and semantic state; CSS should be
| styling; and JavaScript should be interactivity.
|
| Make your CSS fit your HTML. Don't make HTML fit your CSS. This
| framework uses semantic native tables properly.
| eyelidlessness wrote:
| Edit: My bad. I misread the parent comment. My original
| response preserved below for posterity.
|
| - - -
|
| I'm on mobile so I can't dig into the source, but they claim
| it's using semantic HTML and the data is accessible. If you
| disagree with those claims, perhaps sharing your specific
| objections would make a better case than just vaguely crapping
| on the project.
| crazypython wrote:
| I'm agreeing, not disagreeing...
| eyelidlessness wrote:
| Apologies, I honestly must have stopped reading when I read
| your comment as negative, and missed the last sentence.
| bennettfeely wrote:
| I made something similar a few months ago, a CSS pie chart
| generator
|
| https://bennettfeely.com/csspiechart/
| gervwyk wrote:
| Well done! This looks impressive and really useful. I've been
| looking for a lightweight sprite / spark lib for a while. Clients
| always, for some reason, are very impressed by little charts in a
| table row, doing this witha normal size chart lib kills page
| performance. I was literally including very basic html indicators
| in a presentation today and client where really impressed! This
| really solves that issue!
|
| And even more. Really great that you van manipulate the elements
| as css. Most chart libs I've dealt with makes non-trivial
| customization impossible.
|
| I'll probably be building this in as Lowdefy blocks[1].
|
| Just curious, did you consider just branding it as sparks.css /
| sprites.css or something? Going the spark / sprite route just
| sets the expectations a lot lower imo. Although congrats, you are
| really close to fully functional charts here! Really interested
| to see how far this can go.
|
| [1] - https://lowdefy.com
| shijie wrote:
| Lowdefy looks great. I'm currently looking for something like
| Django Admin that isn't necessarily a part of Django (I'm an
| Elixir dev myself). Have you used Lowdefy extensively? Pros and
| cons? Limitations? Are you involved with the project itself?
| gervwyk wrote:
| Yes co-founder here. Been building apps with it for 2 years
| now. Its really powerful for building data intensive UIs.
| Have built full scale dashboard solutions for enterprises,
| buys with a large CRM like 5 companies combined into one
| system large. Also quite far along building an MRP on it for
| a small factory. The flexibility is what really makes it
| super. Client says the UX is not great for a specific task,
| no problem. Let's imagine something better. Also scales well
| when bringing on new devs in the team coz its such a
| structured way of writing UIs.
|
| Limitations, definitely needs a lot more connections for
| other DBs etc. Also we need first class support for auth and
| athorization, currently bring your own openid connect
| provider.
| mraza007 wrote:
| Hey just found out about LowDefy by reading comments and
| I'm completely blown away by how you can build webapps just
| by using YAML
|
| I'm definitely going to try this for one of my projects
| gervwyk wrote:
| Hi, yes often we are also really surprised. One could say
| its like writing a query, we took a lot of inspiration
| from MongoDBs query language. To understand how this is
| all possible, in short, react components just use props,
| so just a json tree should already get you to some app
| description. Then, you just need to express logic,
| recalculate and update. To find out how we express logic
| in yaml, how a look at Lowdefy operators
| -https://docs.lowdefy.com/operators Looking forward to
| seeing what you can build! Let us know if you need any
| help!
| mraza007 wrote:
| Sure definitely Thanks for replying btw :)
| brazzledazzle wrote:
| Just a heads up that your landing page is having trouble
| loading this asset on an otherwise good looking page:
|
| Loading failed for the <script> with source "https://d33w
| ubrfki0l68.cloudfront.net/js/3d627f4dd8e7eb6e7cc....
|
| Lowdefy loading icon just dutifully hops up and down,
| left and right.
| gervwyk wrote:
| Hi. Thanks for letting me know! Fixed it. Was a A/B test
| that went wrong.
| williamdclt wrote:
| You might want to look at React Admin or Forest Admin (never
| used these myself, but AFAIK they're the main offerings in
| this space)
| claytongulick wrote:
| Strapi.io is nice too
| Aeolun wrote:
| I am not a fan of Forest Admin because they basically force
| you to use their hosted admin panel, and dump your whole
| database schema to their service.
| [deleted]
| larodi wrote:
| Intriguing that the HN community is (every time) so excited about
| CSS.
| ggregoire wrote:
| "JavaScript = bad" is a very popular opinion on HN and that
| library allows to draw charts without JavaScript.
| activatedgeek wrote:
| Somehow, I don't see the mention of the Vega visualization
| grammar [1] as a potential charting library. I think it is
| incredibly well-done, and is generally intuitive in its API. I've
| mostly used it through the Python bindings called Altair [2]. The
| good part is that that general grammar carries over to the
| browser as a full JSON spec that can be used directly in any
| language that supports JSON and has a Vega binding (which is
| pretty much all popular languages).
|
| Having said that, I had to unfortunately abandon it because the
| ad-hoc control with Matplotlib [3] in Python is just infectious.
| Visual manipulations are far less easy to do in Vega. Being in
| JSON is also a restrictive though, because it is less
| interpretable by unstructured bots, where charts.css probably
| excels by design.
|
| [1]: https://vega.github.io [2]: https://altair-viz.github.io
| [3]: https://matplotlib.org
| runeks wrote:
| Big fan of Vega as well. I whipped up this graph[1] in about
| two weeks without knowing any Vega beforehand.
|
| [1] https://cryptomarketdepth.com/#graph
|
| > Being in JSON is also a restrictive though, because it is
| less interpretable by unstructured bots, where charts.css
| probably excels by design.
|
| What do you mean by this?
| InnerGargoyle wrote:
| oh wow, i really should look into vega now.. i too know
| little about web technologies and benig handed task to create
| beautiful graphs in very short period of time... :sigh
| wilsonfiifi wrote:
| This looks nice. I don't see mentioned anywhere in the docs if it
| supports multiline labels.
| edoceo wrote:
| This is un-f-believable! Sometimes I see some so rad things here
| that are immediately applicable.
|
| I regret that I have but one upvote to give
| numlock86 wrote:
| What's a bit weird is that the front page has a pie chart as
| animated logo, yet that chart type isn't supported by the lib yet
| ...
| ad404b8a372f2b9 wrote:
| I'm intrigued, I love CSS-only solutions. The examples are
| lacking plots with both x & y axes labels though which is among
| the minimum required functionalities for plotting.
| XCSme wrote:
| I agree, I was disappointed by the demo: no axis, no hover
| effects make the charts unusable in their current state.
|
| EDIT: It looks like they have hover interaction, but it's not
| shown on the homepage.
| hinkley wrote:
| I'll bet that the front page demo was written before that
| feature was added and they just haven't gotten around to
| updating.
|
| Documentation is hard.
| eyelidlessness wrote:
| > Documentation is hard.
|
| It is! But (if you'll pardon my aside) increasingly my
| career/nerd goal is to promote documentation as an
| implementation source of truth. Documentation is hard
| because it's seen as an additional task. But it's possible
| to design interfaces where documentation is the API, or at
| least a first class part of it which determines API
| boundary behavior. It's hard to do that upfront, but it's
| great if you have the right primitives for it.
| zuhayeer wrote:
| This is awesome for sparklines and lighter weight visualizations.
| The animated donuts had me hoping there would be a pie / donut
| chart too! Would love to see that.
| brundolf wrote:
| There's one planned, it's just still under construction:
| https://chartscss.org/charts/pie/
| AnonHP wrote:
| Tangential comment: I'm on a phone and can't look deeper into
| this site for sometime. I'm impressed with how fast the pages
| load from different links within this site. Anyone know or can
| describe the internals? Thank you, kind person.
| tiffanyh wrote:
| This is interesting.
|
| I really wish this super small library named Chartist was more
| actively developed. It's only 10kb in size and generates SVG
| charts.
|
| The huge benefit of SVG is that it's natively responsive and also
| prints extremely well. Wheres CSS doesn't
|
| https://gionkunz.github.io/chartist-js/
| brundolf wrote:
| I'm not sure I understand how SVG is more natively responsive
| than CSS? I also haven't had problems printing with CSS - I
| maintain my resume as a styled HTML document - though I haven't
| done a ton of web printing so there could be problem cases I
| haven't faced
| eyelidlessness wrote:
| CSS can certainly be responsive to a degree, if written to
| be, but there are definitely some features of SVG that go
| beyond CSS capabilities. This has more to do with the fact
| that it's a graphics format--designed for adaptable scaling
| from the start, with a simple layout model--than anything
| else. And of course, CSS has some advantages of its own
| because it has such a huge range of layout
| options/techniques.
|
| Edit: I also maintain my resume as responsive HTML. I haven't
| taken the time to address print at all, but having previewed
| my own print rendering it definitely needs a lot of work
| before it's print/PDF ready.
| monoideism wrote:
| You can also set a special stylesheet just for printing:
| <link rel="stylesheet" media="print" href="print.css">
| eyelidlessness wrote:
| Yep and I fully intend to when I get back to that. I also
| intend to extract my dark mode styles in the same way so
| I can add an optional/progressively enhanced setting to
| override the prefers-color-scheme query for visitors who
| (like me) have a non-global preference.
| brundolf wrote:
| You still haven't given a specific example of how SVG can
| be responsive. Are you just talking about proportional
| scaling (resizing the shapes as the container's size
| changes)? Because if so you can accomplish that in CSS by
| using percentages for size/position
| danielheath wrote:
| It's responsive exactly the same as css, but it gives you
| composability (reuse of template elements) and size-to-
| fit text (given a container of size X and text Y, render
| the text at the maximum size that fits), which are both
| lacking in html+css.
| eyelidlessness wrote:
| Okay, I'll give three examples from recent work on my
| personal site:
|
| 1. vector-effect[1] allows you to specify, per element,
| how different aspects of its rendering scale--or don't--
| proportional to the containing viewBox.
|
| 2. You can nest viewBox coordinates (symbol element or
| nested SVG) to override the relative proportions of child
| elements without actually changing the space they take up
| on their container.
|
| 3. You can actually scale real (accessible) text, as if
| it's a graphic, to fit a container (textLength attribute)
| without weird hacks or JS.
|
| 1: https://developer.mozilla.org/en-
| US/docs/Web/SVG/Attribute/v...
| tiffanyh wrote:
| Having a chart as an SVG grow or shrink in size based on
| the size of the browser windows is radically easier with
| SVG than CSS.
|
| Dynamically growing/shrinking a piechart in CSS is much
| more difficult to implement. Where as with SVG, it just
| works as-is and no additional effort needs to be done to
| make it work.
| brundolf wrote:
| Sorry, but I can't really agree
| thitcanh wrote:
| That's not responsive. That just means scalable.
| Responsive means that it changes shape depending on size.
|
| By your definition any bitmap is "responsive"
|
| SVG can't really be responsive since values are generally
| declared as attributes. Good luck changing a path via
| media query.
|
| The most responsive SVGs really only hide/show detail
| depending on size, but they don't reshuffle unless you
| literally have both layouts in the SVG.
| eyelidlessness wrote:
| The coining of "responsive web design" was a reference to
| architecture which responds to its present occupants.
| It's not about changing shape, it's about making the same
| content and experience available regardless of
| environment. Changing shape or layout is a technique to
| achieve that, not a defining characteristic.
|
| Regarding changing layout in SVG, you just need the `use`
| tag.
| thitcanh wrote:
| Again, by your definition, every non-fixed-width HTML
| page could be called responsive. I don't think so.
|
| Responsive _does_ include other methods as well, but
| nobody looks at a CSS-less page and calls that responsive
| because the text always fits the window. That's just too
| broad of a definition.
|
| The comment I was replying to specifically mentioned that
| "SVGs are responsive because they resize without
| additional effort." That's blatantly false. "No
| additional effort" only gives you an SVG that scales
| (just like images can, and you don't call images
| responsive)
|
| On review, however, SVGs _can_ be made responsive, it's
| just that it's _not_ easier than regular HTML.
| eyelidlessness wrote:
| > Again, by your definition, every non-fixed-width HTML
| page could be called responsive. I don't think so.
|
| > Responsive does include other methods as well, but
| nobody looks at a CSS-less page and calls that responsive
| because the text always fits the window. That's just too
| broad of a definition.
|
| Why? You're the one making the claim here. The original
| coining of the term and the author's 10 year piece
| certainly talk about other techniques. But not as some
| formal definition, rather as ways to achieve the original
| goal: one design which serves all. If the design has the
| default layout, why would it need to do more?
|
| > The comment I was replying to specifically mentioned
| that "SVGs are responsive because they resize without
| additional effort." That's blatantly false. "No
| additional effort" only gives you an SVG that scales
| (just like images can, and you don't call images
| responsive)
|
| Now this is beyond the pale. Just search "responsive
| images" and filter for before the picture tag and srcset
| attribute and you'll see that this is exactly what was
| expected. Of course you _can_ do more now, but I don't
| think it's even common practice except when automated by
| tooling.
|
| But more than that, depending on usage, there are ways
| SVG can scale that raster images can't. Position and size
| can scale independently. Images which benefit from it can
| change aspect ratio without a problem (you can see an
| example of this on my personal site, link in profile,
| scaling from very wide to very narrow).
| emllnd wrote:
| To nitpick a bit: SVGs don't scale like bitmaps. An SVG
| at 800% zoom is radically different than a bitmap at
| 800%.
| nick_urban wrote:
| This seems like it could be a great approach to charting in a
| Phoenix LiveView application.
| lucb1e wrote:
| Creating a chart about charts.css with charts.css from the
| command line: ( echo "<table
| class='charts-css bar show-labels show-heading'>" echo
| "<caption>Size of Charts.css releases</caption>" for
| version in $(curl -sS
| https://github.com/ChartsCSS/charts.css/releases | grep -o
| releases/tag/[0-9.]* | cut -d/ -f3 | tac); do url=htt
| ps://cdn.jsdelivr.net/npm/charts.css@$version/dist/charts.min.css
| size=$(($(curl -sS "$url" | wc -c)/1024)) echo
| "<tr><th>v$version</th><td style='--size:
| calc($size/100)'>${size}KiB</td></tr>" done
| echo "</table><link rel=stylesheet href='$url'>" ) >
| size-chart.html
|
| Result: https://jsfiddle.net/wcfez6oq/
|
| Since I couldn't easily find how large it was and wanted to try
| it out at the same time.
| mraza007 wrote:
| You just taught me something cool as someone who loves
| commandline I'm definitely going to try this and save this as a
| gist for future reference
| lucb1e wrote:
| What was it that you didn't know yet?
|
| As an aside, a friend of mine has already arranged (as a
| joke) the rights to compile and remix any bash snippets I
| post in chat groups in a blog or book. Maybe I should write
| more about this, but then, it's probably most helpful exactly
| because I just drop it in places rather than writing a
| comprehensive work that nobody sits down to read. Still, I'm
| curious what the syntax/feature/pattern is that you found
| useful :)
| mraza007 wrote:
| Hey if you create a book or blog I would love to check out
| your bash scripts
|
| You should definitely try mdbook if you want to keep it in
| a book format as it offers good fulltext search
|
| And I found the entire script interesting I would
| definitely try this once I get to my laptop as I'm
| currently surfing HN on my phone
| mraza007 wrote:
| If you got more bash hacks or one liners or cool commands
| for automation I would love to check it out !!!
| lucb1e wrote:
| Three tools that I think are less widely known compared
| to how useful they are: jq, progress, and pv.
|
| `pv` (pipe view) is rather simple but I use it for
| viewing a lot and sometimes rate-limiting transfers.
| Usage is simple: `curl huge-file | pv | some-operation`
| will show you the progress (okay, curl already does...
| but pv works for any pipe input, and pv can work in line
| mode with -l so you can see how many lines (records,
| presumably) it processed).
|
| `progress` is even simpler! Just type progress in a
| random terminal while, in another, you are running an
| operation like cp, gzip, etc. $
| progress [10123] bzip2 /tmp/test
| 32.5% (127.0 MiB / 390.6 MiB)
|
| Use -m to monitor instead of doing a one-shot. This will
| also allow it to calculate the remaining time (for
| anything running at more than a few kilobytes per
| second).
|
| I also love progress just because it's such a hack. It
| hooks into the process and monitors file operations.
| Simple but effective. Somehow it works super well because
| it manages to ignore everything irrelevant and only shows
| you the file handle you care about (you can give it hints
| if necessary, I've used that maybe once in ten years).
|
| `jq` takes JSON data and either pretty-prints (default)
| or operates on it: $ echo '{"whoami":
| "root"}' | jq { "whoami": "root"
| } # imagine colored output above $
| echo '{"whoami": "root"}' | jq .whoami "root"
| $ echo '{"users": [{"name": "abc", ...}, ...]}' | jq
| '.users[].name' # prints the name of all users in
| this array $ curl localhost/api/v1/users |
| jq '.users[] | "\(.name) \(.age)"' | sort -n -k 2 | tail
| -1 && echo "is our oldest user!"
| mraza007 wrote:
| Hey I just get enthusiastic about bash and commandline in
| general as these tools have saved my hours of work
| compared to using gui And I love your enthusiasm in the
| comment and things you just taught me today.
|
| I'm definitely going to take a note of this and add to my
| TIL Notes so I can always refer back to this
|
| I just wanted to thank you for teaching me something
| totally new today
| daotoad wrote:
| Consider adding zsh and Perl to your toolbelt. Many
| scripting languages are just as powerful as Perl, but I
| don't know of anything that has equivalent capability for
| quick work on the CLI. Check out how the `-pi -E`
| switches work, for an example:
| https://perldoc.perl.org/perlrun#-i%5Bextension%5D
|
| Also, jq is amazing and is basically sed for json data.
| minxomat wrote:
| jq can be used even for a lot more advanced analytics
| (e.g. https://gist.github.com/turbo/36e87947a56cfaacec9d0
| 356b3e521...)
|
| Also xidel is a tool everyone should know.
| mraza007 wrote:
| Oh wow that's really cool I'll look into xidel
|
| Just out of curiosity are you into DevOps
| minxomat wrote:
| I guess? I mean it was/is-ish part of my job. I've
| transitioned to management a while back tho.
| fluential wrote:
| Start here http://mywiki.wooledge.org/BashGuide and
| http://mywiki.wooledge.org/BashFAQ
| TheSoftwareGuy wrote:
| Personally, I didn't know about the ( ... commands ... ) >
| some_file.txt
|
| syntax. Like, I knew about file redirection, but I didn't
| know you could group commands like that and redirect all
| their output with one operator. I would have had to do a
| bunch of appending with `>>`
| fastball wrote:
| Needs axis labels! Nice script tho.
| lucb1e wrote:
| The unit is shown on the right for me, maybe it's different
| in mobile view. For an SI-compliant unit, add iB behind the
| ${size}k :)
| fastball wrote:
| I mean you need to tell me they're payload size (and
| version numbers).
|
| I actually thought it was number of downloads until I
| rechecked your script.
| lucb1e wrote:
| Oh! Now I understand the confusion, good point. Will try
| to edit something in quickly before the edit timer
| expires :)
|
| Obligatory: https://xkcd.com/833/
| fouc wrote:
| Chart in Fiddle doesn't show in safari, but a standalone page
| with the same html loads just fine. Fiddle doesn't properly
| support safari I guess.
| jjcm wrote:
| I'm seeing it fine in both Safari and Safari Tech Preview for
| what it's worth. Versions 14.0.3 and 14.2 respectively.
| nightcracker wrote:
| It's hard to take a "data visualization framework" seriously if
| virtually all examples have unlabeled unmarked axes.
| d33lio wrote:
| Cool, but IMO the chart style sort of looks like garbage?
| [deleted]
| neolog wrote:
| What is the advantage of using CSS over SVG?
| o_m wrote:
| From the looks of it you can put all the data in a table
| element without having to use javascript. If it was pure SVG
| you would have to mix the data and presentation, and it would
| make accessbility trickier.
| [deleted]
| johnx123-up wrote:
| Accessibility. If CSS is disabled, it will render the data
| table.
| thitcanh wrote:
| If CSS is disabled SVG works just as well. I don't know where
| you got the idea that SVG doesn't work without CSS (or JS,
| for that matter)
| ydant wrote:
| I think you misunderstood the point.
|
| The way this library works is the data is embedded in a
| table, which then gets converted to a chart by CSS - so if
| the CSS is disabled, the data is just presented as a table
| of numbers.
|
| I'm not sure if SVG can be written so that it gracefully
| falls back like that. You could generate SVG from the table
| using JavaScript, of course, and just hide the table with
| JavaScript.
| thitcanh wrote:
| 1. Seeing a website without CSS is not really something
| people are concerned about.
|
| 2. I want a graph, not a table. SVG is self-contained so
| WYSIWYG, always.
|
| 3. If you want to show both a graph and a table, with
| Charts.css your markup would contain the same table
| twice.
| thitcanh wrote:
| The advantage is that you write HTML/data and get a nice chart,
| whereas with SVG you need something to process the data, either
| in the browser with JS or locally with any graphing tool.
|
| Given the weight and quality, I'd advise against this solution.
| With 70KB you might as well just load JS and get interactive
| graphs that don't have rendering artifacts (line graphs look
| awful on my phone)
| cphoover wrote:
| It's impressive someone was able to do this... I also do not
| see the advantage.
| mothepro wrote:
| Last year I also released a barebones chart maker using only web
| components [0]. Meaning you can add a chart to your webpage with
| just an HTML tag. [1]
|
| The functionality behind this and others are simple and allow the
| user to fully stylize however they'd like.
|
| 0: https://github.com/mothepro/lit-chart 1:
| https://mothepro.github.io/lit-chart/
| InnerGargoyle wrote:
| looks nice to try, thanks.
| sandstrom wrote:
| My favorite chart library is MetricsGraphics.
|
| Originally developed by Mozilla, its focus is on beautiful and
| accurate charts, and displaying data in a good way.
|
| https://metricsgraphicsjs.org/examples.htm
| InnerGargoyle wrote:
| wow, thank you.
| windthrown wrote:
| Thank you for bringing this to my attention. These are
| fantastic!
| yurishimo wrote:
| I really like this! I haven't had to build any of these more
| time-series oriented data charts but gonna keep this in mind if
| it ever comes up :)
| sakopov wrote:
| This is beautiful work! I would love to see more interactive
| charts though (albeit it might already be possible with some
| tweaks). For example hovering over data points on line chart
| could pop a data point label or something similar. Amazing stuff,
| nevertheless.
| brundolf wrote:
| I love a good CSS-only solution because of its statelessness;
| makes things much easier to reason about IMO. Of course in this
| case you'll probably have to generate your HTML in some
| procedural way anyway, but it's still a neat option to have,
| especially if you're statically-rendering your pages (you can
| avoid using JS entirely)
| CrazyDave wrote:
| This is more of an alternative to SVG than an alternative to
| JS. You could always create charts using plain SVG. Most JS
| charting libraries just do that for you.
| brundolf wrote:
| It is also a bit higher-level than working directly with SVG,
| but a comparison can be made
| bob1029 wrote:
| 100% agree. CSS-only solutions are extremely attractive.
| Avoiding use of JS entirely is one my team's core values at
| this stage.
|
| We never got rid of 100% of it, but we did get really damn
| close using Blazor. Only ~180 lines of javascript interop is
| required for our entire solution last time I checked. This
| isn't trivial stuff either... We hand-rolled large file
| upload/download w/ progress, get client rect, get/set cookies,
| etc.
| pcthrowaway wrote:
| Perhaps I'm wrong, but it may be impossible to add zoom
| capabilities to charts without JS
| brundolf wrote:
| Hmm. You would probably want to implement the actual zoom
| as a `transform: scale() translate()` regardless, and you
| could parameterize it with CSS properties like `transform:
| scale(var(--zoom-scale)) translate(var(--zoom-x),
| var(--zoom-y))`. But when it comes to getting those numbers
| and hooking them into the CSS vars, I don't see a way to do
| that without JS. Certainly, though, the JS could be just a
| couple lines if you did things this way (mousemove listener
| on the container, a bit of math to get the relative x/y,
| and then either a slider or a scroll listener to determine
| the scale, and these three numbers are plugged directly
| into the CSS).
| pcthrowaway wrote:
| Yeah, I suppose are definitely ways to do some basic zoom
| with just CSS and very minimal JS modifying the zoom-
| levels.
|
| But then when you take into account data that needs to be
| inserted for higher resolution at higher zoom levels, it
| becomes a lot of JS, especially if that data needs to be
| fetched as the user zooms.
| eyelidlessness wrote:
| It can definitely be done with checkbox hacks, adjacent
| child selectors, transform, and scroll-based interaction to
| pan.
| thehappypm wrote:
| You could probably use the :hover: pseudo-class and make it
| work.
| brundolf wrote:
| That would assume a single, harcoded zoom level and
| position
| raylus wrote:
| use js + scroll-wheel observer, profit.
| mssundaram wrote:
| For what project/company?
| bob1029 wrote:
| I am under NDA on specifics. We build automation/workflow
| solutions for the financial sector.
| Someone1234 wrote:
| These don't display at all in Internet Explorer 11. You either
| get a white square or a series of unreadable numbers.
|
| That's a non-starter for my usage unfortunately, as even degraded
| IE11 support is swing-able, but completely broken means we cannot
| use it. We're still seeing corporations and government agencies
| using IE11 on a regular basis.
|
| Wikimedia claims 3.9% of their users are still IE11, we're closer
| to 10%, but we're also majority desktop rather than mobile users
| which is also really rare in 2020.
| [deleted]
| chovybizzass wrote:
| This looks clever but probably not practical.
| qbasic_forever wrote:
| Marketing pages always love to have big pretty bar charts to
| compare whizbang product with the old standbys. This would be
| great to make a big hero chart that looks good, doesn't need
| any javascript, and has amazing SEO (the raw table data is
| slurped down by google indexing).
| gervwyk wrote:
| This is absolutely practical. Especially with pages with a
| large number of chart elements. Using larger libs for parklines
| is impractical. I can totally seeing this being able to extent
| to the type of chart you would typically put in a PowerPoint..
| And how practical is that. Sure not full js charts like
| amcharts and co, but libs like that ships with 90% of code
| which 90% of users do not use (sure I'm exaggerating here).
| sceptically wrote:
| It is an amazing proof of concept. Just think of the
| possibility to easily draw Charts without SVG and the need of
| JavaScript. There are still some niche use cases for JavaScript
| disabled browsers.
| onli wrote:
| Why not? It looks very practical to me.
|
| Currently when wanting a chart on a webpage I would fetch the
| data, transform it to the needed javascript array, add that to
| the HTML, and then initialize the javascript library painting
| the chart. With a CSS solution I'd just create a HTML-datatable
| instead, apply the needed classes and have it be rendered
| directly. It looks easier, faster and more accessible to me.
|
| The example graphs are a bit flat, but that's just default
| styling. That's likely changeable with CSS, and animations can
| also be added that way, there are example for that linked in
| the docs.
|
| Awesome project.
| layoutIfNeeded wrote:
| Or just use SVG?
|
| I'd highly doubt there were browsers supporting these CSS
| hacks but not supporting SVG.
| [deleted]
| onli wrote:
| That's not close to the same complexity, is it?
|
| With the HTML + CSS solution, all my program has to produce
| is a HTML table. Very easy.
|
| With SVG my program has to create not just a data table,
| but the custom SVG code to paint the chart, down to each
| bar. I'm actually doing that on pc-kombo, https://www.pc-
| kombo.com/us/benchmark/games/cpu/compare?ids%... shows it,
| the image is SVG. But it's created with
| https://github.com/DannyBen/victor/, so my ruby code has to
| describe all the details of that image, including manually
| saying how each bar chart should look and where on the
| coordinate system the text goes. Even with the awesome
| victor library that wasn't all that easy.
|
| Alternative is a JS library that produces the SVG code, but
| then it's exactly as complicated as with regular JS
| libraries, it just changes the output.
| johnsonap wrote:
| I think could definitely be a practical use for super simple
| visualizations (think inline sparklines)
| tacone wrote:
| Worth noticing that the cited minified size (71 kb) does not take
| on account gzipping. Gzip would further reduce the payload size.
| crazypython wrote:
| With gzip compression level 7, it's 6kb. With brotli
| compression level 6, it's 5kb. It's 4kb with brotli compression
| max.
| jansan wrote:
| Everything that is sent over the internet is usually gzipped
| automatically, so that does not count.
| nooyurrsdey wrote:
| Looks impressive. Documentation is clean, simple, and easy to
| read.
|
| Library looks small (not sure how many KB) and full features for
| a basic charts library.
| sceptically wrote:
| Amazing project! This will be very practical for my Blazor
| application. It's a nice way to prevent ugly JavaScript interop
| wrapper for charting libraries :-)
|
| I will definitely keep an eye on it!
| bob1029 wrote:
| You beat me by 24 minutes. Came here to say how amazing this
| would be for our Blazor UIs.
|
| I really like the idea of applying a simple css style sheet and
| using my existing @foreach directives to build charts that look
| this good.
|
| I had to double check the installation instructions 2x, because
| I was certain there was some javascript piece I had missed.
| open-source-ux wrote:
| Related: If you are interested in understanding when to use a
| particular type of chart and the best practice for labelling
| charts, the following is an excellent introduction to the topic:
|
| _Introduction to data visualisation:_
|
| https://gss.civilservice.gov.uk/policy-store/introduction-to...
| rahimnathwani wrote:
| This guide is nicely written, and mostly useful for tips on
| labelling, but some of the advice on choosing chart types is
| bad. There are several examples of column charts used for
| categorical data, e.g. https://gss.civilservice.gov.uk/wp-
| content/uploads/2020/04/b...
|
| It's OK to use column charts where each column represents a
| category if and only if there's some ordinal nature along the x
| axis, i.e. if either of these are true:
|
| A) The categories have a natural ordering (e.g. 'age group'),
| OR
|
| B) The categories are ordered by their value on the y axis
| (i.e. the most popular 'reason for visiting the UK' is the
| first column, and the least popular on the right)
|
| In other cases, a horizontal bar chart is preferable, as it
| does not lead the reader to mistakenly infer some ordinal
| relationship between the categories.
|
| For learning how to choose a chart type, people should just buy
| Say it with charts (https://www.amazon.com/Say-Charts-
| Executives-Visual-Communic...), read it and complete the
| exercises.
|
| BTW - another thing that bugs me about that chart: the y axis
| is labelled as 'thousands', but then the tick marks are
| labelled 2,000 to 16,000. It would better to use 2, 4, 6, ...
| for the tick marks, and label the axis as 'millions'. Even
| better would be to use percentages, and just mention N
| somewhere in the title.
|
| Which of these charts is clearest? (top-left is the version in
| the linked guide, bottom-right is my preferred option):
| https://docs.google.com/spreadsheets/d/1JO2RXDQBJffWQ34QIi79...
| johnsonap wrote:
| Seems like it could be a good option for super simple
| visualizations without having to rely on something heavier like
| D3.js (which I personally love using)
| savanpatel wrote:
| Looks good but not practical to use. I would love to see some JS
| support through which I can feed in data. Looking at
| documentation, I did not find how can I feed data. Looks like I
| have to calculate it manually or hardcode it.
|
| If I missed something, can you point me to the right place in
| documentation? That's something that would make this useful.
| robertlagrant wrote:
| What do you mean calculate it manually? Why not just load some
| data, and blat some html on the screen with the right classes
| attached?
| onli wrote:
| You are misunderstanding the technology in play here. This is
| just HTML, rendered by CSS to look like a chart (if I
| understood correctly). If you want to change the chart just
| update the HTML data table that's rendered as chart with JS.
|
| There is nothing the CSS files of the project could do to help
| with that - as no help is needed :)
| andy99 wrote:
| Cool! I'll have to take the opportunity to mention my own
| charts.css[0]. It got some interest on HN last year [1] and I
| unfortunately dropped the ball and didn't make any revisions
| based on the good feedback I got. As people pointed out, I tried
| to give it a "cute" name using unicode which unfortunately makes
| it harder to search for.
|
| This version (OP's) is way more polished and almost certainly
| more widely useful. But mine had the features of (a) being
| generated from markdown and (b) defaulting to a list presentation
| of the data under different styles so the data remained
| accessible.
|
| Having more charting options that don't require javascript to do
| simple things is a good thing.
|
| [0] https://rbitr.github.io/ChartS.css/ [1]
| https://news.ycombinator.com/item?id=23270581
| johnfn wrote:
| Wow, that name is very clever. I can see the temptation ;-)
| privatemonkey wrote:
| Awesome. With a build step to do some data conversion I can see
| this being a more accessible option than rendering with canvas or
| SVG. Not that tables are that accessible but still, a better
| option. I think you could make that into the main selling point
| for your apporoach as it's an overlooked and difficult area of
| visualisation.
|
| Apart from different chart types, examples on how to rig
| data/image export will make this even more usefull.
|
| I currently work on accessibility guidelines for visualisations
| at a national bureau of statistics. This came just at the right
| time for me as I'm exploring options to improve accessibility
| beyond the capabilities of libraries like highcharts, vega,
| charts.js etc. Don't hesitate to contact me. I'm very interested
| in the possibilities in this approach.
| mwcampbell wrote:
| > Not that tables are that accessible
|
| What do you find lacking in the accessibility of tables?
| soperj wrote:
| I don't feel like they're far off here. The legend piece looks
| promising, they just need to be able to label both the axes, and
| I think you've got everything you need.
| privatemonkey wrote:
| I've experimented with this myself. You can get some nice
| interactions by using checkboxes and radios instead of list
| items, but you would need something to hook onto the table row
| or cell, a class or a data-attribute.
| sgt wrote:
| Agreed, I kept looking through all the examples for labelling
| of both the axes. It's a bit strange that you would not show
| the number one thing most people are looking for in a chart.
| nt2h9uh238h wrote:
| 1. Is this substantially faster than JS? (canvas / .svg). Please
| test this exhaustively. Render time and script evaluation for JS
| charts is still a huge JS problem.
|
| 2. Can this be made interactive, e.g. on mouse-over show exact
| numbers? Without interactivity, it is still kinda lame
| 5cents wrote:
| 2. Yes, see for example https://chartscss.org/examples/column/
| and the feature list https://chartscss.org/charts/
| [deleted]
| privatemonkey wrote:
| 2. You could use the title attribute to accomplish this. The
| example for mouseover contains a span tag that probably mess it
| up for a screen reader read so it reads it out twice. Might
| happen if using the title attribute as well.
| ngokevin wrote:
| Yeah, it can be a flip depending on implementation, whether you
| can beat something that is just pixels and GPU with the DOM +
| browser rendering engine, which has more layers and
| unpredictability.
| jordache wrote:
| none of the charts are responsive? WOuld be hard to do with
| purely css?
| TrueDuality wrote:
| On the Usage page it shows everything but the result of applying
| the Chart styling which is one of the first things I want to see
| in a project like this.
|
| Are there any sample graphs using more than 5 data points? I'd
| also want to see how this scales to reasonable blog-post level
| graphs which will probably be in the 30+ point range (a data
| point every five minutes covering a 3 hour range, or hourly for a
| week, both seem like reasonable minimum data sizes to be able to
| render well).
|
| I love the potential accessibility benefits of using data tables
| directly styled like this.
| tambourine_man wrote:
| This is brilliant. It's all done with clip-path and CSS
| variables.
|
| That said, it's a bit of a hack. The best kind of hack, the crazy
| smart kind, but still a hack. And as such, there are some
| visualization glitches here and there you wouldn't get with
| Canvas or SVG.
|
| Still, such a cool idea. I love stretching technologies way
| beyond their original intent.
| eyelidlessness wrote:
| Worth noting that clip-path basically is SVG (a subset, it's
| the CSS equivalent of the `d` attribute).
| Waterluvian wrote:
| Nothing makes me happier than a UI library with a billion
| examples.
| InnerGargoyle wrote:
| you mean D3.js?
___________________________________________________________________
(page generated 2021-03-18 23:02 UTC)