• Type:

CH Show HN: Chartss.css – accessible HTML/CSS charts with markdown support

If you’re viewing on github, see the html version at here.

Likewise, if you’re viewing the website, you can see the github page here

Features

  • Charts directly from markdown lists via pandoc
  • Retains accessible, semantic HTML
  • No javascript or other frameworks, no external dependencies, uses only a small .css file
  • Use html templates to directly create charts, or convert from markdown

The point of C💚SS.css is to allow easy creation of simple charts for documentation, data storytelling / journalism, etc. It features plots of 1-D lists, and has a custom markdown filter that converts suitably formatted lists directly to charts. It has no dependencies (other than a modern browser), and is very small compared to javascript based charting tools. The html is based on

    lists and will collapse back to readible lists in the absence of css support, making it accessible to all readers. It is open source and easily configurable according to project needs.

    The non-chart elements on the html version of this page were styled with mvp.css. MVP.css was one of the inspirations for C💚SS.css. Although C💚SS.css turned out very differently, MVP.css got me on to the idea of having a simple, self-contained .css file that could easily transform a text page into something nice.

    Usage

    Requirements

    A modern browser that supports css is required. It has been tested on chrome and firefox.

    To write html directly, all you need is the C💚SS.css style file.

    Download C💚SS.css

    See below or view source for usage.

    To convert directly from markdown to html charts, you will need pandoc installed. Even if you never use C💚SS.css, you should still get pandoc. You can find information on how to install it here. There is good information on markdown syntax here.

    Pandoc works with chartss.lua to parse markdown into html that uses C💚SS.css.

    Download charts.lua

    Running chartss.lua

    The following command creates a stand alone html file out of a markdown file. Markdown lists conforming to the syntax discussed below will automatically be converted into charts.

    $ pandoc -t chartss.lua infile.md > outfile.html

    Bar Charts:

    Syntax

    (*|-) category: value

    Example

    - Dogs: 39
    - Cats: 7
    - Lions: 36
    - Tigers: 55
    - Bears: 33
    - Walruses: 30

    Output (see html version)

    • Dogs : 39
    • Cats : 7
    • Lions : 36
    • Tigers : 55
    • Bears : 33
    • Walruses : 30






    Scatter Plots:

    Syntax

    (*|-) (xi,yi)

    Example

    - (15,12)
    - (0.25,6.78)
    - (-.7,9)
    - (-4,-6)

    Output (see html version)

  • (15,12)
  • (0.25,6.78)
  • (-0.7,9)
  • (-4,-6)
  • A Regular List:

    Syntax

    (*|-) List Item

    Example

    * Cats
    * Dogs
    * Mice
    * Men
    * Lambs
    * Lions

    Output (if C💚SS.css cannot chart it, a normal list is displayed)

    • Cats
    • Dogs
    • Mice
    • Men
    • Lambs
    • Lions

    Line Plot:

    Syntax (constant spacing indicates a line)

    (*|-) x1 : y1
    (*|-) x1+dx : y2
    (*|-) x1+2dx : y3
    ...

    Example

    * 1.5 : 3.3
    * 3 : -1.2
    * 4.5 : 0
    * 6 : 0
    * 7.5 : 1.5
    * 9 : 4
    * 10.5 : 8

    Output (see html version)

    Stacked Bar (a pie chart for grownups):

    Syntax (add a plus sign to the end of labels)

    (*|-) category: label+

    Example

    * Dogs : 20+
    * Cats : 10+
    * Lions : 30+
    * Tigers : 15+
    * Bears : 20+

    Output (see html version)

    • Dogs: 20
    • Cats: 10
    • Lions: 30
    • Tigers: 15
    • Bears: 20

    Waterfall Chart

    Syntax

    (*|-) total: value=
    (*|-) category1: value1+
    (*|-) category2: value2+
    ...

    Output (see html version)

    HTML templates

    Note: this html was generated using the defaults of chartss.lua. This means that 1. More or fewer ticks can be added on the axes and 2. There has been som autoscaling applied to the chart areas. If you are creating manual charts, you will have to scale between the label values and the percentage values that the charting functions use.

    Bar Chart

    • Dogs: 20
    • Cats: 10
    • Lions: 30
    • Tigers: 15
    • Bears: 20

    Scatter Plot

  • (15,12)
  • (0.25,6.78)
  • (-0.7,9)
  • (-4,-6)
  • Line Plot

    (For line plots, the lower y-value of each line segment always has to come first, as --line-y-from, with the direction specified by --line-slope. Also note that a zero slope line needs its border-top-style:solid property set as shown below as a hack to show the line.

  • 1.5 : 3.3
  • 3 : -1.2
  • 4.5 : 0
  • 6 : 0
  • 7.5 : 1.5
  • 9 : 4
  • 10.5 : 8
  • Stacked Bar Chart

    • Dogs: 20
    • Cats: 10
    • Lions: 30
    • Tigers: 15
    • Bears: 20

    Waterfall Chart

    (You need to account for the bar height as well as the padding that uses a LineBlock)

  • Animals: 95
  • Dogs : 20
  • Cats : 10
  • Lions : 30
  • Tigers : 15
  • Bears : 20

Read More

Previous Post

CH Show HN: Turn your fancy, expensive computer into a stupid typewriter

Next Post

CH Show HN: Create a custom macOS app from a group of websites

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top