Did you know that you can navigate the posts by swiping left and right?

D3 Setup

September 09, 2016, September 09, 2016 | Comments

category: VISUALIZATION
d3 web javascript html css

Since D3 is a JavaScript library, essentially working on D3 project is a process of working on HTML/CSS/JavaScript together on the web. For me with no background/experience in front-end development, the learning curve is quite steep. There are so many prerequisites we need to study before really putting hands on D3.

1. Text Editor

Each programmer will have their own preference on code editor when writing codes, sometimes depending on which language they are using. Specifically to D3, there are several options available.

(1a). CodePen
It allows to create “pens” which are sets of HTML, CSS and JavaScript for testing out bugs, displaying those “pens” on your profile and collaborating with others in the community, taking feedback.

alt text

(2a). JSFiddle
Similar as CodePen, JSFiddle provides an integrated user interface for writing HTML, CSS and JavaScript codes for previewing, debugging and sharing.

alt text

(3a). Bl.ock Builder
Unlike CodePen or JSFiddle, Bl.ock Builder is created by Ian Johnson solely for sharing D3 examples. It is an in-browser code editor by loading a GitHub gist. It didn’t have different pane windows separated for HTML, CSS and JavaScript codes as CodePen or JSFiddle did. Instead, it has an index.html which contains all front-end codes necessary for D3 examples, a README.md and thumbnail.png.

alt text

As a matter of fact, majority of D3 experts, including Mike Bostock himself, all use Bl.ock Builder to present their work.

(4a). Other Local Editors
The three editors introduced above are so-called on-line editors. You can also choose off-line editors. Sublime Text and Brackets are popular for their excellence in syntax highlight, and web design friendly. I personally use Brackets.

2. Basic Template

If you really check a D3 project (for example), you will find it is a piece of codes mixed with HTML, CSS and JavaScript. In light of this, you will need to manage HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), JavaScript, DOM (Document Object Model), SVG (Scalable Vector Graphics) and Canvas. Instead of going through a full introduction of each of them, I rather start with a template with basic functions and I will use this template as a starting point and tweak, add or modify it for different examples in the next series of blogs.

<!DOCTYPE html>
<meta charset="utf-8">

<style>

</style>

<div>

</div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

</script>


Reference:

(1). codepen || jsfiddle || jsbin, https://css-tricks.com/forums/topic/codepen-jsfiddle-jsbin/.