Start by creating a new folder for your project, and then downloading the latest D3 package into it. Unzip the download and rename the folder d3.
Create a simple HTML page within your project folder, say index.html. Your folder structure should look something like this:
project-folder/
d3/
index.html
Now paste the following into your HTML file, so it references D3 in the head and provides room for your JavaScript code:
<html>
<head>
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>
You’ll notice that the download includes a number of other files in addition to d3.js:
d3.chart.js
d3.chart.min.js
d3.csv.js
d3.csv.min.js
d3.geo.js
d3.geo.min.js
d3.geom.js
d3.geom.min.js
d3.js
d3.layout.js
d3.layout.min.js
d3.min.js
d3.time.js
d3.time.min.js
These additional files contain methods for extra functionality. (For example, d3.csv.js lets you load in CSV data, and d3.time.js has handy time and date manipulation functions.) You can reference these files if needed for your project.
The .min versions are simply “minified” with whitespace removed for smaller file sizes and faster load times; the functionality is the same.
In many cases, you can just open your HTML file in a web browser to view it. In some cases, it may be better to run a local web server and view your page at http://localhost:8888/. You could use a server like MAMP or see the notes in the Read Me file on activating a quick, temporary server.
Next up: Adding elements →
Thoughts? Let me know what you’d like to see added, cut, or revised.
Follow me on Twitter or
watch this RSS feed for updates.