Learning Basic D3 Part 1

So what is D3?

Today I want to introduce you to a very useful Javascript library called D3.js (Data-Driven Documents). D3.js is a library for manipulating documents based on data. D3 gives animation and life to the data through HTML/CSS and SVG. For example, D3 can be used to create an HTML table, SVG bar chars, pie charts with beautiful animation and interactions with an array of numbers with ease! So let’s get started! On this Part1 I will show you some basic usage of Selection and Simple Data binding

About Selections

If you want to change only the first element you can use select()

d3.select("li").style("color", "red");

But how about if you want to target not the first but the second element how will you do? You will have to throw in a simple CSS3 selector into the select(). For example, if you want to change only the second element you will do it like the following! Tips: If you want to change only odd/even elements, you can do it like li:nth-child(odd) or li:nth-child(even)

d3.select("li:nth-child(2n)").style("color", "red");

Actually, like JQuery you can even change the content of the element by adding .html like the following! It’s just too useful! Don’t you think?

d3.select("li:nth-child(even)").style("color", "red").html("This is a even element");

You can also add classes by concatenating classed(‘class-name’,boolean) to the select()


Simple Data Binding

Now, I will show you how to bind a simple data to the DOM with D3 Javascript Library!

First, I’m going to show a sample of how to bind a simple array to the list

<ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
   var numArray = [12,14,25];
   d3.selectAll('.test li')
   .data(numArray)        //← We are going to pass the array data to bind
   .text(function(d){
     return 'This is array number '+d;
   })
</script>

★The result will be like the following

 ● This is array number 12
 ● This is array number 14
 ● This is array number 25

As you can see, what the above code is doing is populating the data into each corresponding li. It looks so useless, so I will show a slightly better sample!

var numArray = [12,14,25];

d3.selectAll(".test li") 
  .data(numArray) 
  .style("font-size", function(d) {
     return d + "px"; 
   });

The above code is simply binding array of numbers to li elements, you can use these numbers to compute dynamic font sizes and manipulate other styles as well! But wait, what if you added more data into the array how will the data be handled? For example, if you add more data likevar numArray = [12,14,25,50,100]; ? That is where Enter and Exit come into play.

According to D3 official website, it says that you can create new nodes for incoming data and remove outgoing nodes that are no longer needed. Simply, you can append more DOM elements even it runs out!

numArray = [12,14,25,50,100];

var li = d3.select("body") .selectAll(".test li") 
.data(numArray) 
.text(function(d) { return "I’m number " + d + "!"; });

li.enter().append("li") // this will append the li even if the DOM elements run out!
  .text(function(d) { return "Appended li:  number " + d + "!"; });
li.exit().remove();

As a last bonus let’s try changing the name of a span with D3! Just a warmup!

<p>My name is <span class="name"></span></p> 

<script>
var name = 'Michael MH';
d3.select('.name').text(name); //simply pass in the variable into the text, that is all you have to do! 
</script>

Ok, so this is all for the basic of D3 part1! If you have any question please leave me a comment! I will be covering about the graphs and charts in the part2 so stay tuned!

 

Leave a Reply

Your email address will not be published. Required fields are marked *