DEV Community: Sai Kiran

D3js fundamentals Part 5 Joins And Enter/Exit

Sai Kiran — Sun, 16 Feb 2020 17:17:16 +0000

Last article we learnt about scales which help in converting our data as data point for svg.

D3js fundamentals Part 4 Scales

Sai Kiran ・ Nov 22 '19

Data visualization means working with data. We want to access the data we want in efficient way. Joins helps us to bind data to the DOM element in efficient way.

To join data to DOM you just need to call .data() on the selected d3 element and pass your data as parameter. In the below example we have 5 circles elements. Select all the elements and call .data() by passing the data to it.

.data() function will loop through the data and will bind data to each node one by one. Press F12, reload the page and check the logs. You will find the list of nodes that we selected and expand the first element scroll down to bottom where you can see __data__ which has the respective data bonded to the element which you can access whenever you select that particular element.

If you have observed or not, our data is only 4 in length but we have bonded that data to 5 selected elements. Check the fifth element from the same logs, there will be no __data__ property to it.
D3 gives us easy way to adjust the DOM elements to the data with the help of .enter() function for adding data and .exit() function for removing the data. Both fucntions returns the extra data but .enter() followed by .append() will add extra elements and .exit() followed by .remove() will remove the extra elements.

Remove Example

Append example

Every function will get the bonded data as the call back parameter with which we can do verity for tricks. Like changing the values of its attributes and css properties.

In the example below we are changing the fill color of the circle elements based on its radius. If it is less than 35 its fill color should be of red and otherwise orange. Note here that condition applies to only extra elements as we used the condition after the enter statement. We need again select all the circles in order to make the condition for all.

D3js fundamentals Part 4 Scales

Sai Kiran — Fri, 22 Nov 2019 15:32:14 +0000

Last article we learnt about path data.

D3js fundamentals Part 3 SVG Path

Sai Kiran ・ Nov 22 '19

#javascript #webdev #d3js #tutorial

As I wrote in the last article, it is not necessary to learn about the path data if you want to learn d3js, you can skip that part as it sometimes become too confusing to pickup the concepts and it just helps you in understanding what goes on in the background when you make a path.

If you see in this example, We have used data to match our svg width and height, like we used data 100,100 to start from point 100,100 of the svg but we will never be getting data that can match. Some data may be in floating point , some may be in long int, some in date format etc. Here comes the Scales in d3js to solve this problem. D3js have some neat features to play with data.

Lets see the simplest example

`d3.scaleLinear()`

In the above example we converted marks to percentages, simply means we took a range of values and fitted it into 0 to 100 range. This we use to fit our range of data, fit into width or height range of the svg. Look at this example

We took a different set of data that wouldn't fit in our svg and then scaled it to fit in.

This is our data

let data = [
       {x:-60,y:1120},
       {x:50,y:400},
       {x:160,y:220},
       {x:190,y:280},
       {x:330,y:360},
       {x:420,y:80},
       {x:560,y:560},
       {x:620,y:120},
       {x:930,y:700},
       {x:1120,y:-60}
     ]

In the previous article example we have just passed the data directly to the line generator but in this example our data is very different, so we have to define accessor to the line generator for x and y values like this

let lineGenerator = d3.line()
                      .x(d => d.x)
                      .y(d => d.y)

Line generator will loop through the data array to get x and y values as returned by the accessor function .x(d => d.x).y(d => d.y) and then generate path data. In order to fit in the data to svg, data needs to scaled accordingly. We have to scale it before it gets passed to the x and y values.
First we initialize the scale by passing the smallest and largest value to domain and 0 to width or height of the svg to range, when the value gets passed it return the appropriate points on the svg.
Lowest point in our svg is -60 and largest value is 1120 which can be passed to domain and svg width is 500px which can be passed to range.

let scale = d3.scaleLinear()
                      .domain([-60, 1120])
                      .range([0, 500])

and convert data

let lineGenerator = d3.line()
                      .x(d => scale(d.x))
                      .y(d => scale(d.y))

We can get min and max values of the given data with the help of d3.extent(data, accessor), it will return an array. To get single minimum or maximum value use d3.min(data,accessor) and d3.max(data,accessor). You can know more about the array method in d3js here d3-array

There are 12 types of scaling in d3js which are classified into 3 types

Continuous input and continuous output
- d3.scaleLinear()
Continuous input and discrete output
- d3.scaleQuantize()
- d3.scaleQuantile()
- d3.scaleThreshold()
Discrete input and discrete output
- d3.scaleOrdinal()
- d3.scaleBand()
- d3.scalePoint()

You can learn about them here d3-scale

D3js fundamentals Part 3 SVG Path

Sai Kiran — Fri, 22 Nov 2019 15:30:02 +0000

In the last article we learnt about svg, svg shapes and basic line generator using d3js and why path is used for generating lines.

D3js fundamentals Part 2 SVG

Sai Kiran ・ Nov 19 '19

#javascript #webdev #d3js #tutorial

In this article we will learn about path data and how we can make any shape we want with it. It is not necessary to learn about the path data if you want to just learn d3js, you can skip this part as this sometimes become too confusing to pickup the concepts and it just helps you in understanding what goes on in the background when you make a path.
Lets take a simplest example making a line

The data we passed to path is M100,100 L400,400.
Path data always starts with M means move, from which point you want to start drawing, every co-ordinate take two point x and y. We gave M100,100 which starts from 100,100 co-ordinates of the svg. There is also lowercase m which moves according to its relative parent instead of svg. After that we have L400,400 representing line and its co-ordinates, line is drawn from the start point of M or m. Lower case l takes points from its parent instead of svg.

Similarly we have

Move M m
Line L l
Horizontal H h => To draw a line horizontally
Vertical V v => To draw a line Vertically
Close path Z => joins the start and end points with a line

Here are some examples of Horizontal, Vertical and Close Path

And to make curves we have, I have built some visualizers to make it easy to understand. Play with the slider and see which values effects which part of the curve.

Cubic Bézier
- C, c
- S, s
Quadratic Bézier
- Q, q
- T, t
Elliptical arc
- A, a

https://dev.to/saikiran/d3js-fundamentals-part-4-scales-18og

D3js fundamentals Part 2 SVG

Sai Kiran — Tue, 19 Nov 2019 07:20:38 +0000

In the last article,

D3js fundamentals Part 1

Sai Kiran ・ Nov 17 '19 ・ 2 min read

#javascript #webdev #d3js #tutorial

We have gone through set-up, selections and append(updated) in d3js. This article we will learn svg elements. Scalable Vector Graphics(SVG) is the building blocks of 2D data visualization on the web. It is an XML-based markup language for describing two dimensional based vector graphics. SVG has now become mainstream and widely supported.

Lets create a svg with tag <svg></svg>
By default svg takes up 300px width and 150px height if not declared. You can declare width and height either as attributes or style element.
ex: <svg width="500px" height="500px"></svg>

click on HTML, CSS or JS tabs to look at the code

Now think of svg as 500x500 pixel grid where we will place elements using these grid co-ordinates.
Lets try to make basic shapes onto SVG

Line

A line requires 2 points start and end, start as x1,y1 and end as x2,y2.
Any element in svg needs to have a stroke color in order to show up on the screen
ex: <line x1="100" y1="100" x2="400" y2="400" stroke="black"/>

click on HTML, CSS or JS tabs to look at the code

Creating a line with d3

**`d3.line()`**

click on HTML, CSS or JS tabs to look at the code

We initialize a line generator using d3.line() and then call it by passing our data to it. Line generator will loop through the data array to get x and y values and then generate path data. Which we can pass to d attribute of path. We will learn more about line generators in coming articles.

Now you may be wondering why we have appended a path instead of line. So basically path can take up any shape, so people at d3 used path for most of the elements to make it less complex. I showed the example of <line> tag to make it easy to understand how things are placed in SVG.

Click on edit on codepen on top right corner of the codepen example and un-comment the second data variable and comment out first data variable and check how the line is shaped, which we cannot achieve with the single line tag.

While building data visuals, there will be times where you want to statically place shapes for which you dont need a generator function. So its better to know the basic shapes.

There are 6 shape tags in svg

Line -> <line x1="0" y1="0" x2="200" y2="200" />
Rectangle -> <rect x="50" y="20" width="150" height="150" >
Circle -> <circle cx="50" cy="50" r="50"/>
Ellipse -> <ellipse cx="200" cy="80" rx="100" ry="50" />
Polygon -> <polygon points="220,10 300,210 170,250 123,234" />
Polyline -> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />

and

Path -> which can take up any shape, Which we will discuss further

and

Group -> <g> Its like a div for svg, which is used to grouping multiple elements and manipulating.
Text -> <text x="0" y="15" >I love SVG!</text> is used to place text

There are many elements for SVG. If you want to know more about SVG shapes, head on to MDN SVG elements

d3js also provide basic shape generator
Which you check out here

In next article we will go details about how path works.

D3js fundamentals Part 1

Sai Kiran — Sun, 17 Nov 2019 10:56:57 +0000

If you know jQuery, it makes manipulating and working with DOM elements very easy. Think of D3js as jQuery made for data which makes manipulating the DOM according to data super easy. D3js also comes with vitalization specific features which will we go through another series of articles. This article is to get a knowledge on D3js fundamentals.

Pre-requisites :

HTML
CSS
Javascript

SetUp

<script src="https://d3js.org/d3.v5.min.js"></script> CDN way
NPM way npm install d3

We will stick to CND way for the sake of keeping it simple to make beginners understand easily. Just include the script tag inside the head of your html file and you are good to go.

1.Selection

d3.select("selection query")
d3.selectAll("selection query")

Open console by pressing f12, there will be logs of the selections at the end.

click on HTML, CSS or JS tabs to look at the code

Most of the functions in d3js returns the context, that means you can chain your functions one after the other, You will see such chaining in next examples.

2.DOM Manipulation

Styling
- d3.select("*selection query*").style("color","red")
Attributes
- d3.select("*selection query*").attr("width","20%")
Switching Classes
- d3.select("*selection query*").classed("active","true")
Inner Text
- d3.select("*selection query*").text("Some Text")
Inserting HTML
- d3.select("*selection query*").html("<div class="block"></div><div>0 - 10</div>")
Changing Properties
- d3.selectAll('.checkbox').property('checked', false)
Appending Elements
- d3.select("*selection query*").append("*tag*")

Next article we will go through SVG fundamentals

D3js fundamentals Part 2 SVG

Sai Kiran ・ Nov 19 '19 ・ 3 min read

#javascript #webdev #d3js #tutorial

Number.isNaN is not isNaN.

Sai Kiran — Thu, 03 Oct 2019 04:36:20 +0000

Came across some interesting Tip for JavaScript developers.

#JavaScript tip for today:

Number.isNaN is not isNaN.

Wait, what?!

Yes, the global isNaN returns true for some unexpected values ({}, "hello", undefined), while Number.isNaN will only return true for the actual NaN. pic.twitter.com/b0CftzrIGB
— Tomek Sułkowski (@sulco ) October 2, 2019

My Very First JavaScript Khan Academy Challenge

Sai Kiran — Tue, 01 Oct 2019 10:51:00 +0000

5 years ago when I was just getting into programming world, I started with khan academy JavaScript. One of the challenge i got was to design a character.
I thought of making something unique and searched kids drawing on google and found this frog image and started working my way through.

After Completing the frog, I wanted to make it a little interactive.

View the project here

var draw = function() {
   background(1, 0, 5);
   textSize(17);
   fill(97, 143, 125);
   text("The only limit is your imagination", 30, 82);
   var positionF = pmouseX;
   var eyeY = pmouseY;
   var eyeSize = 100;
   var eyeBall1 = 70;
   var eyeBall2 = 50;
   var eyeBall3 = 35;
   var eyeBall4 = 15;
   stroke(7, 61, 2);
   strokeWeight(5);
   fill(45, 135, 27);
   ellipse(positionF,eyeY+80,278,200);// face
   ellipse(positionF-75,eyeY,eyeSize,eyeSize);// left eye
   ellipse(positionF+75,eyeY,eyeSize,eyeSize);// right eye
   strokeWeight(2);
   fill(247, 250, 250);
   ellipse(positionF-80,eyeY,eyeBall1,eyeBall1);//eyeball 1 white
   ellipse(positionF+80,eyeY,eyeBall1,eyeBall1);//eyeball 1 white
   noStroke();
   fill(16, 204, 54);
   ellipse(positionF-76,eyeY+5,eyeBall2,eyeBall2);//eyeball 2 light green
   ellipse(positionF+76,eyeY+5,eyeBall2,eyeBall2);//eyeball 2 light green
   fill(0, 0, 0);
   ellipse(positionF-80,eyeY+10,eyeBall3,eyeBall3);//eyeball 3 black
   ellipse(positionF+80,eyeY+10,eyeBall3,eyeBall3);//eyeball 3 black
   fill(252, 249, 249);
   ellipse(positionF-89,eyeY+3,eyeBall4,eyeBall4);//eyeball 4 white
   ellipse(positionF+89,eyeY+3,eyeBall4,eyeBall4);//eyeball 4 white
   //face dots
   stroke(208, 219, 123);
   strokeWeight(10);
   point(positionF+17,eyeY+44);
   strokeWeight(7);
   point(positionF+36,eyeY+64);
   strokeWeight(10);
   point(positionF+-36,eyeY+61);
   strokeWeight(9);
   point(positionF+-11,eyeY+59);
   strokeWeight(12);
   point(positionF+-1,eyeY+33);
   strokeWeight(8);
   point(positionF+-24,eyeY+83);
   //Smile
   noFill();
   stroke(0, 0, 0);
   strokeWeight(10);
   arc(positionF,eyeY+40,227,208,34,146);
   strokeWeight(7);
   arc(positionF+182,eyeY+40,206,190,137,154);
   arc(positionF-182,eyeY+40,206,190,29,43);
   fill(86, 230, 14);
   textSize(39);
   text("Kiran Animations inc.", 30, 53);


    eyeSize = eyeSize+1;
};

Another work