Skip to content

Instantly share code, notes, and snippets.

@truher

truher/index.html

Created May 3, 2020 22:27
Show Gist options
  • Save truher/18cbcf09a31fc0f1a6a15ecb5a8c10d5 to your computer and use it in GitHub Desktop.
Save truher/18cbcf09a31fc0f1a6a15ecb5a8c10d5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<script src="https://unpkg.com/d3/dist/d3.js"></script>
<script src="https://unpkg.com/d3fc/build/d3fc.js"></script>
<style> #small-multiples > div { height: 250px; } </style>
<d3fc-canvas id='small-multiples'></d3fc-canvas>
<script>
xScale = d3.scaleLinear().domain([-1, 10]);
yScale = d3.scaleLinear().domain([-1, 10]);
series = fc.seriesSvgPoint().crossValue(d => d.x).mainValue(d => d.y);
chart = fc.chartCartesian(xScale, yScale).svgPlotArea(series);
container = document.querySelector('#small-multiples');
d3.select(container)
.on('draw', () => {
Promise.resolve(0).then( (t) => {
d = [ [ {x:1,y:2}, {x:2,y:3}, {x:3,y:4} ],
[ {x:3,y:4}, {x:4,y:5}, {x:5,y:6} ] ];
d3.select('#small-multiples').selectAll('div#instance')
.data(d).join(
enter => enter.append('div').attr('id', 'instance'),
update => update.call(chart)
);
});
});
container.requestRedraw();
setInterval(() => {container.requestRedraw();}, 1000);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment