3 dataviz Dataviz

Standard charting elements, using the D3.js library. For custom visualizations, bespoke code will be utilized.

Source: sass/styles.scss, line 23

3.1 dataviz.common Charts

Standard charting elements.

Example

Grouped Bar Chart

Grouped Area Chart

Donut Chart—Single Variable

Scatter Chart—Single Variable

Grouped Line Chart

Markup: base/dataviz.twig

<!-- Dataviz.twig -->
<h2>Grouped Bar Chart</h2>
<div id="chart_bar" class="charts"></div>
<h2>Grouped Area Chart</h2>
<div id="chart_area" class="charts"></div>
<h2>Donut Chart—Single Variable</h2>
<div id="chart_donut" class="charts"></div>
<h2>Scatter Chart—Single Variable</h2>
<div id="chart_scatter" class="charts"></div>
<h2>Grouped Line Chart</h2>
<div id="chart_line" class="charts"></div>

<script src="/themes/custom/kk_theme/js/charts/chart.js"></script>

Source: sass/base/_dataviz.scss, line 1