interpolated-charts
Version:
Configurable d3 v4 charts with interpolation and missing data range
67 lines (63 loc) • 2.41 kB
HTML
<html>
<head>
<title>demo list</title>
<base href="<%= htmlWebpackPlugin.options.baseUrl %>" />
</head>
<body>
<a href="https://github.com/z3ut/interpolated-charts"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="container">
<div class="chart-example">
<div class="description">
<h2>Default settings<h2>
</div>
<div class="default-chart"></div>
<div class="source-code">
<h3>Source code:</h3>
<pre>
const verticalDividerPlugin = verticalDivider();
const markersPlugin = markers();
const tooltipPlugin = tooltip();
const lineChart = line()
.on(chartEvents.chartMouseEnter, (x, y) => {
verticalDividerPlugin.show();
})
.on(chartEvents.chartMouseLeave, (x, y) => {
verticalDividerPlugin.remove();
markersPlugin.remove();
tooltipPlugin.remove();
})
.on(chartEvents.chartMouseMove, (options) => {
verticalDividerPlugin.update(options);
markersPlugin.show(options);
tooltipPlugin.show(options);
});
const chartContainer = d3.select('.default-chart');
chartContainer.datum(lineChartData).call(lineChart);
const metadataContainer = d3.select('.default-chart .metadata-container');
metadataContainer.datum([]).call(verticalDividerPlugin);
metadataContainer.datum([]).call(markersPlugin);
metadataContainer.datum([]).call(tooltipPlugin);
</pre>
</div>
</div>
<div class="chart-example">
<div class="description">
<h2>Custom configuration</h2>
</div>
<div class="configured-chart"></div>
</div>
<div class="chart-example">
<div class="description">
<h2>Bar chart</h2>
</div>
<div class="bar-chart"></div>
</div>
<div class="chart-example">
<div class="description">
<h2>Stack bar multiple value</h2>
</div>
<div class="stack-bar-multiple"></div>
</div>
</div>
</body>
</html>