Commit 82b53a66 authored by Paul Asmuth's avatar Paul Asmuth
Browse files

add documentation on colors and color maps

parent efdd5c35
Loading
Loading
Loading
Loading
+46 −0
Original line number Diff line number Diff line
Color Maps
==========

The `<color-map>` setting allows you to map input data to colors. These are the
currently implemented mapping methods:

  - `discrete` -- Read integer values from the input file and map them to a discrete color palette
  - `linear` -- Read numeric values from the input file and linearly map them to a color gradient
  - `raw` -- Parse colors in hex format from the input file

#### Syntax:

    ;; a discrete color map
    (discrete (<color>...) <data-ref>)

    ;; a discrete color map using a default palette
    (discrete <color-palette-name> <data-ref>)

    ;; a linear color map
    (linear (<color> <color>) <data-ref>)

    ;; a linear "default" color map
    (linear <color-map-name> <data-ref>)

    ;; a "raw" color map
    (raw <data-ref>)


#### Examples:

    ;; map the values of 'mycolorcolumn' to {red, green, blue}.
    ;; values in 'mycolorcolumn' should be in the set {1, 2, 3}
    (discrete (#f00 #0f0 #00f) (csv "myfile.csv" "mycolorcolumn"))

    ;; map the values of 'mycolorcolumn' to [red..blue].
    ;; values in 'mycolorcolumn' should be in [0..1]
    (linear #f00 #00f (csv "myfile.csv" "mycolorcolumn"))

    ;; read hex color codes from 'mycolorcolumn'
    ;; values in 'mycolorcolumn' should be hex color codes (e.g. "#f00")
    (raw (csv "myfile.csv" "mycolorcolumn"))


List of built-in color maps
---------------------------
+56 −0
Original line number Diff line number Diff line
Colors
======

The `<color>` setting allows you to configure colors. The following ways to
specify colors are supported:

    ;; specify a color by hex code or reference a color from the color palette
    <color-code>

    ;; specify a color by rgb. components should be in the range 0..1
    (rgb <r> <g> <b>)

    ;; specify a color by rgba. components should be in the range 0..1
    (rgba <r> <g> <b> <a>)


#### Examples:

    ;; set the color to green
    color #f00

    ;; set the color to green
    color #ff0000

    ;; set the color to green, 50% alpha
    color #ff000080

    ;; set the color to red
    color (rgb 1.0 0.0 0.0)

    ;; set the color to red, 50% alpha
    color (rgba 1.0 0.0 0.0 0.5)

    ;; usage color number '3' from the color palette
    color 3


Color Palettes
--------------

The color palette allows you to easily reference colors that are frequently used
in the chart. Colors from the color palette are referenced by one-base index
(see above).

You can use one of the built-in color palettes (see below) or define your own
color palette using the `set` directive:

    (set color-palette (<color>...))

For example:

    (set color-palette (#06c #c06 #60c))


List of default color palettes
-------------------------------
+34 −37
Original line number Diff line number Diff line
@@ -35,9 +35,6 @@ documentation:
          title: "Example Gallery"
          url: "/examples"
  #    -
  #  title: "Building Charts"
  #  pages:
  #    -
  #      title: "Linecharts"
  #      url: "/documentation/plot-lines"
  #      file: "plot_lines"
@@ -58,14 +55,26 @@ documentation:
    title: "Reference"
    sections:
      - pages:
  #    #-
  #    #  title: "Data Sources"
  #    #  url: "/documentation/data_sources"
  #    #  file: "data_sources"
  #    #-
  #    #  title: "Values & Units"
  #    #  url: "/documentation/units"
  #    #  file: "units"
      #-
      #  title: "Data Sources"
      #  url: "/documentation/data_sources"
      #  file: "data_sources"
      #-
      #  title: "Syntax"
      #  url: "/documentation/syntax"
      #  file: "data_sources"
      #-
      #  title: "Values & Units"
      #  url: "/documentation/units"
      #  file: "units"
        -
          title: "Colors"
          url: "/documentation/colors"
          file: "reference/colors"
        -
          title: "Color Maps"
          url: "/documentation/color-maps"
          file: "reference/color_maps"
        -
          title: "Scale Types"
          url: "/documentation/scale-types"
@@ -86,38 +95,16 @@ documentation:
          title: "Fonts"
          url: "/documentation/fonts"
          file: "reference/fonts"
  #    #-
  #    #  title: "Colours"
  #    #  url: "/documentation/color-palette"
  #    #  file: "color_palette"
  #    #-
  #    #  title: "Line Styles"
  #    #  url: "/documentation/line-styles"
  #    #  file: "line_styles"
  #    #-
  #    #  title: "Point Styles"
  #    #  url: "/documentation/point-styles"
  #    #  file: "point_styles"
  #    #-
  #    #  title: "Layout"
  #    #  url: "/documentation/layout"
  #    #  file: "layout"
      #-
      #  title: "Stroke & Fill Styles"
      #  url: "/documentation/line-styles"
      #  file: "line_styles"

  -
    title: "Elements"
    url: "/documentation/elements"
    file: "elements"
    sections:
      - section_title: "Standard Charts"
        pages:
        -
          title: "chart/linechart"
          url: "/documentation/elements/chart/linechart"
          api_ref: true
        -
          title: "chart/scatterplot"
          url: "/documentation/elements/chart/scatterplot"
          api_ref: true
      -
        section_title: "Custom Plots"
        pages:
@@ -164,6 +151,16 @@ documentation:
            title: "legend/item"
            url: "/documentation/elements/legend/item"
            api_ref: true
      - section_title: "Standard Charts"
        pages:
        -
          title: "chart/linechart"
          url: "/documentation/elements/chart/linechart"
          api_ref: true
        -
          title: "chart/scatterplot"
          url: "/documentation/elements/chart/scatterplot"
          api_ref: true

  -
    title: "Community"