---
layout: page
---

<script setup>
 import cardImg from '../vue_components/cardImg.vue'
 import multiView from '../vue_components/multiView.vue'
</script>

<multiView>

<div class='container'>
    <h1>Example Gallery</h1>
    <div class='section'>
        <h2>Points</h2>
        <hr>
        <div class="cards">
            <cardImg title="2D Scatter Plot" img="/anu/assets/example-images/scatterplot2D.webp" link="/anu/examples/scatter_plot_2D"></cardImg>
            <cardImg title="3D Scatter Plot"  img="/anu/assets/example-images/scatterplot3D.webp" link="/anu/examples/scatter_plot_3D"></cardImg>
            <cardImg title="Embellished Chart"  img="/anu/assets/example-images/embellishedChart.webp" link="/anu/examples/embellished_chart"></cardImg>
            <cardImg title="Dimensionality Reduction Plot" img="/anu/assets/example-images/dimensionalityReductionPlot.webp" link="/anu/examples/dimensionality_reduction_plot"></cardImg>
            <cardImg title="Vector Field"  img="/anu/assets/example-images/vectorField.webp" link="/anu/examples/vector_field"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Bars</h2>
        <hr>
        <div class="cards">
            <cardImg title="2D Bar Chart" img="/anu/assets/example-images/barchart2D.webp" link="/anu/examples/bar_chart_2D"></cardImg>
            <cardImg title="3D Bar Chart"  img="/anu/assets/example-images/barchart3D.webp" link="/anu/examples/bar_chart_3D"></cardImg>
            <cardImg title="2D Stacked Bar Chart" img="/anu/assets/example-images/barchart2DStacked.webp" link="/anu/examples/bar_chart_2D_stacked"></cardImg>
            <cardImg title="Histogram"  img="/anu/assets/example-images/histogram.webp" link="/anu/examples/histogram"></cardImg>
            <cardImg title="Multiple Histograms"  img="/anu/assets/example-images/histogramMultiple.webp" link="/anu/examples/histogram_multiple"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Lines</h2>
        <hr>
        <div class="cards">
            <cardImg title="2D Line Chart" img="/anu/assets/example-images/linechart2D.webp" link="/anu/examples/line_chart_2D"></cardImg>
            <cardImg title="Linked Scatter Plots" img="/anu/assets/example-images/linkedScatterPlots.webp" link="/anu/examples/linked_scatter_plots"></cardImg>
            <cardImg title="Single 3D Trajectory" img="/anu/assets/example-images/trajectorySingle3D.webp" link="/anu/examples/trajectory_single_3D"></cardImg>
            <cardImg title="Multiple 3D Trajectories" img="/anu/assets/example-images/trajectoryMultiple3D.webp" link="/anu/examples/trajectory_multiple_3D"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Areas and Surfaces</h2>
        <hr>
        <div class="cards">
            <cardImg title="2D Area Chart" img="/anu/assets/example-images/areachart2D.webp" link="/anu/examples/area_chart_2D"></cardImg>
            <cardImg title="2D Stacked Area Chart" img="/anu/assets/example-images/areachartStacked.webp" link="/anu/examples/area_chart_stacked"></cardImg>
            <cardImg title="Pie Chart"  img="/anu/assets/example-images/pieChart.webp" link="/anu/examples/pie_chart"></cardImg>
            <cardImg title="Donut Chart"  img="/anu/assets/example-images/donutChart.webp" link="/anu/examples/donut_chart"></cardImg>
            <cardImg title="Surface Chart"  img="/anu/assets/example-images/surfaceChart.webp" link="/anu/examples/surface_chart"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Geographic</h2>
        <hr>
        <div class="cards">
            <cardImg title="Dot Density Map" img="/anu/assets/example-images/dotDensityMap.webp" link="/anu/examples/dot_density_map"></cardImg>
            <cardImg title="Dot Density Globe" img="/anu/assets/example-images/dotDensityGlobe.webp" link="/anu/examples/dot_density_globe"></cardImg>
            <cardImg title="Choropleth Map" img="/anu/assets/example-images/choroplethMap.webp" link="/anu/examples/choropleth_map"></cardImg>
            <cardImg title="Prism Map" img="/anu/assets/example-images/prismMap.webp" link="/anu/examples/prism_map"></cardImg>
            <cardImg title="3D Trajectory on Map" img="/anu/assets/example-images/trajectoryMap.webp" link="/anu/examples/trajectory_map"></cardImg>
            <cardImg title="Origin-Destination Globe" img="/anu/assets/example-images/originDestinationGlobe.webp" link="/anu/examples/origin_destination_globe"></cardImg>
            <cardImg title="Tilt Map" img="/anu/assets/example-images/tiltMap.webp" link="/anu/examples/tilt_map"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Networks and Hierarchies</h2>
        <hr>
        <div class="cards">
            <cardImg title="Node Link 3D" img="/anu/assets/example-images/nodeLink3D.webp" link="/anu/examples/node_link_3d"></cardImg>
            <cardImg title="Treemap" img="/anu/assets/example-images/treemap.webp" link="/anu/examples/treemap"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Interaction and UI</h2>
        <hr>
        <div class="cards">
            <cardImg title="Pointer Hover" img="/anu/assets/example-images/pointerHover.webp" link="/anu/examples/hover"></cardImg>
            <cardImg title="Details On Demand" img="/anu/assets/example-images/detailsOnDemand.webp" link="/anu/examples/details"></cardImg>
            <cardImg title="Transform Widget UI" img="/anu/assets/example-images/transformWidgetUI.webp" link="/anu/examples/transform_widget_ui"></cardImg>
            <cardImg title="Multiple Interactions" img="/anu/assets/example-images/multipleInteractions.webp" link="/anu/examples/multiple_interactions"></cardImg>
            <cardImg title="Single Selection" img="/anu/assets/example-images/brushingLinkingSingle.webp" link="/anu/examples/brushing_linking_single"></cardImg>
            <cardImg title="Multiple Selection" img="/anu/assets/example-images/brushingLinkingMultiple.webp" link="/anu/examples/brushing_linking_multiple"></cardImg>
            <cardImg title="Filtering Selection" img="/anu/assets/example-images/brushingLinkingFilter.webp" link="/anu/examples/brushing_linking_filter"></cardImg>
            <cardImg title="Layouts" img="/anu/assets/example-images/layout.webp" link="/anu/examples/layout"></cardImg>
            <cardImg title="ImAxes Simplified" img="/anu/assets/example-images/imaxes.webp" link="/anu/examples/imaxes_simplified"></cardImg>
        </div>
    </div>
    <div class='section'>
        <h2>Animation</h2>
        <hr>
        <div class="cards">
            <cardImg title="Basic Animation" img="/anu/assets/example-images/animationBarChart.webp" link="/anu/examples/animation_bar_chart"></cardImg>
            <cardImg title="Data Dimension Change" img="/anu/assets/example-images/animationScatterPlot.webp" link="/anu/examples/animation_scatter_plot"></cardImg>
            <cardImg title="Bar Chart Race" img="/anu/assets/example-images/animationBarChartRace.webp" link="/anu/examples/animation_bar_chart_race"></cardImg>
            <cardImg title="Baseball Pitches" img="/anu/assets/example-images/pitches.webp" link="/anu/examples/pitches"></cardImg>
        </div>
    </div>
</div>

</multiView>


<style>
h1,
h2,
h3,
h4 {
    margin: 0.1rem 0;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
    padding-left: 20px;
}

h3 {
    font-size: 1.2rem;
    padding-left: 40px;
}

h4 {
    font-size: 1rem;
    font-style: italic;
    padding-left: 60px;
}

.container {
    margin-top: 5vh;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vw;
}

.section {
    margin-top: 30px;
}

 .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    margin-top: 10px;
  }
  .cards canvas {
    margin: 5px;
    border: 1px solid #000;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
    width: 10em;
    height: 10em;
  }

 .cards img {
    margin: 5px 10px 5px 5px;
    border: 1px solid #000;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
    width: 12.5em;
    height: 12.5em;
  }

  .cards span {
    font-size: 1em;
    margin-bottom: 10px;
  }


</style>