Commit 1140d0c5 authored by Paul Asmuth's avatar Paul Asmuth
Browse files

update readme

parent 6e957f22

README.md

+23 −47
Original line number Diff line number Diff line 
PlotFX

======

<h1 align="center">PlotFX - Open-source plotting toolkit</h1>



[![Build status](https://ci.appveyor.com/api/projects/status/8h07x0erafnxsumi/branch/master?svg=true)](https://ci.appveyor.com/project/plotfx/plotfx/branch/master)

![BSD-License](https://img.shields.io/badge/license-BSD-blue.svg?style=flat-square)

<p align="center">

  <a href="https://github.com/plotfx/plotfx/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-BSD-blue.svg" alt="License: BSD"></a>

  <a href="https://ci.appveyor.com/project/plotfx/plotfx/branch/master"><img src="https://ci.appveyor.com/api/projects/status/8h07x0erafnxsumi/branch/master?svg=true" alt="Build Status"></a>

  <br>

  <br>

  <img src="/examples/other/demo.svg" width="90%">

</p>



<p align="center" width="90%">

  PlotFX is a tool for creating data-driven graphics; it allows you to create

  parametric illustrations such as charts and dashboards using a lightweight

  CSS-like syntax.

</p>



<h4 align="center">

  <a href="https://plotfx.org/examples">Examples</a> &middot;

  <a href="https://plotfx.org">Documentation</a>

</h4>





Introduction

------------



PlotFX is a tool for creating data-driven graphics; it allows you to create

parametric illustrations such as charts and dashboards using a lightweight
@@ -18,9 +37,6 @@ PlotFX is built in the hope that using it will be quick, simple and fun. 
stability is currently beta/experimental. Maybe not even that. It will take a few

more weeks to stabilize and document everything.



[Examples](https://plotfx.org/examples) |

[Documentation](https://plotfx.org/)





Getting Started

---------------
@@ -79,46 +95,6 @@ To run the test suite, run `make test`: 
    $ make test





Examples

--------



Here are some more examples of plots generated by PlotFX:



<table>

  <tr>

    <td width="50%">

      <img src="./examples/linecharts/lines_with_points.svg">

    </td>

    <td width="50%">

      <img src="./examples/pointcharts/pointchart_with_labels.svg">

    </td>

  </tr>

  <tr>

  </tr>

  <tr>

    <td width="50%">

      <img src="./examples/areacharts/simple_area.svg">

    </td>

    <td width="50%">

      <img src="./examples/barcharts/negative_values.svg">

    </td>

  </tr>

  <tr>

  </tr>

  <tr>

    <td width="50%">

      <img src="./examples/linecharts/lines_with_labels.svg">

    </td>

    <td width="50%">

      <img src="./examples/areacharts/area_ranges.svg">

    </td>

  </tr>

</table>





For more examples, please see [the examples page](https://plotfx.org/examples).





Acknowledgements

----------------

examples/demo.ptx

deleted100644 → 0
+0 −83
Original line number Diff line number Diff line 
width: 1920px;

height: 1080px;



background-color: #000;

margin: 1em;



box {

  background-color: #f00;

  position: top;

  height: 200;



  margin: 1em;



  box {

    background-color: #000;

    position: left;

    width: 200;

  }



  box {

    background-color: #fff;

    position: left;

    width: 200;

  }



  box {

    background-color: #000;

    position: right;

    width: 200;

  }



  box {

    background-color: #fff;

    position: right;

    width: 200;

  }

}



box {

  background-color: #f00;

  position: bottom;

  height: 200;



  margin: 1em;



  box {

    background-color: #000;

    position: left;

    width: 200;

  }



  box {

    background-color: #fff;

    position: left;

    width: 200;

  }



  box {

    background-color: #000;

    position: right;

    width: 200;

  }



  box {

    background-color: #fff;

    position: right;

    width: 200;

  }

}



box {

  margin: 8em;

  background-color: #0f0;



  box {

    background-color: #00f;



    box {

      background-color: #fff;

      width: 500;

    }

  }

}

examples/other/demo.ptx

0 → 100644
+297 −0
Original line number Diff line number Diff line 
width: 2000px;

height: 1080px;



background-color: #000;

margin: 2pt;



box {

  background-color: #fff;

  position: right;

  width: 600px;



  margin-top: 2em;



  box {

    position: top;

    height: 500px;



    scale-y-min: 0;

    scale-y-max: 140;



    gridlines {}



    areas {

      xs: csv('tests/testdata/measurement.csv', time);

      ys: csv('tests/testdata/measurement.csv', value2);

      colors: #06c;

    }



    axis {

      position: bottom;

      format: datetime("%H:%M:%S");

      height: 60px;

    }



    axis {

      position: left;

      width: 60px;

      layout: linear(20);

    }



    axis {

      position: right;

      width: 60px;

      layout: linear(20);

    }

  }



  box {

    position: top;

    height: 500px;



    scale-y-min: 0;

    scale-y-max: 140;



    gridlines {}



    areas {

      xs: csv('tests/testdata/measurement.csv', time);

      ys: csv('tests/testdata/measurement.csv', value2);

      colors: #06c;

    }



    axis {

      position: bottom;

      format: datetime("%H:%M:%S");

      height: 60px;

    }



    axis {

      position: left;

      width: 60px;

      layout: linear(20);

    }



    axis {

      position: right;

      width: 60px;

      layout: linear(20);

    }

  }

}



box {

  height: 250px;

  position: top;

  margin-top: 1em;

  margin-bottom: 1em;

  background-color: #fff;



  box {

    width: 460px;

    position: left;



    margin-left: .75em;



    scale-x-padding: 0.5;

    scale-y: log;



    bars {

      xs: csv(tests/testdata/histogram.csv, var0);

      ys: csv(tests/testdata/histogram.csv, var1);

      color: #888;

      size: 14pt;

    }



    axis {

      position: bottom;

      layout: linear(1, align 1);

    }



    axis {

      position: top;

      layout: linear(1, align 1);

    }



    axis {

      position: left;

      width: 60px;

    }



    legend {

      position: top right inside;

      items: "New York";

      colors: #4572a7;

    }

  }



  box {

    width: 400px;

    position: left;



    margin-left: .75em;

    margin-right: .75em;



    scale-x-padding: 0.5;

    scale-y: log;



    bars {

      xs: csv(tests/testdata/histogram.csv, var0);

      ys: csv(tests/testdata/histogram.csv, var1);

      color: #888;

      size: 14pt;

    }



    axis {

      position: bottom;

      layout: linear(1, align 1);

    }



    axis {

      position: top;

      layout: linear(1, align 1);

    }



    legend {

      position: top right inside;

      items: "New York";

      colors: #4572a7;

    }

  }



  box {

    width: 460px;

    position: left;



    margin-left: .75em;



    scale-x-padding: 0.5;

    scale-y: log;



    bars {

      xs: csv(tests/testdata/histogram.csv, var0);

      ys: csv(tests/testdata/histogram.csv, var1);

      color: #888;

      size: 14pt;

    }



    axis {

      position: bottom;

      layout: linear(1, align 1);

    }



    axis {

      position: right;

      width: 60px;

    }



    axis {

      position: top;

      layout: linear(1, align 1);

    }



    legend {

      position: top right inside;

      items: "New York";

      colors: #4572a7;

    }

  }

}



box {

  position: top;

  height: 280px;

  margin-top: 1em;

  background-color: #fff;



  scale-y-min: 0;

  scale-y-max: 140;



  lines {

    xs: csv('tests/testdata/measurement.csv', time);

    ys: csv('tests/testdata/measurement.csv', value2);

    colors: #06c;

  }



  axis {

    position: top;

    format: datetime("%H:%M:%S");

    height: 60px;

  }



  axis {

    position: left;

    width: 60px;

    layout: linear(20);

  }



  axis {

    position: right;

    width: 60px;

    layout: linear(20);

  }

}



box {

  position: top;

  height: 220px;

  margin-top: 1em;

  background-color: #fff;



  scale-y-min: 0;

  scale-y-max: 140;



  lines {

    xs: csv('tests/testdata/measurement.csv', time);

    ys: csv('tests/testdata/measurement.csv', value2);

    colors: #06c;

  }



  axis {

    position: left;

    width: 60px;

    layout: linear(20);

  }



  axis {

    position: right;

    width: 60px;

    layout: linear(20);

  }

}



box {

  position: top;

  height: 280px;

  margin-top: 1em;

  background-color: #fff;



  scale-y-min: 0;

  scale-y-max: 140;



  areas {

    xs: csv('tests/testdata/measurement.csv', time);

    ys: csv('tests/testdata/measurement.csv', value2);

    colors: #06c;

  }



  axis {

    position: bottom;

    format: datetime("%H:%M:%S");

    height: 60px;

  }



  axis {

    position: left;

    width: 60px;

    layout: linear(20);

  }



  axis {

    position: right;

    width: 60px;

    layout: linear(20);

  }



}

examples/other/demo.svg

0 → 100644
+420 −0

File added.

Preview size limit exceeded, changes collapsed.

CRA Git | Maintained and supported by SUSTech CRA and CCSE