Can I display D3 graphs on .epub?-CodePudding

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>

CodePudding user response：

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 internet? It's definetly BAD practice - ebooks must working in offline. https://github.com/kobolabs/epub-spec#javascript-support

CodePudding user response：

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