The Document Object Model (DOM) is how we interact with the collection of HTML objects in our document.
For instance, a page can be composed of <div> objects, <p> objects, etc,
and we can construct and interact with these. This includes things like
modifying style sheets. See, for example, the
jsfiddle for jQuery
boilerplate.
One alternative, as we will see, is to have rendering tied to data and data values, and to have those automatically update as needed.
In Python, we would fetch a website and wait for that to finish before we move on.
import requests
r = requests.get("https://google.com/")
print(r.text)
print("Request completed!")In Javascript, we would tell the code to fetch, but we would also tell it what to do after it finished.
This uses jQuery, but you can do it without that.
$.get("https://google.com/", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
console.log("Hey, I've done the thing.");Note that you can't always get this to work. In fact, that example won't even work!
Async is how we can think about event driven programming, as well. We have
done this using traitlets and ipywidgets in Python, and we will do it here
as well.
var button = $("button");
button.on("click", function() {
console.log("I've been clicked!");
});python -m http.serverThis will start up a server running locally that will just happily serve static
content. Let's try this out by creating two files, index.html and
script.js.
For instance, index.html :
<html>
<script src="script.js"></script>
<div>
<p>Hello there!</p>
</div>
</html>
script.js:
alert("I am loading!");
We will go over a few things, and then move on to vega-lite.
You can declare variables in Javascript implicitly or explicitly, depending on how you want them scoped.
var myArray = [1, 2, 3, 4];
var myString = "Hello there!";
var myConcatString = "Hi " + "there " + 5;
var myObject = {'a': 1, 'b': 2, 'c': [1, 2, 3, 4]};If you have an array of objects, there are three very handy functions you can
utilize: slice, forEach and filter. If you have an object, you can
update it either by accessing a property with a period (obj.something) or by
accessing it like you would a dictionary in python (obj['something']).
filtervar myArray = [1, 5, 1, 3, 50, 14, 2];
myArrayFiltered = myArray.filter(val => val > 2);Note that here I'm using => as shorthand for declaring a function.
forEachTo execute something on every value in an array, you can call forEach with a
function.
var myArray = [1, 2, 3, 4, 5];
myArray.forEach(val => console.log(val * 2));sliceYou can set a start and a stop on an array with a slice call:
var myArray = ["Hello", "I", "am", "here", "now"];
myArray.slice(3).forEach(word => console.log(word));Often, you will need to include external libraries. In many cases, it is sufficient to include items through content delivery networks (CDNs). For instance, CDNJS has a wide variety of includable items.
From the vega-lite examples, you can make a bar chart that is an aggregate like so:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {"url": "data/movies.json"},
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"aggregate": "count",
"type": "quantitative"
}
}
}There are several mechanisms by which we describe data representations in vega-lite, but the overarching principle is that it is declarative. We define what it does based on what we say we want it to look like.
The place where this is no longer true is when we modify datum values.
The syntax you will need to be the most familiar with:
mark: how to visually represent somethingencoding: the translation between data and the markaggregate: operating over a collection of points -- mean, sum, median,
min, max, counttype: quantitative, temporal, ordinal, or nominalYou will have two and a half weeks, until February 25th.