Can I display D3 graphs on .epub?
Question
I'm making a research project about.epub and I've been trying to hack my way into executing JS code into an EPUB and display some kind of data visualization.
Right now, I'm using calibre to create the epub from an HTML file. The HTML file has the code for very simple D3 scatterplots, and it works fine when opening the file from the browser. However, after creating the.epub in calibre, the page is just empty. Do you guys know if this is even possible? I know that EPUB 3 should be somewhat similar to a modern browser, so theoretically anything that can be rendered into a browser should also be possible on a.epub. Is it because I am loading d3.js? Calibre does not provide any kind of feedback.
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([0, 4000])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 500000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add dots
svg.append('g')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.GrLivArea); } )
.attr("cy", function (d) { return y(d.SalePrice); } )
.attr("r", 1.5)
.style("fill", "#69b3a2")
})
</script>
2 answers
solution1
1 2022-02-09 15:23:30
I think it's not possible for fetching external libraries, not only for security reasons, but how can I read book like this in forest without inte.net? It's def.netly BAD practice - ebooks must working in offline. https://github.com/kobolabs/epub-spec#javascript-support
solution2
0 2022-02-10 19:39:06
Your sample code generates an SVG. Provided you include the rendered SVG in your EPUB document, you should be fine.
As already mentioned, EPUBs need to be viewable in offline settings. And, the readers' embedded HTML engine is a subset of a mobile/desktop browser which might process basic JavaScript in some cases, but don't expect to do anything complex. Especially since most reading devices have very limited active memory.
For SVG support in EPUB documents, see: https://wiki.mobileread.com/wiki/SVG
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.