update the readme and getting started page

a description of the chart or diagram and produces an image from it. This is best

explained by example, so here is how to draw a simple line chart using clip:

    (class plot)

    (axes

        label-format-x (datetime "%H:%M:%S"))

    (grid

        stroke-color #333

        stroke-style dashed)

    (lines

        data-x (csv "measurement.csv" time)

        data-y (csv "measurement.csv" value)

        stroke-width 0.8pt)

    class: plot;

    limit-x: 0 7200;

    limit-y: 0 100;

    axes {

      font: "Latin Modern Roman";

      font-size: 12pt;

      label-format-x: datetime("%H:%M:%S");

      label-placement-x: linear-interval(900 900 7000);

    }

    lines {

      data-x: csv(test/testdata/timeseries.csv time);

      data-y: csv(test/testdata/timeseries.csv value);

      stroke-width: 0.8pt;

    }

The input file from above (`example.clp`) can be processed with clip using the

following command:

(lines

    data-x (100 200 300 400 500 600 700 800 900)

    data-y (1.2 1.8 1.3 1.6 1.5 1.3 1.8 1.9 2.0)

    limit-y (0 3)

    limit-x (0 1000)

    marker-shape (pentagon)

    marker-size 8pt)

lines {

  data-x: 100 200 300 400 500 600 700 800 900;

  data-y: 1.2 1.8 1.3 1.6 1.5 1.3 1.8 1.9 2.0;

  limit-y: 0 3;

  limit-x: 0 1000;

  marker-shape: pentagon;

  marker-size: 8pt;

}

<?xml version="1.0" encoding="UTF-8" ?>

<!-- Generated by clip v0.8.0 (clip-lang.org) -->

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="512">

  <rect width="1024" height="512" fill="#ffffff" fill-opacity="1"/>

  <path d="M102.400 307.200 L204.800 204.800 L307.200 290.133 L409.600 238.933 L512 256 L614.400 290.133 L716.800 204.800 L819.200 187.733 L921.600 170.667" fill="none" stroke="#000000" stroke-width="2"/>

  <path d="M97.072 305.169 L102.494 301.231 L107.916 305.169 L105.838 311.544 L99.134 311.544 L97.072 305.169 Z"/>

  <path d="M199.472 202.769 L204.894 198.831 L210.316 202.769 L208.238 209.144 L201.534 209.144 L199.472 202.769 Z"/>

  <path d="M301.872 288.102 L307.294 284.165 L312.716 288.102 L310.637 294.477 L303.934 294.477 L301.872 288.102 Z"/>

  <path d="M404.272 236.902 L409.694 232.965 L415.116 236.902 L413.038 243.277 L406.334 243.277 L404.272 236.902 Z"/>

  <path d="M506.672 253.969 L512.094 250.031 L517.516 253.969 L515.438 260.344 L508.734 260.344 L506.672 253.969 Z"/>

  <path d="M609.072 288.102 L614.494 284.165 L619.916 288.102 L617.837 294.477 L611.134 294.477 L609.072 288.102 Z"/>

  <path d="M711.472 202.769 L716.894 198.831 L722.316 202.769 L720.237 209.144 L713.534 209.144 L711.472 202.769 Z"/>

  <path d="M813.872 185.702 L819.294 181.765 L824.716 185.702 L822.638 192.077 L815.934 192.077 L813.872 185.702 Z"/>

  <path d="M916.272 168.635 L921.694 164.698 L927.116 168.635 L925.038 175.010 L918.334 175.010 L916.272 168.635 Z"/>

<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="800">

  <rect width="1600" height="800" fill="#ffffff" fill-opacity="1"/>

  <path d="M160 480 L320 320 L480 453.333 L640 373.333 L800 400 L960 453.333 L1120 320 L1280 293.333 L1440 266.667" fill="none" stroke="#000000" stroke-width="4"/>

  <path d="M149.336 476.438 L160.180 468.562 L171.023 476.438 L166.883 489.188 L153.477 489.188 L149.336 476.438 Z"/>

  <path d="M309.336 316.438 L320.180 308.562 L331.023 316.438 L326.883 329.188 L313.477 329.188 L309.336 316.438 Z"/>

  <path d="M469.336 449.771 L480.180 441.896 L491.023 449.771 L486.883 462.521 L473.477 462.521 L469.336 449.771 Z"/>

  <path d="M629.336 369.771 L640.180 361.896 L651.023 369.771 L646.883 382.521 L633.477 382.521 L629.336 369.771 Z"/>

  <path d="M789.336 396.438 L800.180 388.562 L811.023 396.438 L806.883 409.188 L793.477 409.188 L789.336 396.438 Z"/>

  <path d="M949.336 449.771 L960.180 441.896 L971.023 449.771 L966.883 462.521 L953.477 462.521 L949.336 449.771 Z"/>

  <path d="M1109.336 316.438 L1120.180 308.562 L1131.023 316.438 L1126.883 329.188 L1113.477 329.188 L1109.336 316.438 Z"/>

  <path d="M1269.336 289.771 L1280.180 281.896 L1291.023 289.771 L1286.883 302.521 L1273.477 302.521 L1269.336 289.771 Z"/>

  <path d="M1429.336 263.104 L1440.180 255.229 L1451.023 263.104 L1446.883 275.854 L1433.477 275.854 L1429.336 263.104 Z"/>

</svg>

axes {

  limit-y: 0 3;

  limit-x: 0 1000;

  label-format-x: scientific();

  label-placement-x: linear-interval(100 100 900);

}

(axes

    limit-y (0 3)

    limit-x (0 1000)

    label-format-x (scientific)

    label-placement-x (linear-interval 100 100 900))

(lines

    data-x (100 200 300 400 500 600 700 800 900)

    data-y (1.2 1.8 1.3 1.6 1.5 1.3 1.8 1.9 2.0)

    limit-y (0 3)

    limit-x (0 1000)

    marker-shape (pentagon)

    marker-size 8pt)

lines {

  data-x: 100 200 300 400 500 600 700 800 900;

  data-y: 1.2 1.8 1.3 1.6 1.5 1.3 1.8 1.9 2.0;

  limit-y: 0 3;

  limit-x: 0 1000;

  marker-shape: pentagon;

  marker-size: 8pt;

}