d3slideshow.js is a package in charge of generating data visualisation slideshows. A created slideshow includes a description column on the left-hand side and a visualisation canvas on the right-hand side. The SVG canvas can be dynamically updated as the description scrolled.
d3slideshow.js recognises markdown language for parsing contexts, and the framework fits the lifecycle of d3.js which renders high-quality data visualisation.
- d3.js
- vue.js
- marked.js
- scroller (see http://vallandingham.me/scroller.html)
Download and load the module and its stylesheet
<script src="d3slideshow.js"></script>
<link rel="stylesheet" type="text/css" href="d3slideshow.css" />
<div id="example"></div>
const show = d3slideshow.create("#example", "This is an example of d3slideshow")
.layout("YXratio", 0.8)
.layout("Prop", 0.3);
- YXratio height/width of the visualisation canvas; default: 0.8
- Prop proportion of the description column; default: 0.3
show.appendFigure("FigureA") // the name of figure is required
.event("init", function() {
// code for initialise a graph
// please add svg elements to this.g
})
show.appendSlide()
.text("Chapter", 'Chapter A')
.text("Section", 'Section A')
.text("Context", ' some context with mark down ')
.event("activate", function(figs) {})
.event("update", function(figs, progress) {});
activate is called when the slide is on the current page. figs is a dictionary of figures with keys of their names.
update is called when scrolling. progress is a number ranged from 0 to 1.
Show and fetch the indicated figure and hide all the others
d3slideshow.highlight(figs, "FigureA") # in <b>activate</b>
See https://github.com/TimeWz667/d3slideshow-example and demo
This project is licensed under the MIT License - see the LICENSE file for details