Commit f74d723f authored by Paul Asmuth's avatar Paul Asmuth
Browse files

add more examples to readme

parent 6e86803b

README.md

+68 −0
Original line number Diff line number Diff line
@@ -67,6 +67,10 @@ To run the test suite, run `make test`: 
    $ make test





For detailed installation instructions, have a look at the [Installation](https://fviz.org/documentation/installation/)

page.





Acknowledgements

----------------
@@ -76,6 +80,70 @@ ggplot2 project. 
[0] Wilkinson, L. (1999). The Grammar of Graphics (Springer)





Example Gallery

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



Below are more examples to show you what's possible. Each examples links to the

source code that generated it. Even more examples can be found on the

[Examples](https://fviz.org/examples) page.





---



#### Example: [`charts-basic/linechart_timeseries`](https://fviz.org/examples/charts-basic/linechart_timeseries)

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



---



#### Example: [`charts-basic/barchart_groups`](https://fviz.org/examples/charts-basic/barchart_groups)

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



---



#### Example: [`charts-basic/scatterplot_with_labels`](https://fviz.org/examples/charts-basic/scatterplot_with_labels)

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



---



#### Example: [`charts-basic/linechart_with_labels`](https://fviz.org/examples/charts-basic/linechart_with_labels)

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



---



#### Example: [`charts-basic/chart_i18n`](https://fviz.org/examples/charts-basic/chart_i18n)

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



---



#### Example: [`charts-basic/barchart_horizontal`](https://fviz.org/examples/charts-basic/barchart_horizontal)

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



---



#### Example: [`charts-basic/barchart_with_labels`](https://fviz.org/examples/charts-basic/barchart_with_labels)

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



---



#### Example: [`charts-custom/multiple_y_axes`](https://fviz.org/examples/charts-custom/multiple_y_axes)

[![multiple_y_axes.svg](/examples/charts-custom/multiple_y_axes.svg)](https://fviz.org/examples/charts-custom/multiple_y_axes)



--



#### Example: [`charts-basic/scatterplot_colors`](https://fviz.org/examples/charts-basic/scatterplot_colors)

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



--



#### Example: [`charts-basic/barchart_ranges`](https://fviz.org/examples/charts-basic/barchart_ranges)

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



---



#### Example: [`charts-custom/custom_font`](https://fviz.org/examples/charts-custom/custom_font)

[![custom_font.svg](/examples/charts-custom/custom_font.svg)](https://fviz.org/examples/charts-custom/custom_font)





License

-------

examples/charts-basic/barchart_with_labels.fvz

+2 −2
Original line number Diff line number Diff line
@@ -13,8 +13,8 @@ 
      data-y (csv "tests/testdata/city_temperatures_london.csv" temperature)

      labels (csv "tests/testdata/city_temperatures_london.csv" temperature_str)

      bar-width (2em)

      color 5)

      color 2)

    legend-overlay (

      position (top left)

      border none

      item (label "London - Average Monthly Temperature" color 5)))
 
      item (label "London - Average Monthly Temperature" color 2)))

examples/charts-basic/barchart_with_labels.svg

+13 −13
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" width="960.000000" height="280.000000" viewBox="0 0 960 280">

  <rect width="960.000000" height="280.000000" fill="#ffffff"/>

  <path fill="#80699b" d="M71.5897 235.6 L71.5897 198.137 L100.923 198.137 L100.923 235.6 "/>

  <path fill="#80699b" d="M143.179 235.6 L143.179 195.256 L172.513 195.256 L172.513 235.6 "/>

  <path fill="#80699b" d="M214.769 235.6 L214.769 180.847 L244.103 180.847 L244.103 235.6 "/>

  <path fill="#80699b" d="M286.359 235.6 L286.359 153.951 L315.692 153.951 L315.692 235.6 "/>

  <path fill="#80699b" d="M357.949 235.6 L357.949 121.291 L387.282 121.291 L387.282 235.6 "/>

  <path fill="#80699b" d="M429.538 235.6 L429.538 89.5919 L458.872 89.5919 L458.872 235.6 "/>

  <path fill="#80699b" d="M501.128 235.6 L501.128 72.3014 L530.462 72.3014 L530.462 235.6 "/>

  <path fill="#80699b" d="M572.718 235.6 L572.718 76.1438 L602.051 76.1438 L602.051 235.6 "/>

  <path fill="#80699b" d="M644.308 235.6 L644.308 99.1977 L673.641 99.1977 L673.641 235.6 "/>

  <path fill="#80699b" d="M715.897 235.6 L715.897 136.66 L745.231 136.66 L745.231 235.6 "/>

  <path fill="#80699b" d="M787.487 235.6 L787.487 172.202 L816.821 172.202 L816.821 235.6 "/>

  <path fill="#80699b" d="M859.077 235.6 L859.077 189.492 L888.41 189.492 L888.41 235.6 "/>

  <path fill="#aa4643" d="M71.5897 235.6 L71.5897 198.137 L100.923 198.137 L100.923 235.6 "/>

  <path fill="#aa4643" d="M143.179 235.6 L143.179 195.256 L172.513 195.256 L172.513 235.6 "/>

  <path fill="#aa4643" d="M214.769 235.6 L214.769 180.847 L244.103 180.847 L244.103 235.6 "/>

  <path fill="#aa4643" d="M286.359 235.6 L286.359 153.951 L315.692 153.951 L315.692 235.6 "/>

  <path fill="#aa4643" d="M357.949 235.6 L357.949 121.291 L387.282 121.291 L387.282 235.6 "/>

  <path fill="#aa4643" d="M429.538 235.6 L429.538 89.5919 L458.872 89.5919 L458.872 235.6 "/>

  <path fill="#aa4643" d="M501.128 235.6 L501.128 72.3014 L530.462 72.3014 L530.462 235.6 "/>

  <path fill="#aa4643" d="M572.718 235.6 L572.718 76.1438 L602.051 76.1438 L602.051 235.6 "/>

  <path fill="#aa4643" d="M644.308 235.6 L644.308 99.1977 L673.641 99.1977 L673.641 235.6 "/>

  <path fill="#aa4643" d="M715.897 235.6 L715.897 136.66 L745.231 136.66 L745.231 235.6 "/>

  <path fill="#aa4643" d="M787.487 235.6 L787.487 172.202 L816.821 172.202 L816.821 235.6 "/>

  <path fill="#aa4643" d="M859.077 235.6 L859.077 189.492 L888.41 189.492 L888.41 235.6 "/>

  <text x="67.826723" y="185.337391" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">3.9°C</text>

  <text x="139.416466" y="182.455652" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">4.2°C</text>

  <text x="211.006210" y="168.046957" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">5.7°C</text>
@@ -25,7 +25,7 @@ 
  <text x="783.724159" y="159.401739" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">6.6°C</text>

  <text x="855.313902" y="176.692174" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">4.8°C</text>

  <text x="60.133333" y="55.066667" fill="#000000" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif" font-weight="500.000000">London - Average Monthly Temperature</text>

  <path fill="#80699b" d="M51.7 50.0667 M40.7 50.0667 a5.5 5.5 0 1 0 11 0 a5.5 5.5 0 1 0 -11 0 "/>

  <path fill="#aa4643" d="M51.7 50.0667 M40.7 50.0667 a5.5 5.5 0 1 0 11 0 a5.5 5.5 0 1 0 -11 0 "/>

  <path stroke-width="1.333333" stroke="#000000" fill="none" d="M14.6667 235.6 L945.333 235.6 "/>

  <path stroke-width="1.333333" stroke="#000000" fill="none" d="M86.2564 230.267 L86.2564 235.6 "/>

  <path stroke-width="1.333333" stroke="#000000" fill="none" d="M157.846 230.267 L157.846 235.6 "/>

tests/spec/examples_charts_basic_barchart_with_labels.fvz

+2 −2
Original line number Diff line number Diff line
@@ -13,8 +13,8 @@ 
      data-y (csv "tests/testdata/city_temperatures_london.csv" temperature)

      labels (csv "tests/testdata/city_temperatures_london.csv" temperature_str)

      bar-width (2em)

      color 5)

      color 2)

    legend-overlay (

      position (top left)

      border none

      item (label "London - Average Monthly Temperature" color 5)))
 
      item (label "London - Average Monthly Temperature" color 2)))

tests/spec/examples_charts_basic_barchart_with_labels.svg

+13 −13
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" width="960.000000" height="280.000000" viewBox="0 0 960 280">

  <rect width="960.000000" height="280.000000" fill="#ffffff"/>

  <path fill="#80699b" d="M71.5897 235.6 L71.5897 198.137 L100.923 198.137 L100.923 235.6 "/>

  <path fill="#80699b" d="M143.179 235.6 L143.179 195.256 L172.513 195.256 L172.513 235.6 "/>

  <path fill="#80699b" d="M214.769 235.6 L214.769 180.847 L244.103 180.847 L244.103 235.6 "/>

  <path fill="#80699b" d="M286.359 235.6 L286.359 153.951 L315.692 153.951 L315.692 235.6 "/>

  <path fill="#80699b" d="M357.949 235.6 L357.949 121.291 L387.282 121.291 L387.282 235.6 "/>

  <path fill="#80699b" d="M429.538 235.6 L429.538 89.5919 L458.872 89.5919 L458.872 235.6 "/>

  <path fill="#80699b" d="M501.128 235.6 L501.128 72.3014 L530.462 72.3014 L530.462 235.6 "/>

  <path fill="#80699b" d="M572.718 235.6 L572.718 76.1438 L602.051 76.1438 L602.051 235.6 "/>

  <path fill="#80699b" d="M644.308 235.6 L644.308 99.1977 L673.641 99.1977 L673.641 235.6 "/>

  <path fill="#80699b" d="M715.897 235.6 L715.897 136.66 L745.231 136.66 L745.231 235.6 "/>

  <path fill="#80699b" d="M787.487 235.6 L787.487 172.202 L816.821 172.202 L816.821 235.6 "/>

  <path fill="#80699b" d="M859.077 235.6 L859.077 189.492 L888.41 189.492 L888.41 235.6 "/>

  <path fill="#aa4643" d="M71.5897 235.6 L71.5897 198.137 L100.923 198.137 L100.923 235.6 "/>

  <path fill="#aa4643" d="M143.179 235.6 L143.179 195.256 L172.513 195.256 L172.513 235.6 "/>

  <path fill="#aa4643" d="M214.769 235.6 L214.769 180.847 L244.103 180.847 L244.103 235.6 "/>

  <path fill="#aa4643" d="M286.359 235.6 L286.359 153.951 L315.692 153.951 L315.692 235.6 "/>

  <path fill="#aa4643" d="M357.949 235.6 L357.949 121.291 L387.282 121.291 L387.282 235.6 "/>

  <path fill="#aa4643" d="M429.538 235.6 L429.538 89.5919 L458.872 89.5919 L458.872 235.6 "/>

  <path fill="#aa4643" d="M501.128 235.6 L501.128 72.3014 L530.462 72.3014 L530.462 235.6 "/>

  <path fill="#aa4643" d="M572.718 235.6 L572.718 76.1438 L602.051 76.1438 L602.051 235.6 "/>

  <path fill="#aa4643" d="M644.308 235.6 L644.308 99.1977 L673.641 99.1977 L673.641 235.6 "/>

  <path fill="#aa4643" d="M715.897 235.6 L715.897 136.66 L745.231 136.66 L745.231 235.6 "/>

  <path fill="#aa4643" d="M787.487 235.6 L787.487 172.202 L816.821 172.202 L816.821 235.6 "/>

  <path fill="#aa4643" d="M859.077 235.6 L859.077 189.492 L888.41 189.492 L888.41 235.6 "/>

  <path fill="#000000" d="M0.625 -3 L1.95312 -3 C2.1875 -1.9375 3.26562 -1 4.04688 -1 C4.98438 -1 6.26562 -2.23438 6.26562 -3.14062 C6.26562 -4.01562 5.07812 -5.15625 4.15625 -5.15625 Q3.78125 -5.15625 3.23438 -5 L3.375 -6 Q3.51562 -5.98438 3.59375 -5.98438 C4.4375 -5.98438 5.78125 -7 5.78125 -8.0625 C5.78125 -8.89062 4.79688 -10 4.01562 -10 C3.25 -10 2.21875 -9 2.07812 -8 L0.765625 -8 C1 -9.42188 2.71875 -11 4 -11 C4.875 -11 6.35938 -10.1875 7.14062 -8.78125 L7.14062 -7.98438 C7.14062 -7.23438 6.39062 -6 5.65625 -5.64062 C6.60938 -5.4375 7.65625 -4.14062 7.65625 -3.15625 C7.65625 -1.84375 5.60938 0 4.03125 0 C2.625 0 0.75 -1.67188 0.625 -3 " transform="translate(67.8267 185.337)"/>

  <path fill="#000000" d="M1.35938 0 L1.35938 -1 L2.85938 -1 L2.85938 0 L1.35938 0 " transform="translate(75.983 185.337)"/>

  <path fill="#000000" d="M0.828125 -3 L2.09375 -3 C2.25 -1.95312 3.15625 -1 3.875 -1 C4.46875 -1 5.39062 -1.60938 5.96875 -2.625 Q6.375 -4.32812 6.375 -5.15625 Q6.375 -5.23438 6.35938 -5.40625 C5.96875 -4.78125 4.59375 -4 3.79688 -4 C2.46875 -4 0.625 -5.89062 0.625 -7.45312 C0.625 -9.04688 2.54688 -11 4 -11 C5.04688 -11 6.78125 -9.875 7.6875 -7.78125 L7.6875 -5.79688 C7.6875 -3.71875 6.79688 -1.28125 5.03125 0 L3.84375 0 C2.57812 0 0.984375 -1.57812 0.828125 -3 M6.21875 -7.46875 C6.21875 -8.64062 5.01562 -10 4.15625 -10 C3.28125 -10 1.98438 -8.53125 1.98438 -7.35938 C1.98438 -6.3125 3.21875 -5 4.125 -5 C5.04688 -5 6.21875 -6.3125 6.21875 -7.46875 " transform="translate(80.0611 185.337)"/>
@@ -114,7 +114,7 @@ 
  <path fill="#000000" d="M6.09375 0 L6.09375 -1.1875 Q5.1875 0 3.625 0 C2.92188 0 1.73438 -0.53125 1.15625 -1.32812 L1.03125 -1.92188 Q0.953125 -2.3125 0.953125 -3.15625 L0.953125 -8 L2.28125 -8 L2.28125 -3.57812 Q2.28125 -2.51562 2.35938 -2.14062 C2.48438 -1.60938 3.29688 -1 3.89062 -1 C4.46875 -1 5.51562 -1.625 5.95312 -2.70312 L5.95312 -3.71875 L5.95312 -8 L7.26562 -8 L7.26562 0 L6.09375 0 " transform="translate(296.102 55.0667)"/>

  <path fill="#000000" d="M0.96875 0 L0.96875 -8 L2.15625 -8 L2.15625 -7 C2.60938 -7.60938 3.375 -8 3.84375 -8 Q4.51562 -8 5.20312 -7.79688 L4.75 -6.57812 Q4.26562 -7 3.78125 -7 C3.34375 -7 2.65625 -6.45312 2.51562 -5.96875 Q2.29688 -5.21875 2.29688 -4.32812 L2.29688 0 L0.96875 0 " transform="translate(304.258 55.0667)"/>

  <path fill="#000000" d="M6.3125 -2 L7.67188 -2 C7.34375 -1.04688 5.60938 0 4.25 0 C2.54688 0 0.546875 -2.0625 0.546875 -3.9375 C0.546875 -5.85938 2.5625 -8 4.1875 -8 C5.73438 -8 7.71875 -6.0625 7.71875 -4.3125 Q7.71875 -4.21875 7.71875 -4 L1.90625 -4 C1.98438 -2.54688 3.28125 -1 4.26562 -1 C4.98438 -1 6.01562 -1.48438 6.3125 -2 M1.98438 -5 L6.32812 -5 Q6.23438 -5.875 5.82812 -6.3125 Q5.20312 -7 4.20312 -7 C3.28125 -7 2.04688 -5.90625 1.98438 -5 " transform="translate(309.149 55.0667)"/>

  <path fill="#80699b" d="M51.7 50.0667 M40.7 50.0667 a5.5 5.5 0 1 0 11 0 a5.5 5.5 0 1 0 -11 0 "/>

  <path fill="#aa4643" d="M51.7 50.0667 M40.7 50.0667 a5.5 5.5 0 1 0 11 0 a5.5 5.5 0 1 0 -11 0 "/>

  <path stroke-width="1.333333" stroke="#000000" fill="none" d="M14.6667 235.6 L945.333 235.6 "/>

  <path stroke-width="1.333333" stroke="#000000" fill="none" d="M86.2564 230.267 L86.2564 235.6 "/>

  <path stroke-width="1.333333" stroke="#000000" fill="none" d="M157.846 230.267 L157.846 235.6 "/>

CRA Git | Maintained and supported by SUSTech CRA and CCSE