update the 'getting started' page

h2 {

  border-bottom: 2px solid #eee;

  margin-top: 2em;

  margin-bottom: .4em;

  margin-bottom: .8em;

  padding-bottom: .2em;

  font-weight: 600;

}

}

#documentation .example_grid {

  padding-top: 1em;

  display:grid;

  grid-template-columns: 1fr 1fr;

  grid-column-gap: 4em;

'Arial,Helvetica,Helvetica Neue:style=Regular,Roman'` and check that it returns

the correct 'arial.ttf' file.

page first.

### 1) The first image

fviz is a data plotting program; it reads an input text file containing a

description of the plot and outputs an image, either in a vector graphics format

such as SVG, or as a bitmap.

A fviz input file consists of a tree of 'element' specifications which describe

graphical elements such as lines or text boxes. Each element can have a number

of key-value properties that control its contents and appearance.

graphical elements such as charts, lines or text boxes. Each element can have a

number of properties that control its contents and appearance.

However, instead of loosing too many words on the terminology, here is a minimal

example file that you can save to your machine and run:

    width: 800px;

    height: 400px;

    points {

      xs: 90px, 650px, 420px;

      ys: 180px, 300px, 120px;

      sizes: 3pt, 6pt, 11pt;

      colors: #06c, #0c6, #c06;

    }

Example #1

----------

The example defines a new image which contains a single `points` element. The

points element will draw a circle at each coordinate that is specified using the

`xs` and `ys` properties. Note that for now, we will specify the coordinates

as pixel values.

The example below defines a new image which contains a single `chart/scatterplot`

element. The scatterplot element will draw axes and a dot at each coordinate

that is specified in the `data-x` and `data-y` properties. 

Save the file to `example.fvz` and then run it using command line below:

    (chart/scatterplot

        data-x (csv tests/testdata/gauss2d.csv x)

        data-y (csv tests/testdata/gauss2d.csv y)

        limit-x (0 400)

        limit-y (0 200)

        ticks-y (subdivide 5)

        axes (bottom left)

        grid (color #fff)

        background #eee

        border none)

    fviz --in example.fvz --out example.svg

Save the content from above to a file called `example_chart.fvz` and run it

through fviz using the following command:

As the output file, fviz will produce an image with three coloured dots as

displayed below:

    $ fviz --in example_chart.fvz --out example_chart.svg

When running the example locally, you can use your own input CSV file, or you

can download the example CSV file [from here](https://github.com/asmuth/fviz/tree/master/tests/testdata/gauss2d.csv).

If everything works, you should get an output file similar to the one below

(`example_chart.svg`):

<section class="info_box">

  <h2>Example Output</h2>

  <div class="example">

    <img src="/documentation/figures/getting_started1.svg">

  </div>

</section>

[![A simple scatterplot](/examples/charts-basic/scatterplot.svg)](https://fviz.org/examples/charts-basic/scatterplot)

It's not the most exciting example in the world, but it illustrates the general

working principle of fviz and shows you how to run files through it.

You might have noticed that fviz uses a coordinate system where (0, 0) is at

the bottom left corner of the screen and positive values of the y axis extend

upwards. This is different to the usual computer graphics convention, but is

much more natural for creating plots.

### 2) Adding axis labels

To make our example into something that looks more like a normal chart, we need to

draw axis labels. This is accomplished by adding two more element definitions to

the file. This time we will add `axis` elements:

    axis {

      position: left;

    }

    axis {

      position: bottom;

    }

Once we run the file again, we end up with the image below, which already

looks much better. However it still doesn't make a lot of sense, since all axes

go from zero to one and have no relationship to the coloured circles.

<section class="info_box">

  <h2>Example Output</h2>

  <div class="example">

    <img src="/documentation/figures/getting_started2.svg">

  </div>

</section>

### 3) Defining a scale

In the next step, we will use a scale for the plot, i.e. a method of mapping

"naked" numerical values to a position on the screen. What that means is that

instead of specifying the circle positions as pixel values, we will specify

them as "naked" values and let fviz take care of mapping them to screen

positions.

    // before

    xs: 90px, 650px, 420px;

    ys: 180px, 300px, 120px;

    // after

    xs: 10, 15, 20,  30, 40, 50;

    ys: 34, 18, 43, 19, 25, 33;

By default, fviz will automatically fit a `linear` scale so that all coordinates

are inside of the screen. We can use the `scale-x-min` and `scale-x-max` properties

to override the automatic fitting and explicitly set the lower and upper limits of

the axes:

    scale-x-min: 0;

    scale-x-max: 60;

The new example with all modifications is displayed below. It's starting to look

like a proper data plot now!

<section class="info_box">

  <h2>Example Output</h2>

  <div class="example">

    <img src="/documentation/figures/getting_started3.svg">

  </div>

</section>

Below is the full source code for the final example.  You might notice that the

`scale-*` properties are defined at the top of the file and not inside any of the

elements. They still affect the elements below them, since fviz allows elements

to inherit property values from their parents. You can play around with moving

these properties inside one of the `points` or `axis` elements and see how

it changes the result.

    width: 800px;

    height: 400px;

    scale-x-min: 0;

    scale-x-max: 60;

    scale-y-min: 0;

    scale-y-max: 80;

    points {

      xs: 10, 15, 20,  30, 40, 50;

      ys: 34, 18, 43, 19, 25, 33;

      sizes: 3pt;

      colors: #06c;

    }

    axis {

      position: left;

    }

    axis {

      position: bottom;

    }

### 4) Fin

Further reading

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

In the interest of keeping this Getting Started page short and easy to digest,

this is it for now. You have seen all major concepts in fviz -- the rest

this is it for now. You have seen how to create a simple plot using fviz -- the rest

is just adding more elements to your file and fine-tuning the appearance of

individual elements using the properties described in the specification.

or the [Examples](/examples) page. Here are some pointers to pages that might

be interesting to read next:

  - [Adding a legend](/elements/legend)

  - [Loading data from CSV files](/documentation/datasource-csv)

  - [Example Gallery](/examples)

    $ git clone git@github.com:asmuth/fviz.git

    $ cd fviz

    $ cmake .

    $ make

    $ make -j

To install the `fviz` binary into your system, run `make install`: