
CSS-only plotting - teddet
https://github.com/asciimoo/cssplot/
======
judofyr
Might as well use inline styling to accomplish the same (without adding tons
of CSS):

    
    
        <div class="bar-chart">
          <ul>
            <li style="height:99%">99%</li>
            <li style="height:50%">50%</li>
            <li style="height:30%">30%</li>
            <li style="height:90%">90%</li>
            <li style="height:10%">10%</li>
            <li style="height:70%">70%</li>
            <li style="height:30%">30%</li>
            <li style="height:90%">90%</li>
          </ul>
        </div>

~~~
peaton
Why do you bring this up? Is this more ideal? I thought writing inline css was
an accepted awful thing to do. Or is that just a simplification for new
developers? Why do you benefit from doing this?

~~~
pornel
Inline CSS isn't any more awful than any other meaningless presentational
markup.

Why use inline CSS? Because it's simpler and obvious. The proposed hack has no
upsides: it isn't any more accessible, isn't any more maintainable, and it
isn't any more performant (quite the opposite).

To me it's in the same category as replacing `<font color=red>` with `<span
class=red>`, because "font is bad".

~~~
Arnt
The proposed hack has the upside that all of the bar charts on a site are
governed by the same CSS.

The CSS is ugly because of the many redundant rules. But if you have x bar
charts on y pages, then one ugly CSS file is better than x repeated ugly spots
spread out in y HTML files.

~~~
pornel
Inline style for bar height doesn't preclude use of external styles for common
properties like color, borders, etc.

Also it's very unlikely you'd have many charts with markup written by hand.
I'd expect charts to be generated from a template from a proper data source,
so change in markup of all charts would still be done in one place.

------
BoppreH
I loved the simplicity, and wanted to know how it was done.

[https://github.com/asciimoo/cssplot/blob/master/cssplot.css](https://github.com/asciimoo/cssplot/blob/master/cssplot.css)

    
    
      .bar-chart ul li[data-cp-size="0"] {
      height: 0%;
      }
      .bar-chart ul li[data-cp-size="1"] {
      height: 1%;
      }
      .bar-chart ul li[data-cp-size="2"] {
      height: 2%;
      }
      ...
    

Still find it cool, but a 1200 line CSS may be a bit too much for a practical
application.

~~~
evanm
Couldn't this be reduced by, like, a lot by simply using this CSS3 gem?

height: attr(sata-cp-size px);

~~~
bennettfeely
Someday, but right now the support for using 'attr()' function in properties
other than 'content' is very poor.

~~~
nness
Correct, attr() for use with anything than the content property is unsupported
by most browsers.

([https://developer.mozilla.org/en-
US/docs/Web/CSS/attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr))

------
bbx
Usually, "CSS-only" articles and repos are either technically impressive, or
clever solutions for production environment problems.

Considering attribute selectors have been around for a while, I fail to see a
decent use case. Any progress bar or 2-dimensional chart of this kind needs to
be generated dynamically, either through the backend or frontend, same thing.
In this case, they're inserted as data attribute values. What's the difference
with using inline style attributes (left: 10%; width: 90%)? They're generated
automatically, so verbosity is not an issue. And you'd save yourself 1200
lines of CSS.

What about flexibility? CSS provides the ability to style each of the 400
options differently, right? Well using a "x24 y78" CSS class would be as
simple. But in the end, you only want to give different height/width
bottom/left values. The styling remains unchanged.

Writing _every_ possible option of a _dynamically_ generated chart into a
_static_ CSS file, just for the sake of "Simplicity" and "No javascript
required" seems like an overkill.

On a side note, anything dealing with percentages instead of pixel values is
automatically granted the keyword "Responsive".

------
rco8786
Neat idea, a little disappointed looking at the source though. A class for
every possible datapoint doesn't scale particularly well.

------
bennettfeely
No need for duplicating the value in the attribute and also in the element by
including this snippet.

    
    
      [data-cp-size]:after { content: attr(data-cp-size) "%"; }

------
sova
i think what you made is cool. keep making cool stuff.

------
evan_
With the addition of a few CSS transition rules these could be animated really
easily.

------
caiob
if only CSS supported for loops and variables..

