Branding & Style Guide

3 dataviz Dataviz

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

Source: styles.scss, line 23
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: base/_dataviz.scss, line 1