Giter VIP home page Giter VIP logo

cssplot's Introduction

cssplot

Simple, css-only plotting.

Features

  • No javascript required
  • Easy-to-use
  • Responsive

Check asciimoo.github.io/cssplot for demo.

Usage

<link media="all" rel="stylesheet" type="text/css" href="/build/cssplot.full.css" />

Alternatively cssplot.base.css can be used alone with the following modifications:

  • Bar chart: use class="chart-column" style="height: 99.0%" instead of data-cp-size="99"
  • Vertical bar chart: use class="chart-row" style="width: 99.0%" instead of data-cp-size="99"
  • Scatter plot: use class="chart-dot" style="left: 20.0%; bottom: 10.0%" instead of data-cp-x="20" data-cp-y="10"

Examples

Column chart

<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>

Stacked Column chart

<div class="column-chart stacked">
  <ul class="plot-container group-by-number">
    <li>
      <div data-cp-size="99">99%</div>
    </li>
    <li>
      <div data-cp-size="50">50%</div>
      <div data-cp-size="20" data-group="5">20%</div>
    </li>
    <li>
      <div data-cp-size="30">30%</div>
      <div data-cp-size="15" data-group="5">15%</div>
    </li>
    <li>
      <div data-cp-size="90">90%</div>
      <div data-cp-size="10" data-group="5">10%</div>
    </li>
    <li>
      <div data-cp-size="10">10%</div>
      <div data-cp-size="60" data-group="5">60%</div>
    </li>
    <li>
      <div data-cp-size="70">70%</div>
      <div data-cp-size="25" data-group="5">25%</div>
    </li>
    <li>
      <div data-cp-size="30">30%</div>
      <div data-cp-size="40" data-group="5">40%</div>
    </li>
    <li>
      <div data-cp-size="90">90%</div>
    </li>
  </ul>
</div>

Bar chart

<div class="bar-chart">
    <ul class="plot-container">
        <li data-cp-size="100">100%</li>
        <li data-cp-size="30">30%</li>
        <li data-cp-size="20">20%</li>
        <li data-cp-size="70">70%</li>
        <li data-cp-size="90">90%</li>
    </ul>
</div>

Stacked Bar chart

<div class="bar-chart stacked pad">
    <ul class="plot-container group-by-number">
        <li>
            <div data-cp-size="100">100%</div>
        </li>
        <li>
            <div data-cp-size="30">30%</div>
            <div data-cp-size="30" data-group="5">30%</div>
        </li>
        <li>
            <div data-cp-size="20">20%</div>
            <div data-cp-size="50" data-group="5">50%</div>
        </li>
        <li>
            <div data-cp-size="70">70%</div>
            <div data-cp-size="20" data-group="5">20%</div>
        </li>
        <li>
            <div data-cp-size="90">90%</div>
            <div data-cp-size="10" data-group="5">10%</div>
        </li>
    </ul>
</div>

Scatter plot

<div class="scatter-plot">
    <ul class="plot-container">
        <li data-cp-x="50" data-cp-y="30">a</li>
        <li data-cp-x="30" data-cp-y="20">b</li>
        <li data-cp-x="10" data-cp-y="5">c</li>
        <li data-cp-x="11" data-cp-y="10">d</li>
        <li data-cp-x="12" data-cp-y="20">e</li>
        <li data-cp-x="13" data-cp-y="30">f</li>
        <li data-cp-x="0" data-cp-y="0">h</li>
        <li data-cp-x="100" data-cp-y="100">i</li>
    </ul>
</div>

Conceptions

  • Pie chart
  • Line chart
  • Axis/scale support
  • Live demo
  • Better build script

cssplot's People

Contributors

asciimoo avatar dcrousso avatar kantord avatar maciejczyzewski avatar rafaelrinaldi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cssplot's Issues

Why Enforce DOM Structure?

It seems a little odd that you're requiring uls and lis. What if I wanted to use sections and divs? I would recommend that you remove requirements for uls and lis, and instead focus on attributes and classes!

live demo

hi, where's the live demo. i'm only seeing pictures.

Transition between graphs

I'm creating transition between 0 state and current state through a new data-cp-transition atribute. Are you interested in merge it? And I'm changing the build to fit GruntJS tasks if it's OK to you.

cssplot stacked bar chart IE8 rendering problem

Hi authors.

Two of the cssplot demos at https://asciimoo.github.io/cssplot/ display correctly in IE8 (bar chart with percent and twin bars with no numbers) but the rest of the samples are not recognizable as charts.

It might be a minor tweak to fix these, so please take a look at them in IE8.

I have an IE8 machine available, so let me know if you need additional testing.

Thanks, James.

Semantic markup

Firstly, awesome script/ idea.. Maybe if you use a table instead of ul and li's you can have a tabular representation of the data if people don't have CSS switched on, that way you would keep the semantic ruling intact.. an ul is not meant for tabular data.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.