But I have found it to be a little hard to find some basic code that a) shows the general d3 guts and b) takes enough steps to also do something useful. So here goes.

#1 – Hello World with a Chart

First we need to set up an area to work in and load in the d3 library.

1

2

<svg class="chart"></svg>

<script src="http://d3js.org/d3.v3.min.js"charset="utf-8"></script>

Then draw the bounds and some ticks.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

varmargin={top:20,right:20,bottom:30,left:40},

width=960-margin.left-margin.right,

height=500-margin.top-margin.bottom;

varsvg=d3.select(".chart")

.attr("width",width+margin.left+margin.right)

.attr("height",height+margin.top+margin.bottom)

.append("g")

.attr("transform","translate("+margin.left+","+margin.top+")");

// setup x

varxScale=d3.scale.linear().range([0,width]),

xAxis=d3.svg.axis().scale(xScale).orient("bottom");

// setup y

varyScale=d3.scale.linear().range([height,0]),

yAxis=d3.svg.axis().scale(yScale).orient("left");

// x-axis

svg.append("g")

.attr("class","x axis")

.attr("transform","translate(0,"+height+")")

.call(xAxis)

.append("text")

.attr("class","label")

.attr("x",width)

.attr("y",-6)

.style("text-anchor","end")

.text("Maturity");

// y-axis

svg.append("g")

.attr("class","y axis")

.call(yAxis)

.append("text")

.attr("class","label")

.attr("transform","rotate(-90)")

.attr("y",6)

.attr("dy",".71em")

.style("text-anchor","end")

.text("Volatility");

And Hello Graph. Look over, play with, and consider the above code before proceeding.

#2 – Load in External Data Source using d3.js

There are a lot of posts that get into how to statically draw data onto your d3 areas, so I won’t be getting into that. But, frankly, it is a rare situation when you would manually insert your data. In production you obviously have several options on how to access your data, so I’ll look at testing using a CSV file using d3.csv.

I’ll admit that for this round, there is still going to be a bit strict typing to help demonstrate the paradigms. In a later post I’ll cover how to better dynamically read in data to make your chart reusable.

The format for d3.csv is post url, row accessor, get callback.URL is pretty straight forward, so I’ll skip that for now. Row Accessor is not as immediately obvious. Consider the code below, and the comments

1

2

3

4

5

6

7

d3.csv("./data.csv",function(d){// d is a common d3 variable for the data

return{

val1:d.firstValue,// for the most part, you can build an object using dot notation and column header value

val2:+d.secondValue,// you can convert types through a variety of ways. The '+' converts a string to a number

val3:+d["nameOfThirdValue"]// you can also use the bracket notation if the header values are funky

};

});

#3 – Use Your Call Back For Dynamic Adjustments

First, setup a few additional variables for your axis and scale information.

1

2

3

4

5

6

7

8

9

10

11

// setup x

varxValue=function(d){returnd.firstValue;},

xScale=d3.scale.linear().range([0,width]),

xMap=function(d){returnxScale(xValue(d));},

xAxis=d3.svg.axis().scale(xScale).orient("bottom");

// setup y

varyValue=function(d){returnd.secondValue;},

yScale=d3.scale.linear().range([height,0]),

yMap=function(d){returnyScale(yValue(d));},

yAxis=d3.svg.axis().scale(yScale).orient("left");

And then start doing something inside of your callback. In this example, I am really just setting the scale and axis based on the underlying data. You should notice in the xValue and yValue setup lines, d.firstValue and d.secondValue are called. This is where you want to set your axis values, mapped to your data object.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

d3.csv("./data.csv",function(d){// d is a common d3 variable for the data

return{

val1:d.firstValue,// for the most part, you can build an object using dot notation and column header value

val2:+d.secondValue,// you can convert types through a variety of ways. The '+' converts a string to a number

val3:+d["nameOfThirdValue"]// you can also use the bracket notation if the header values are funky

};

},function(error,data){

// update scales

xScale.domain([d3.min(data,xValue)-1,d3.max(data,xValue)+1]);

yScale.domain([d3.min(data,yValue)-1,d3.max(data,yValue)+1]);

// update x-axis

svg.append("g")

.attr("class","x axis")

.attr("transform","translate(0,"+height+")")

.call(xAxis)

.append("text")

.attr("class","label")

.attr("x",width)

.attr("y",-6)

.style("text-anchor","end")

.text("Maturity");

// update y-axis

svg.append("g")

.attr("class","y axis")

.call(yAxis)

.append("text")

.attr("class","label")

.attr("transform","rotate(-90)")

.attr("y",6)

.attr("dy",".71em")

.style("text-anchor","end")

.text("Volatility");

});

A small adjustment on the front end, but a big change in flexibility already.

#4 – Draw and Decorate Your Data

Once you have captured your data into the object, it becomes fairly straightforward to draw your plot points.