Example code and data for the "Introduction to Data Visualization Using D3.js" workshop at the 2017 Open Data Science Conference West.
IMPORTANT UPDATE: We will be adding code and data to this repository for the next couple of days. Please make sure your repository is up to date before the conference.
Python (or a tool that will allow you to run a local web server) and a modern browser. We'll be using Chrome. You can follow along without a server, but we strongly recommend you follow the instructions for serving files below.
The examples here use some JavaScript language features which may not be supported in all browsers. We recommend a recent version of either Chrome, Firefox, or Safari.
- Clone or download this repository.
cd
inside the repository.- Start a web server.
- If on macOS or Linux, open up the terminal and run either
python3 -m http.server
orpython -m SimpleHTTPServer
. - If on Windows:
- If you have Python installed, follow the same instructions as for macOS/Linux.
- If you do not have Python installed, run the
windows_powershell_server.ps1
script from thescripts
directory. - There are also other alternatives. For example, if you have Node.js installed, you can run
npm install -g http-server
and then launchhttp-server
.
- These commands start a simple web server for hosting static files from the current directory. Using a web server allows pages to load data from separate files (as long as they are within the current directory). Without a web server (if we right clicked on an HTML file and opened it in a browser), requests to load data files would fail with a cross origin request error since browsers will not allow pages to load files directory from the local file system.
- If on macOS or Linux, open up the terminal and run either
- Open http://localhost:8000 in a browser.
- Open up the developer console (
option+command+i
on macOS or right click and "Inspect Element" then click on the console tab). - Type
d3
and press enter and you should be able to view the D3 library and all its properties. - While working, it is helpful to turn off the browser's caching. This ensures that any changes you make will be loaded by the browser on the next refresh. http://nicholasbering.ca/tools/2016/10/09/devtools-disable-caching/ explains how to disable caching in Chrome, Firefox, and Safari.
- If setting up a server doesn't work, one alternative is to save the data in a JavaScript file and
load that file as you would any other script file. For example, you could rename
data/books.json
todata/books.js
and modify it to store the data object in a global variable. Sobooks.js
would look like:Then you could replace this code:window.data = { "123456": {"authors":"..."}, ... }
with this code:<script> d3.json('../data/books.json', data => { console.log(data); ... } </script>
This isn't the recommended way of loading data but it will work just fine for workshop/demo purposes.<script src="../data/books.js"></script> <script> console.log(window.data); ... </script>
Example code and data is licensed under the Creative Commons Attribution Share Alike 4.0 license
This repository includes the following third party libraries:
- D3.js is copyright Mike Bostock and licensed under the BSD 3-clause license.
- d3-tip is copyright Justin Palmer and licensed under the MIT license.
- Lodash is copyright JS Foundation and licensed under the MIT license.