Data Visualization with Python and JavaScript, 2nd Edition (Third Early Release) Kyran Daleinstant download
Data Visualization with Python and JavaScript, 2nd Edition (Third Early Release) Kyran Daleinstant download
https://ebookmeta.com/product/data-visualization-with-python-and-
javascript-2nd-edition-third-early-release-kyran-dale/
https://ebookmeta.com/product/data-visualization-with-python-and-
javascript-2nd-edition-seventh-early-release-kyran-dale/
https://ebookmeta.com/product/data-visualization-with-python-and-
javascript-2nd-edition-eighth-early-release-kyran-dale/
https://ebookmeta.com/product/data-visualization-with-python-and-
javascript-2nd-edition-kyran-dale/
https://ebookmeta.com/product/qualitative-data-analysis-key-
approaches-1st-edition-peter-a-j-stevens/
Explanation of the meanings of the Noble Qur an Rowad
Translation Center
https://ebookmeta.com/product/explanation-of-the-meanings-of-the-
noble-qur-an-rowad-translation-center/
https://ebookmeta.com/product/machine-learning-based-design-and-
optimization-of-high-speed-circuits-1st-edition-vazgen-melikyan/
https://ebookmeta.com/product/rebirth-of-the-dragon-1st-edition-
carlos-moran/
https://ebookmeta.com/product/principles-of-
microeconomics-2e-for-ap-courses-2017-update-openstax-2015-2nd-
edition-steven-a-greenlaw-timothy-taylor/
https://ebookmeta.com/product/holy-spirit-the-fgb-154-1st-
edition-various/
The Galaxy, And The Ground Within (The Wayfarers Series
Bk IV) 1st Edition Becky Chambers
https://ebookmeta.com/product/the-galaxy-and-the-ground-within-
the-wayfarers-series-bk-iv-1st-edition-becky-chambers/
Data Visualization with
Python and JavaScript
Scrape, Clean, Explore, and Transform Your Data
SECOND EDITION
With Early Release ebooks, you get books in their earliest form—
the author’s raw and unedited content as they write—so you can
take advantage of these technologies long before the official
release of these titles.
Kyran Dale
Data Visualization with Python and JavaScript
by Kyran Dale
Copyright © 2023 Kyran Dale Limited. All rights reserved.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North,
Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales
promotional use. Online editions are also available for most titles
(http://oreilly.com). For more information, contact our
corporate/institutional sales department: 800-998-9938 or
[email protected].
Probably the most ambitious aspect of this book is that it deals with two programming languages.
Moreover, it only requires that you are competent in one of these languages. This is only possible
because Python and JavaScript (JS) are fairly simple languages with much in common. The aim of
this chapter is to draw out those commonalities and use them to make a learning bridge between the
two languages such that core skills acquired in one can easily be applied to the other.
After showing the key similarities and differences between the two languages, I’ll show how to set up
a learning environment for Python and JS. The bulk of the chapter will then deal with core syntactical
and conceptual differences, followed by a selection of patterns and idioms that I use often while
doing data visualization work.
They both work without needing a compilation step (i.e., they are interpreted).
You can use both with an interactive interpreter, which means you can type in lines of code
and see the results right away.
Both have garbage collection.
Neither language has header files, package boilerplate, and so on.
Both are primarily developed with a text editor—not an IDE.
In both, functions are first-class citizens, which can be passed as arguments.
The differences here emphasize the need for this book to be bi-lingual. JavaScript’s monopoly of
browser dataviz needs the complement of a conventional data-processing stack. And Python has the
best there is.
Python
By far, the best command-line Python interpreter is IPython, which comes in three shades: the basic
terminal version, an enhanced graphical version, and a browser-based notebook. Since version 4.0
the latter two have been spun out into project Jupyter. The Jupyter notebook is a rather brilliant and
fairly recent innovation, providing a browser-based interactive computational environment. There are
pros and cons to the different versions. The command line is fastest to scratch a problematic itch but
lacks some bells and whistles, particularly embedded plotting courtesy of Matplotlib and friends. The
makes it suboptimal for Pandas-based data-processing and data visualization work. Of the other two,
both are better for multiline coding (e.g., trying out functions) than the basic interpreter, but I find
the graphical Qt console more intuitive, having a familiar command line rather than executable cells.4
The great boon of the Notebook is session persistence and the possibility of web access.5 The ease
with which one can share programming sessions, complete with embedded data visualizations, makes
the notebook a fantastic teaching tool as well as a great way to recover programming context. That’s
why the Python chapters of this book have accompanying Jupyter notebooks.
You can start an ipython session at the command-line like this:
$ ipython
$ jupyter notebook
[I 15:27:44.553 NotebookApp] Serving notebooks from local
directory:
...
[I 15:27:44.553 NotebookApp] http://localhost:8888/?token=5e09...
Then open a browser tab at the URL specified (+http://localhost:8888 in the case) and start reading
or writing Python notebooks.
JavaScript
There are lots of options for trying out JavaScript code without starting a server, though the latter
isn’t that difficult. Because the JavaScript interpreter comes embedded in all modern web browsers,
there are a number of sites that let you try out bits of JavaScript along with HTML and CSS and see
the results. Codepen is a good option. These sites are great for sharing code and trying out snippets,
and usually allow you to add libraries such as D3.js with a few mouse-clicks.
If you want to try out code one-liners or quiz the state of live code, browser-based consoles are your
best bet. With Chrome, you can access the console with the key combo Ctrl-Shift-J. As well as trying
little JS snippets, the console allows you to drill down into any objects in scope, revealing their
methods and properties. This is a great way to quiz the state of a live object and search for bugs.
One disadvantage of using online JavaScript editors is losing the power of your favorite editing
environment, with linting, familiar keyboard shortcuts, and the like (see [Link to Come]). Online
editors tend to be rudimentary, to say the least. If you anticipate an extensive JavaScript session and
want to use your favorite editor, the best bet is to run a local server.
First, create a project directory—called sandpit, for example—and add a minimal HTML file that
includes a JS script:
sandpit
├── index.html
└── script.js
The index.html file need only be a few lines long, with an optional div placeholder on which to start
building your visualization or just trying out a little DOM manipulation.
<div id='viz'></div>
// script.js
var data = [3, 7, 2, 9, 1, 11];
var sum = 0;
data.forEach(function(d){
sum += d;
});
Start your development server in the project directory using Python’s http module:
Now that we’ve established how to run the demo code, let’s start building a bridge between Python
and JavaScript. First, we’ll cover the basic differences in syntax. As you’ll see, they’re fairly minor and
easily absorbed.
(function(foo){
'use strict';
// ...
}(window.foo = window.foo || {});
FOO_CONST = 10
class FooBar(object): # ...
def foo_bar():
baz_bar = 'some string'
<!DOCTYPE html>
<meta charset="utf-8">
...
<script src="http://d3js.org/d3.v7.min.js"></script>
You can include the script anywhere in your HTML file, but it’s best practice to add scripts after the
body (div tags, etc.) section.7 Note that the order of the <script> tags is important. If a script is
dependent on a module (e.g., it uses the D3 library), its <script> tag must be placed after that of
the module. In other words, big library scripts, such as jQuery and D3, will be included first.
Python comes with “batteries included,” a comprehensive set of libraries covering everything from
extended data containers (collections) to working with the family of CSV files (csv). If you want
to use one of these, just import it using the import keyword:
In [2]: sys.platform
Out[2]: 'linux'
If you don’t want to import the whole library or want to use an alias, you can use the as and from
keywords instead:
import pandas as pd
from csv import DictWriter, DictReader
from numpy import *
df = pd.read_json('data.json')
reader = DictReader('data.csv')
md = median([12, 56, 44, 33])
This imports all the variables from the module into the current namespace and is almost always a
bad idea. One of the variables could mask an existing one, and it goes against the Python best
practice of explicit being better than implicit. One exception to this rule is if you are using the
Python interpreter interactively. In this limited context, it may make sense to import all functions
from a library to cut down on key presses; for example, importing all the math functions (from
math import *) if doing some Python math hacking.
If you import a nonstandard library, Python uses sys.path to try to find it. sys.path consists of:
The installation-dependent default, where libraries installed using pip or easy_install will
usually be placed
Big libraries are often packaged, divided into submodules. These submodules are accessed by dot
notation:
Packages are constructed from the filesystem via __init__.py files, usually empty, as shown in
Example 1-1. The presence of an init file makes the directory visible to Python’s import system.
Example 1-1. Building a Python package
mypackage
├── __init__.py
...
├── core
│ └── __init__.py
│ ...
...
└── io
├── __init__.py
└── api.py
...
└── tests
└── __init__.py
└── test_data.py
└── test_excel.py
...
...
You would import this module using from mypackage.io.tests import test_excel.
You can access packages on sys.path from the root directory (that’s mypackage in Example 1-1)
using dot notation. A special case of import is intrapackage references. The test_excel.py
submodule in Example 1-1 can import submodules from the mypackage package both absolutely and
relatively:
Imports the test_data.py module absolutely, from the package’s head directory.
Attaches the updateTimeChart method to the global nbviz object, effectively exporting it.
If an nbviz object exists in the global (window) namespace, pass it into the module function;
otherwise, add it to the global namespace.
# In Python 2*
print 'Hello World!'
# In Python 3+
print('Hello World!')
You can use Python 3’s print function in Python 2 by importing it from the __future__ module:
If you’re not using Python 3, then this is a sensible approach but I would strongly recommend moving
to the newer Python.
JavaScript has no print function, but you can log output to the browser console:
console.log('Hello World!);
# B
def process_student_data(data, pass_threshold=60,
merit_threshold=75):
""" Perform some basic stats on some student data. """
# C
for sdata in data:
av = sum(sdata['scores'])/float(len(sdata['scores']))
sdata['average'] = av
if av > merit_threshold:
sdata['assessment'] = 'passed with merit'
elif av > pass_threshold:
sdata['assessment'] = 'passed'
else:
sdata['assessment'] = 'failed'
# D
print("%s's (id: %d) final assessment is: %s"%(
sdata['name'], sdata['id'], sdata['assessment'].upper()))
# E
if __name__ == '__main__':
process_student_data(student_data)
// C
data.forEach(function(sdata){
var av = sdata.scores.reduce(function(prev, current){
return prev+current;
},0) / sdata.scores.length;
sdata.average = av;
// E
processStudentData(studentData);
String Construction
Section D in Examples 1-3 and 1-4 show the standard way to print output to the console or terminal.
JavaScript has no print statement but will log to the browser’s console through the console
object.
Note that the integer variable id is coerced to a string, allowing concatenation. Python doesn’t
perform this implicit coercion, so attempting to add a string to an integer in this way gives an error.
Instead, explicit conversion to string form is achieved through one of the str or repr functions.
In section A of Example 1-3, the output string is constructed with C type formatting. String (%s) and
integer (%d) placeholders are provided by a final tuple (%(…)):
These days, I rarely use Python’s print statement, opting for the much more powerful and flexible
logging module, which is demonstrated in the following code block. It takes a little more effort to
use, but it is worth it. Logging gives you the flexibility to direct output to a file and/or the screen,
adjusting the logging level to prioritize certain information, and a whole load of other useful things.
Check out the details here.
import logging
logger = logging.getLogger(__name__)
//...
logger.debug('Some useful debugging output')
logger.info('Some general information')
// IN INITIAL MODULE
logging.basicConfig(level=logging.DEBUG)
You can set the logging level, an output file as opposed to the default to screen.
def doubler(x):
return x * 2
# |<-this spacing is important
JavaScript doesn’t care about the number of spaces between statements and variables, using curly
brackets to demark code blocks, the two doubler functions in this code being equivalent:
Much is made of Python’s whitespace, but most good coders I know set up their editors to enforce
indented code blocks and a consistent look and feel. Python merely enforces this good practice. And,
to reiterate, I believe the extreme readability of Python code contributes as much to Python’s
supremely healthy ecosystem as its simple syntax.
By contrast, JavaScript uses the C language convention of double backslashes (//) or /* … */ for
multiline comments:
// script.js, a single informative comment
/* A multiline comment block for
function descriptions, library script
headers, and the like */
let data = {}; // Our main data-ball
In addition to comments, and in keeping with its philosophy of readability and transparency, Python
has documentation strings (docstrings) by convention. The process_student_data function in
Example 1-3 has a triple-quoted line of text at its top that will automatically be assigned to the
function’s __doc__ attribute. You can also use multiline doc-strings.
def doubler(x):
"""This function returns double its input."""
return 2 * x
def sanitize_string(s):
"""This function replaces any string spaces
with '-' after stripping any whitespace
"""
return s.strip().replace(' ', '-')
Doc-strings are a great habit to get into, particularly if you are working collaboratively. They are
understood by most decent Python editing toolsets and are also used by such automated
documentation libraries as Sphinx. The string-literal doc-string is accessible as the doc property of a
function or class.
TIP
JavaScript has variable hoisting, which means variables declared with var are processed before any other code.
This means declaring them anywhere in the function is equivalent to declaring them at the top. This can result
in weird errors and confusion. Explicitly placing vars at the top avoids this but it’s better to use the modern
let and have scoped declarations.
DÉTOURNEMENT DE TÊTE:
DÉVOTS DE PLACE:
Que ces francs charlatans, que ces dévots de place.
(Tart. I. 6.)
Comme les valets de place, qui se tiennent en vue sur les places
publiques.
DIFFAMER:
MORON.
Je vous croyois la bête
Dont à me diffamer j’ai vu la gueule prête.
(Pr. d’Él. I. 2.)
L’emploi de diffamer pour dévorer, déchirer, en parlant d’un
sanglier, pourrait sembler une bouffonnerie de ce fou de cour; mais
Furetière nous apprend que «diffamer signifie aussi salir, gâter,
défigurer. Il a renversé cette sauce sur mon habit: il l’a tout diffamé.
Il lui a donné du taillant de son épée, et lui a tout diffamé le visage.
En ce sens il est bas.»
Ainsi Moron parle sérieusement et correctement. Diffamer,
aujourd’hui, ne se prend plus qu’au sens moral.
On observera que diffamer, au sens moral, n’emporte pas
nécessairement l’idée de calomnie, ni même aucune idée de blâme,
puisque Boileau a dit, en parlant des précieuses:
«Reste de ces esprits jadis si renommés,
Que d’un coup de son art Molière a diffamés.»
C’est-à-dire, tout simplement: a perdus de réputation. Fame
(fama) a été français dans l’origine:
«E vint la fame a tuz ces de Israel, que desconfiz furent li Philistien.»
(Rois. p. 42)
Héli dit à ses fils:
«Votre fame n’est mie saine.»
(Ibid. p. 8.)
Vous n’avez pas bonne réputation.
Mettez-vous donc bien en tête..... que je vous trouve à dire plus que je
ne voudrois dans toutes les parties où l’on m’entraîne.»
(Mis. V. 4.)
Ce verbe dire vient, par une suite de syncopes, non pas de
dicere, mais de desiderare, dont on ne retient que les syllabes
extrêmes, desiderare, desirare (d’où l’on a fait à la seconde époque
désirer), et dere, dont le premier e se change en i, par la règle
accoutumée. (V. Des Var. du langage fr., p. 208).
Ce verbe dire était très-usité au XVIe siècle: Montaigne, la reine
de Navarre, et les autres, en font constamment usage:
«Que sait-on, si...... plusieurs effects des animaux qui excedent nostre
capacité sont produits par la faculté de quelque sens que nous ayons à
dire?»
(Montaigne. II. 12.)
A désirer, à regretter; qui nous manque.
«Si nous avions à dire l’intelligence des sons de l’harmonie et de la voix,
cela apporteroit une confusion inimaginable à tout le reste de nostre
science.»
(Id. Ibid.)
«Ce desfault (une taille trop petite) n’a pas seulement de la laideur, mais
encores de l’incommodité, à ceulx mesmement qui ont des
commandements et des charges; car l’auctorité que donne une belle
presence et majesté corporelle en est à dire.»
(Id. II. 17.)
L’autorité, par suite de ce défaut, se fait désirer, ne s’obtient pas.
La reine de Navarre écrit à chaque instant dans ses lettres: Le roi
et madame vous trouvent bien à dire; nous vous trouvons bien à
dire. C’est dans ce sens que l’employait encore Célimène en 1666.
Ce mot a disparu, peut-être banni pour laisser régner, sans
équivoque possible, dire, venu de dicere.
—DIRE de quelque chose TOUS LES MAUX DU MONDE:
Tous les autres comédiens..... en ont dit tous les maux du monde.
(Crit. de l’Éc. des fem. 7.)
(Voyez ON DIRAIT DE.)
—DONNER DANS:
Vous donnez furieusement dans le marquis!
(L’Av. I. 5.)
..... les riches bijoux, les meubles somptueux où donnent ses pareilles
avec tant de chaleur.
(Ibid. II. 6.)
—DONNER LA BAIE....:
Le sort a bien donné la baie à mon espoir.
(L’Ét. II. 13.)
(Voyez BAIE.)
D’ORES-EN-AVANT:
THOMAS DIAFOIRUS. Aussi mon cœur, d’ores-en-avant tournera-t-il toujours
vers les astres resplendissants de vos yeux adorables.
(Mal. im. II. 6.)
Archaïsme, comme ne plus, ne moins. On voit que Thomas
Diafoirus est issu de vieille bourgeoisie. On a dit, en ôtant l’s d’ore,
dorenavant, et l’on met aujourd’hui un accent sur l’é, dorénavant; en
sorte que les racines de ce mot sembleraient être doré et navant.
C’est d’ora in avanti, d’ore en avant.
Il est fâcheux que l’Académie consacre l’orthographe et la
prononciation vicieuses.
—DULCIFIANT, adjectif:
SGANARELLE. Quelque petit clystère dulcifiant.
(Méd. m. lui. II. 7.)
DU MIEUX QUE:
Allez; si elle meurt, ne manquez pas de la faire enterrer du mieux que
vous pourrez.
(Méd. m. lui. III. 2.)
(Voyez DE exprimant la cause, la manière.)
DURANT QUE:
Je vous dirai..... que, durant qu’il dormoit, je me suis dérobée d’auprès
de lui....
(G. D. III. 12.)
C’est le participe ablatif absolu des Latins: durante quod, comme
pendant que, pendente quod.
CLAUDINE. Il a tant bu, que je ne pense pas qu’on puisse durer contre lui.
(G. D. III. 12.)
Il faut observer que ce durer est devenu du style de servante,
mais que cette servante parle comme Tite-Live: «Nec poterat durari
extra tecta.» On ne pouvait durer hors des maisons; et comme
Plaute: «Nequeo durare in ædibus.» Je ne puis durer chez nous.
«....... durate, atque exspectate cicadas.»
(Juven. IX. 69.)
Au surplus, Molière a relevé cette expression, en la mettant dans
la bouche de l’aimable et spirituelle Élise:
Pensez-vous que je puisse durer à ses turlupinades perpétuelles?
(Crit. de l’Éc. des fem. 1.)
DU TOUT:
..... Mon fils, je ne puis du tout croire
Qu’il ait voulu commettre une action si noire.
(Tart. V. 3.)
Je relève ces vers, uniquement pour avoir occasion d’observer
que du tout ne s’emploie plus aujourd’hui qu’en des formules
négatives, mais qu’il entrait aussi originairement dans des phrases
affirmatives. Par exemple:
«Nostre Seignur Deu del tut siwez et de tut vostre quer servez.»
(Rois. p. 41.)
Suivez du tout, c’est-à-dire, absolument, sans restriction, Notre
Seigneur Dieu.—Nous sommes appauvris de la moitié de cette
locution.
«Pensez, amis, que je faz moult
«Quant je me mets en vous du tout
«Et de ma mort et de ma vie.»
(Partonopeus. v. 7730.)
Quand je me confie entièrement en vous, quand je vous livre ma
mort et ma vie.
ÉBAUBI:
Je suis tout ébaubie, et je tombe des nues!
(Tart. V. 5.)
Trévoux dit que c’est une forme populaire et corrompue du mot
ébahi. Il se trompe. La forme première est abaubi, et nos pères
distinguaient bien esbahi et abaubi:
«Lors le voit morne et abaubit.»
(Rom. de Coucy. v. 185.)
«Li chastelains fut esbahis.»
(Ibid. v. 223.)
La châtelaine de Fayel, voyant dans sa chambre son époux et son
amant, demeure stupéfaite:
«Quant ele andeus leans les vist,
«Le cuer a tristre et abaubit.
«Dont dist come esbahie fame:
«Sire diex! quel gent sont cecy?»
(Ibid. v. 4546.)
Esbahi est celui qui reste la bouche béante, comme s’il bâillait. La
racine est hiare.
Abaubi a pour racine balbus, dont on fit baube. Louis le Bègue
était Loys li Baube:
«Looys, le fil Challe le Chauf, qui Loys li Baubes fut apelez.»
(Chron. de St.-Denys, ad ann. 877.)
Et Philippe de Mouskes:
«Loeys ki Baubes ot nom.»
Louis, surnommé le Bègue.
En composant cet adjectif avec a, qui marquait une action en
progrès, on fit abaubir, comme alentir, apetisser, agrandir, et, par la
corruption de l’âge, ébaubi.
Un homme ébahi est muet de surprise; l’ébaubi est celui que la
surprise fait bégayer, balbutier.
Trévoux dérive esbahir de l’hébreu schebasch, et ébaubi,
d’ébahir.
Le verbe était bauboier ou baubier, qui s’écrivait balbier. Il y a
dans Partonopeus un exemple naïf d’une femme ébaubie, ou
abaubie: c’est quand la fée Mélior, en s’éveillant, ne trouve plus
Partonopeus à ses côtés; elle veut l’appeler par son nom:
«Nel puet nomer, et neporquant
«Balbié l’a en souglotant:
«Parto, Parto, a dit souvent,
«Puis dit nopeu, moult feblement;
«Et quant a Partonopeu dit
«Pasmee ciet desor son lit.»
(Partonopeus. v. 7245.)
(Voyez Du Cange aux mots Balbire et Balbuzare.)
Balbier (baubier), est la forme primitive, tirée de balbus.
Balbutier est de seconde formation, calqué sur balbutire.
ÉBULLITIONS DE CERVEAU:
Je suis pour le bon sens, et ne saurois souffrir les ébullitions de cerveau
de nos marquis de Mascarille.
(Crit. de l’Éc. des fem. 6.)
Je m’étois par hasard égaré d’un frère et de tous ceux de notre suite.
(D. Juan. III. 4.)
Les Italiens disent de même smarrito della via.
J’observe que l’on disait aussi égarer quelqu’un, au même sens
que s’égarer de quelqu’un:
«Considerant les mouvements du chien........ à la queste de son maistre
qu’il a esgaré.»
(Montaigne, II. 13.)
C’est-à-dire dont il s’est égaré.
Nicot ne donne que la forme s’égarer d’avec: «L’enfant s’est
esgaré d’avec son père.»
Ménage dérive égarer de je ne sais quel varare, qu’il traduit par
traverser. Égarer, garer, garder, garir (auj. guérir), guérite, garantir,
tous ces mots descendent de l’allemand, bewahren (en anglais
beware), en passant par la basse latinité, d’où le w se changeait,
pour le français, en gu ou g dur. Werdung, guerdon;—Wantus, guant
(gant);—Wardia, garde;—Wadium, gage;—Wallia, Gaule;—Warenna
(ubi animalia custodiuntur), garenne; etc., etc.
Guérite ou garite signifiait une route à l’écart, un sentier
détourné, par où l’on cherchait un refuge devant l’ennemi, sich
bewahren, à se garer ou à se garir. De là cette vieille expression,
enfiler la guérite, c’est-à-dire, fuir, chercher un asile dans la fuite. De
même s’égarer, c’est se jeter dans ce petit chemin perdu, hors de la
vue et de la poursuite.
On voit d’un même coup d’œil comment se rattachent à cette
famille l’exclamation gare! qui n’est que l’impératif du verbe se
garer: se garer des chevaux, des voitures; et le substantif féminin
gare; une gare pour les bateaux, la gare d’un chemin de fer.
L’enchaînement des idées est donc celui-ci: protection, fuite, écart,
égarement.