Is it possible to showcase D3 charts on an .epub file?

For my research project, I am exploring the possibilities of .epub files and experimenting with embedding JavaScript code to display data visualizations. I am currently using calibre to convert an HTML file containing D3 scatterplots into an .epub. The scatterplots show data visualization perfectly when viewed in a browser, but the .epub file created with calibre appears empty. I am curious to know if it is possible to execute JavaScript code within an .epub file. Given that EPUB 3 is said to resemble a modern browser, I would assume that rendering web content is feasible, but I am uncertain as to why my D3.js code is not loading properly. Unfortunately, calibre does not provide any feedback to troubleshoot the issue.

<!-- 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>

// JavaScript code for creating scatterplots using D3
// This code is supposed to load data and generate the scatterplot

</script>
javascripthtmlcssd3.jsepub

Answer №1

When it comes to fetching external libraries, I believe that it may not always be feasible, mainly for security concerns. How could one possibly enjoy a book out in the forest without internet access? This raises the issue that it is indeed not a good practice - ebooks should be functional even when offline. https://github.com/kobolabs/epub-spec#javascript-support

Answer №2

If you have included an SVG generated by your sample code in your EPUB document, you should be good to go. EPUBs must be able to be viewed offline, and the HTML engine in readers may support basic JavaScript but may struggle with more complex actions due to limited memory on most devices.

For information on SVG support in EPUBs, check out:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to updating Django model-based form records with choices option using an HTML form

I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...

htmlpython-3.xdjangodjango-formsdjango-templates

Find the element that contains a specific substring in its value using JavaScript

I am trying to find a way to count how many input fields with the class name "text" contain a specific value. document.getElementById('c_files').getElementsByClassName('text').length; Currently, this code counts all textboxes with the ...

javascripthtmlgetelementbyidgetelementsbytagnamegetelementsbyclassname

Retrieve a form (for verification purposes) from a separate AngularJS component

I'm facing an issue with accessing a form from one component to another in my project. One component contains a form, and the other has navigation buttons that, when clicked, should validate the form before moving on to the next step. However, I alway ...

javascriptangularjsangularjs-ng-form

Finding the current div based on the scrolling position can be achieved without the use of jQuery

Seeking assistance with a coding challenge. I have a solution in jQuery, but we require the solution in plain JavaScript or Angular. It seems like something is missing. Take a look at this fiddle. The objective is to highlight the corresponding left panel ...

javascripthtmlangularjs

Creating crisp and clear text within a three.js texture

I am currently incorporating a 512x512 SVG onto a circular plane in my project using the following code snippet: const texture = new THREE.TextureLoader().load('img/plane.svg'); ​ const material = new THREE.MeshBasicMaterial({ ...

javascriptthree.jstextures

The present IP address of the client through AJAX and PHP

This code snippet is on my PHP page: // Setting the timezone to Asia/Manila date_default_timezone_set('Asia/Manila'); $date = date('m/d/Y h:i:s a', time()); if (!empty($_SERVER['HTTP_CLIENT_IP'])){ $ip=$_SERVER['HTTP_C ...

javascriptphpjqueryajax

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...

htmlcssinternet-explorer

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

My PhpStorm 2019.2 keeps showing me a notification that the Button component from Material UI needs to have an added href prop because it is required. However, when I refer to the Material UI API, I see something different. Take a look at this screenshot: ...

javascriptreactjstypescriptphpstormmaterial-ui

Guidance on Configuring Django Static Files

For setting up my Django static files, I added the following code to settings.py: STATIC_URL = '/static/' STATIC_DIRS = [ os.path.join(BASE_DIR, 'static') ] STATIC_ROOT = os.path.join(BASE_DIR, 'assets') To implement this ...

pythoncssdjangodjango-staticfiles

Attempting to use Vue.js for playing MP3 files

Motive: My objective is to incorporate a background sound into my project using a local file that can be played and paused. While loading an external URL file works fine and allows for play/pause functionality, I am encountering issues with the local fil ...

javascriptvue.jshtml5-audio

Font on the internet that does not have the specific Germanic di

Just recently I purchased a new font and was excited to use it on my website using web fonts. However, upon closer inspection, I noticed that the umlauts such as ä, ü, and ö were missing from the font, leaving empty spaces where those characters should ...

cssfontstypography

Ways to designate ROLES within the _user database on Cloudant

I am struggling to figure out how to add Roles to users in the Cloudant user database (_users). Despite searching through Google and Cloudant Docs, I have not been able to find a solution. There is mention of a Cloudant _user db, but I can't seem to u ...

javascriptnode.jsexpresscouchdbcloudant

I successfully corrected the selectable options list in HTML/CSS and am now working on linking it to a Django char field. I'm currently facing some difficulties in figuring out

Below is a Django form field I have defined: source_currency = forms.CharField(max_length=5) Here is an example of Select/Option HTML: <select name="fancySelect" for="{{ form.source_currency.id_for_label }}" class="makeMeFancy" id="drop1"> ...

pythonhtmldjango

What is causing the malfunction in this code? (Regarding the key and value variable objects)

var elements = []; var attribute1 = $(index).attr('class'); //or any string var attribute2 = $(index).html(); //or any string elements.push({ attribute1: attribute2 }); When I run this code, the output I receive is: this Why am I unable to set ...

javascriptjquery

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

Here is the code I used for my swiper element: new Swiper("#swiper-pricing", { slidesPerView: 1.3, spaceBetween: 30, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 50 ...

javascripthtmlcssbootstrap-5swiper.js

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Here is the code snippet I am using to manage login, logout, user retrieval, and token setting for all axios requests as an auth header. While this code works perfectly during client-side rendering - such as logging in, storing the token in cookies, etc. ...

javascriptvue.jsaxiosvuexnuxt.js

The data point on jqPlot does not display in full

I've been working on creating a chart with jqPlot to display data for each hour. It's mostly going well, but there's an issue where the first and last data points are not showing correctly - part of the circle is getting cut off. Here' ...

javascriptjquerychartsjqplotpoint

The Express application appears to be unresponsive, but the data has been successfully saved to the MongoDB database. An error with the

Currently, I am delving deeper into the MERN stack and working on a straightforward CRUD application utilizing it. One of the recent additions to the app includes validators implemented through express-validator for handling requests. However, an issue ari ...

javascriptnode.jsmongodbexpressmongoose

Align the image so that it is perfectly positioned along the lower edge of the window

I have been experimenting with parallax scrolling and resizing images using JavaScript. However, I am struggling to align my homepage perfectly with the edge of the window. The code I have doesn't line up with the bottom edge of the webpage. If I us ...

javascripthtmlcss

The issue with AngularJS 2-way-binding failing to refresh

Recently, I experimented with angularJS in conjunction with a range-slider-directive that can be found here: https://github.com/supertorio/angular-rangeslider-directive Initially, everything worked well while using the data-model solely within my HTML pa ...

javascriptangularjsangularjs-directivescope2-way-object-databinding