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

improved examples page

parent cc2af759

README.md

+1 −1
Original line number Diff line number Diff line
@@ -43,7 +43,7 @@ can download the example CSV file [from here](/tests/testdata/gauss2d.csv). 
If everything works, you should get an output file similar to the one below

(`example_chart.svg`):



[![A simple scatterplot](/examples/charts-basic/scatterplot.svg)](./examples/charts-basic/scatterplot.fvz)

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



More examples can be found on [the examples page](https://fviz.org/examples).

For a more detailed introduction to fviz, see the [Getting Started](https://fviz.org/documentation/getting-started) page.

examples/charts-basic/areachart.fvz

+0 −3
Original line number Diff line number Diff line 
(set height 480px)

(set width 1200px)



(chart/combochart

    axes (bottom left)

    axis-y-format (scientific)

examples/charts-basic/areachart.svg

+46 −46
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" width="1200.000000" height="480.000000" viewBox="0 0 1200 480">

  <rect width="1200.000000" height="480.000000" fill="#ffffff"/>

  <path fill="#eeeeee" d="M84.7108 19.5556 L1180.44 19.5556 L1180.44 430.711 L84.7108 430.711 L84.7108 19.5556 "/>

<svg xmlns="http://www.w3.org/2000/svg" width="900.000000" height="480.000000" viewBox="0 0 900 480">

  <rect width="900.000000" height="480.000000" fill="#ffffff"/>

  <path fill="#eeeeee" d="M84.7108 19.5556 L880.444 19.5556 L880.444 430.711 L84.7108 430.711 L84.7108 19.5556 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 19.5556 L84.7108 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M194.284 19.5556 L194.284 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M303.858 19.5556 L303.858 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M413.431 19.5556 L413.431 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M523.004 19.5556 L523.004 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M632.578 19.5556 L632.578 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M742.151 19.5556 L742.151 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M851.724 19.5556 L851.724 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M961.298 19.5556 L961.298 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M1070.87 19.5556 L1070.87 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M1180.44 19.5556 L1180.44 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 430.711 L1180.44 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 389.596 L1180.44 389.596 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 348.48 L1180.44 348.48 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 307.364 L1180.44 307.364 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 266.249 L1180.44 266.249 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 225.133 L1180.44 225.133 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 184.018 L1180.44 184.018 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 142.902 L1180.44 142.902 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 101.787 L1180.44 101.787 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 60.6711 L1180.44 60.6711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 19.5556 L1180.44 19.5556 "/>

  <path fill="#888888" d="M84.7108 19.5556 L97.7552 107.114 L113.042 161.035 L128.328 156.724 L143.615 200.264 L158.901 227.698 L174.188 245.987 L189.474 257.192 L204.76 285.875 L220.047 234.991 L235.333 251.011 L250.62 300.12 L265.906 237.397 L281.193 245.056 L296.479 293.513 L311.766 286.976 L327.052 319.292 L342.339 341.413 L357.625 375.191 L372.912 387.727 L388.198 405.183 L403.484 269.319 L418.771 168.056 L434.057 140.639 L449.344 164.866 L464.63 220.868 L479.917 298.518 L495.203 292.334 L510.49 339.212 L525.776 355.058 L541.063 377.338 L556.349 357.141 L571.636 381.779 L586.922 334.569 L602.208 295.945 L617.495 376.258 L632.781 386.472 L648.068 399.341 L663.354 430.711 L678.641 365.67 L693.927 336.998 L709.214 339.993 L724.5 355.88 L739.787 313.253 L755.073 380.068 L770.36 334.709 L785.646 316.28 L800.933 318.302 L816.219 342.629 L831.505 292.465 L846.792 284.172 L862.078 251.736 L877.365 292.431 L892.651 333.299 L907.938 365.732 L923.224 303.249 L938.511 332.675 L953.797 326.385 L969.084 382.33 L984.37 398.451 L999.657 381.339 L1014.94 394.327 L1030.23 380.969 L1045.52 358.762 L1060.8 366.009 L1076.09 351.244 L1091.38 328.971 L1106.66 341.325 L1121.95 361.442 L1137.23 288.295 L1152.52 278.505 L1167.81 238.808 L1180.44 242.922 L1180.44 430.711 L1167.81 430.711 L1152.52 430.711 L1137.23 430.711 L1121.95 430.711 L1106.66 430.711 L1091.38 430.711 L1076.09 430.711 L1060.8 430.711 L1045.52 430.711 L1030.23 430.711 L1014.94 430.711 L999.657 430.711 L984.37 430.711 L969.084 430.711 L953.797 430.711 L938.511 430.711 L923.224 430.711 L907.938 430.711 L892.651 430.711 L877.365 430.711 L862.078 430.711 L846.792 430.711 L831.505 430.711 L816.219 430.711 L800.933 430.711 L785.646 430.711 L770.36 430.711 L755.073 430.711 L739.787 430.711 L724.5 430.711 L709.214 430.711 L693.927 430.711 L678.641 430.711 L663.354 430.711 L648.068 430.711 L632.781 430.711 L617.495 430.711 L602.208 430.711 L586.922 430.711 L571.636 430.711 L556.349 430.711 L541.063 430.711 L525.776 430.711 L510.49 430.711 L495.203 430.711 L479.917 430.711 L464.63 430.711 L449.344 430.711 L434.057 430.711 L418.771 430.711 L403.484 430.711 L388.198 430.711 L372.912 430.711 L357.625 430.711 L342.339 430.711 L327.052 430.711 L311.766 430.711 L296.479 430.711 L281.193 430.711 L265.906 430.711 L250.62 430.711 L235.333 430.711 L220.047 430.711 L204.76 430.711 L189.474 430.711 L174.188 430.711 L158.901 430.711 L143.615 430.711 L128.328 430.711 L113.042 430.711 L97.7552 430.711 L84.7108 430.711 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M84.7108 430.711 L1180.44 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M164.284 19.5556 L164.284 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M243.858 19.5556 L243.858 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M323.431 19.5556 L323.431 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M403.004 19.5556 L403.004 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M482.578 19.5556 L482.578 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M562.151 19.5556 L562.151 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M641.724 19.5556 L641.724 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M721.298 19.5556 L721.298 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M800.871 19.5556 L800.871 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M880.444 19.5556 L880.444 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 430.711 L880.444 430.711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 389.596 L880.444 389.596 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 348.48 L880.444 348.48 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 307.364 L880.444 307.364 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 266.249 L880.444 266.249 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 225.133 L880.444 225.133 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 184.018 L880.444 184.018 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 142.902 L880.444 142.902 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 101.787 L880.444 101.787 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 60.6711 L880.444 60.6711 "/>

  <path stroke-width="1.000000" stroke="#ffffff" fill="none" d="M84.7108 19.5556 L880.444 19.5556 "/>

  <path fill="#888888" d="M84.7108 19.5556 L94.1838 107.114 L105.285 161.035 L116.386 156.724 L127.487 200.264 L138.589 227.698 L149.69 245.987 L160.791 257.192 L171.892 285.875 L182.993 234.991 L194.095 251.011 L205.196 300.12 L216.297 237.397 L227.398 245.056 L238.499 293.513 L249.601 286.976 L260.702 319.292 L271.803 341.413 L282.904 375.191 L294.005 387.727 L305.106 405.183 L316.208 269.319 L327.309 168.056 L338.41 140.639 L349.511 164.866 L360.612 220.868 L371.714 298.518 L382.815 292.334 L393.916 339.212 L405.017 355.058 L416.118 377.338 L427.22 357.141 L438.321 381.779 L449.422 334.569 L460.523 295.945 L471.624 376.258 L482.726 386.472 L493.827 399.341 L504.928 430.711 L516.029 365.67 L527.13 336.998 L538.232 339.993 L549.333 355.88 L560.434 313.253 L571.535 380.068 L582.636 334.709 L593.738 316.28 L604.839 318.302 L615.94 342.629 L627.041 292.465 L638.142 284.172 L649.244 251.736 L660.345 292.431 L671.446 333.299 L682.547 365.732 L693.648 303.249 L704.75 332.675 L715.851 326.385 L726.952 382.33 L738.053 398.451 L749.154 381.339 L760.256 394.327 L771.357 380.969 L782.458 358.762 L793.559 366.009 L804.66 351.244 L815.761 328.971 L826.863 341.325 L837.964 361.442 L849.065 288.295 L860.166 278.505 L871.267 238.808 L880.444 242.922 L880.444 430.711 L871.267 430.711 L860.166 430.711 L849.065 430.711 L837.964 430.711 L826.863 430.711 L815.761 430.711 L804.66 430.711 L793.559 430.711 L782.458 430.711 L771.357 430.711 L760.256 430.711 L749.154 430.711 L738.053 430.711 L726.952 430.711 L715.851 430.711 L704.75 430.711 L693.648 430.711 L682.547 430.711 L671.446 430.711 L660.345 430.711 L649.244 430.711 L638.142 430.711 L627.041 430.711 L615.94 430.711 L604.839 430.711 L593.738 430.711 L582.636 430.711 L571.535 430.711 L560.434 430.711 L549.333 430.711 L538.232 430.711 L527.13 430.711 L516.029 430.711 L504.928 430.711 L493.827 430.711 L482.726 430.711 L471.624 430.711 L460.523 430.711 L449.422 430.711 L438.321 430.711 L427.22 430.711 L416.118 430.711 L405.017 430.711 L393.916 430.711 L382.815 430.711 L371.714 430.711 L360.612 430.711 L349.511 430.711 L338.41 430.711 L327.309 430.711 L316.208 430.711 L305.106 430.711 L294.005 430.711 L282.904 430.711 L271.803 430.711 L260.702 430.711 L249.601 430.711 L238.499 430.711 L227.398 430.711 L216.297 430.711 L205.196 430.711 L194.095 430.711 L182.993 430.711 L171.892 430.711 L160.791 430.711 L149.69 430.711 L138.589 430.711 L127.487 430.711 L116.386 430.711 L105.285 430.711 L94.1838 430.711 L84.7108 430.711 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M84.7108 430.711 L880.444 430.711 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M84.7108 430.711 L84.7108 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M194.284 430.711 L194.284 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M303.858 430.711 L303.858 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M413.431 430.711 L413.431 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M523.004 430.711 L523.004 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M632.578 430.711 L632.578 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M742.151 430.711 L742.151 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M851.724 430.711 L851.724 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M961.298 430.711 L961.298 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M1070.87 430.711 L1070.87 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M1180.44 430.711 L1180.44 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M164.284 430.711 L164.284 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M243.858 430.711 L243.858 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M323.431 430.711 L323.431 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M403.004 430.711 L403.004 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M482.578 430.711 L482.578 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M562.151 430.711 L562.151 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M641.724 430.711 L641.724 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M721.298 430.711 L721.298 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M800.871 430.711 L800.871 425.378 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M880.444 430.711 L880.444 425.378 "/>

  <text x="56.163889" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">05:15:44</text>

  <text x="165.737259" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">05:51:34</text>

  <text x="275.310628" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">06:27:24</text>

  <text x="384.884006" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">07:03:15</text>

  <text x="494.457368" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">07:39:05</text>

  <text x="604.030729" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">08:14:56</text>

  <text x="713.604123" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">08:50:46</text>

  <text x="823.177452" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">09:26:36</text>

  <text x="932.750846" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">10:02:27</text>

  <text x="1042.324241" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">10:38:17</text>

  <text x="1152.444444" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">11:14:08</text>

  <text x="135.737258" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">05:51:34</text>

  <text x="215.310627" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">06:27:24</text>

  <text x="294.884003" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">07:03:15</text>

  <text x="374.457366" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">07:39:05</text>

  <text x="454.030729" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">08:14:56</text>

  <text x="533.604116" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">08:50:46</text>

  <text x="613.177456" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">09:26:36</text>

  <text x="692.750843" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">10:02:27</text>

  <text x="772.324230" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">10:38:17</text>

  <text x="852.444444" y="456.444444" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">11:14:08</text>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M84.7108 19.5556 L84.7108 430.711 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M84.7108 430.711 L90.0441 430.711 "/>

  <path stroke-width="0.000000" stroke="#333333" fill="none" d="M84.7108 389.596 L90.0441 389.596 "/>

examples/charts-basic/areas_vertical.fvz

+3 −3
Original line number Diff line number Diff line 
(set width 600px)

(set height 900px)

(set width 800px)

(set height 600px)



(chart/combochart

    axes (left bottom)
@@ -9,4 +9,4 @@ 
        data-x (csv "tests/testdata/measurement.csv" value2)

        data-y (csv "tests/testdata/measurement.csv" time)

        direction horizontal

        color (#ccc)))
 
        color (#999)))

examples/charts-basic/areas_vertical.svg

+47 −47

File changed.

Preview size limit exceeded, changes collapsed.

CRA Git | Maintained and supported by SUSTech CRA and CCSE