JSFiddle - React, Tailwind, and code Playground

cssplot Simple, css-only plotting

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <h2>Column Chart</h2>
        <div class="col-sm-6">
            <div class="column-chart">
                <ul class="plot-container">
                    <li data-cp-size="99">99%</li>
                    <li data-cp-size="50">50%</li>
                    <li data-cp-size="30">30%</li>
                    <li data-cp-size="90">90%</li>
                    <li data-cp-size="10">10%</li>
                    <li data-cp-size="70">70%</li>
                    <li data-cp-size="30">30%</li>
                    <li data-cp-size="90">90%</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="column-chart">
                <ul class="plot-container group-by-number">
                    <li data-cp-size="1"></li>
                    <li data-cp-size="2" data-group="5"></li>
                    <li data-cp-size="4"></li>
                    <li data-cp-size="8" data-group="5"></li>
                    <li data-cp-size="16"></li>
                    <li data-cp-size="32" data-group="5"></li>
                    <li data-cp-size="64"></li>
                    <li data-cp-size="100" data-group="5"></li>
                    <li data-cp-size="90"></li>
                    <li data-cp-size="80" data-group="5"></li>
                    <li data-cp-size="70"></li>
                    <li data-cp-size="60" data-group="5"></li>
                    <li data-cp-size="50"></li>
                    <li data-cp-size="40" data-group="5"></li>
                    <li data-cp-size="30"></li>
                    <li data-cp-size="20" data-group="5"></li>
          ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

.column-chart,
.bar-chart,
.scatter-plot {
    position: relative;
    min-width: 100px;
    min-height: 100px;
    padding: 0;
    margin: 0;
}
.column-chart .chart-column,
.bar-chart .chart-row,
.column-chart [data-cp-size],
.bar-chart [data-cp-size],
.plot-container > * > * {
    list-style: none;
    border: 1px solid #ffffff;
}
.column-chart .plot-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    min-height: 100px;
}
.column-chart.stacked > * > * {
    height: 100%;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}
.column-chart.stacked .group-by-number [data-cp-size] {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}
.column-chart .chart-column,
.column-chart [data-cp-size],
.column-chart.stacked > * > * {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
.column-chart .chart-column,
.bar-chart .chart-row,
.column-chart [data-cp-size],
.bar-chart [data-cp-size] {
    background: #3498db;
    color: #ffffff;
    box-sizing: border-box;
}
.bar-chart {
    clear: both;
}
.bar-chart .plot-container {
    flex-direction: row;
    padding: 0;
    margin: 0;
    width: 100%;
}
.bar-chart .chart-row,
.bar-chart [data-cp-size] {
    min-height: 8px;
}
.bar-chart.stacked > * > * {
    display: flex;
}
.bar-chart.stacked .group-by-number [data-cp-size] {
    display: inline-block;
}
.scatter-plot .plot-container {
    position: absolute;
    top: 12px;
    left: 0;
   ...

JavaScript

// Bootstrap v3.3.1
// Font Awesome 4.2.0

// https://github.com/asciimoo/cssplot