I wanted to take a brief diversion to quickly cover how the web works.
What exactly happens when you type a URL into a browser and
why all of this matters if you want to use D3.
So far we've been experiencing D3 through our web browser's console, and
have been manipulating elements that have already been on the page.
While this is all fine and good,
this isn't anything we can't do easily with existing libraries of technologies.
What makes D3 special is the ability to easily load and
manipulate data, often from external files or sources.
And in addition to being the way that the D3 data loading functions work.
What I'm going to cover with the respect to the client-server model is actually
how most of the internet and the world wide web is possible and work so well.
Typically everything that happens in the internet, happens between two or
more computers.
Most often your laptop, and some external server.
And without going into too much excruciating detail, the way the world wide
web works is by creating a network of all the computers on the internet, so
that they can intercommunicate.
Let's say, for
example, that you want to go to the D3 homepage, located at d3js.org.
And load the index.html page.
When you type the address into your browser,
represented here by the blue square, the web browser is local on your laptop.
And needs to send the request out to the internet, asking for
the HTML of the d3.js homepage.
Typically it can be found on one, if not many servers on the world wide web.
And the good analogy, of how to think about this process,
is actually quite similar to the way the postal service works.
Let's pretend for
a second that phones and actually the internet doesn't exist yet.
If you wanted a package from a friend in the old days, the really old days,
you would have to send the letter to your friend, requesting that they send you,
let's say, a package with your favorite book that they've borrowed.
You can think of the host name,
in this case d3js.org, as the address of a building or a hotel.
Or even in apartment complex and
the port of a server can be thought of as a room or apartment number.
So, in this case in the analogy of the really old days where we're sending
a letter, we would say send the letter to address d3js.org room number 80.
I wanted to simplify the diagram a little bit,
to show this process and exchange much more clearly.
Again, continuing the analogy of requesting your favorite book from a friend,
assuming that the Internet and
telephones don't exist, you would have to send the letter.
Let's assume that you are the client, or in this case, a laptop, and
you send the letter with both the destination address and the return address.
In this case your destination is d3js.org port 80.
And where your friend, in this case the server should send your
book as in this case a somewhat arbitrary IP.
So this is just an identifier for your laptop and a somewhat arbitrary
port number to send that package to or other address and room number.
Your friend the server receives this request or
the letter for them to send your favorite book back.
And this is called the request typically.
And then the response your friend or
the server sends you your favorite book back.
Or in the case of oh,
web response it'll be a bunch of HTML to the return address.
And once you receive your favorite book, in the olden days you can start reading
or in the modern age of computers when you receive the webpage, HTML.
You can render it on your browser.
And now hopefully that you have an idea of the general request and
response model of the client server model where you, the client, or
your laptop and its web browser requests a webpage which is server on
the internet located at the address you request, send you back some HTML.
In the case of D3 code, let's say that we request
the index page from d3js.org on port 80,
which is the default for all web communication, or at least HTTP.
The server sends you back an index.html web page, composed of HTML,
JavaScript, CSS, and some D3 code, and on that page is a chart for it to render.
Remember that I mentioned any time D3 loads an external file,
through its data loading functions, such as json.csv or
.tsv, it makes a secondary request to some address.
It doesn't have to be the server that it came from, but it often is, and
what the server sends back when the web browser makes an AJAXrequest for
some data file, in this case, data.json,
the server sends back the data in another response which D3 then
loads into its callback function to either bind to your HTML or
SVG and draw a chart, or visualization based on the data sent back.
So, just to recap, when you initially request a page,
your browser requests of the host import, some web document,
in this case, index.html, that the server sends back.
In that html page,
if there's an external data loading function in D3 such as d3.json.
An AJAX request is made, which then goes back to the same server or
whichever address you specify in the background, once the page has loaded, and
wait to run its callback function.
Until the server sends it its data so
it can then build a visualization with the data and
the JavaScript, HTML and SVG that was sent in the original response.