D3.

 

SANDRA BECKER

05|2020

 

JS

INTRO

WHAT IS

D3 .    JS


01


EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA

 

MIKE  BOSTOCK


01


DEFINITION

TOOL  

SOURCE

DEVELOPMENT

PHILOSOPHY

IDEA

 

 

CHARTING  

OPEN

COMMUNITY

VISUAL

BRILLIANT

 

 

01

 

PROPERTIES

 

01

 

ENVIORMENT

 

HTML

 

CSS

 

SVG

 

D3.JS

 

JAVASCRIPT

 

01

 

WEBPAGE

HOW TO LEARN

D3 .    JS

 

01

 

 

01

 

EXAMPLES

TUTORIALS

LEARNING PROCESS

 

01

 

BLOCKBUILDER

 

01

 

JSBIN

HTML

 

<!-- -->

CSS

 

/**/

SCRIPT

 

// or /**/

 

01

 

COMMENTS

 

01

 

STEEP LEARNING CURVE

WEB STANDARD

WEB STANDARD

HTML

 

02

 

<html>

  <head>
    <title>My first HTML</title>
        <h1>My main title</h1>
        <h2>My top level heading</h2>
        <h3>My subheading</h3>
        <h4>My sub-subheading</h4>
  </head>

  <body>
   Heya there
  </body>
  
  <p>My cat is very grumpy</p>
  <p><strong>My cat is very</strong> grumpy.</p>
  
  <ul> 
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
  </ul>
 
</html>

BASICS

 

02

 

WEB STANDARD

SVG

 

02

 

<body>
  
  <svg width="250" height="250">
      <rect x="0"   y="0"   width="100" height="100" fill="#FF0000"></rect>
      <rect x="120" y="0"   width="100" height="100" fill="#00FF00"></rect>
      <rect x="0"   y="120" width="100" height="100" fill="#0000FF"></rect>
      <rect x="120" y="120" width="100" height="100" fill="#7837A3"></rect>
  </svg>
  
</body>

SVG RECT

 

02

 

D3

SELECT

 

02

 

<body>
  
    <p>Hola Barcelona</p>
    <p>Como va con D3?</p>
    <p>My cat is <strong>very</strong> grumpy.</p>

  <script>
     d3.select("p")
       .style("color", "green");
  </script>
  
</body>

TAG SELECT

 

02

 

ID SELECT

 

02

 

<body>
  <p id="Hello"> Madrid</p>
    
  <script>
     d3.select("#Hello")
       .style("color", "green");
  </script>

</body>

SVG RECT

 

02

 

<script>
    
  var test=d3.select("body")
             .append("svg")
             .attr("width", 500)
             .attr("height", 5000);
    
  test.append("rect")
      .attr("x", 10)
      .attr("y", 50)
      .attr("width", 200)
      .attr("height", 100)
      .attr("fill", "GREY")

</script>

SVG LINE

 

02

 

<script>
    
  var width = 500;
  var height = 500;
  
  var svg = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height);
  
  svg.append("line")
     .attr("x1", 100)
     .attr("x2", 500)
     .attr("y1", 150)
     .attr("y2", 450)
     .attr("stroke", "black")
  
</script> 

SVG CIRCLE

 

02

 

<script>
    
    var width = 500;
    var height = 500;

    var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
 
    svg.append("circle")
       .attr("cx", 0)
       .attr("cy", 0)
       .attr("r", 50)
    
</script>

WEB STANDARD

CSS

 

02

 

SELECT TAG

 

02

 

<style>

text {
   font-size: 2em;
}

</style>  

<body>
  
<svg width="300" height="250">
  <text x="50" y="50">Hello SVG Text!</text>
</svg>
  
</body>

SELECT TAG

 

02

 

<style>
  
strong {
   background-color: red;
   font-size: 300%;
}
  
</style>

<body>
   Hi <strong> how are you today? </strong>
</body>

FONTS

 

02

 

JAVASCRIPT

JS

VARIABLES

 

03

 

 

03

 

var value = 12.3467; 
console.log(value);

var active = true;
console.log("Is this really", active);

var text = "33.5"; 
console.log(text);

var IntoNumber = +"33.5";
console.log(IntoNumber);

JS

ARRAY

 

03

 

 

03

 

var Array = [ 5, 10, 15, 20, 25 ];
console.log(Array [2]) 
  
var AddArray = Array.push(5);
console.log(AddArray);
  
var SortArray = Array.sort((a, b) => b-a);
console.log(SortArray);
  
var ShortArray = Array.pop();
console.log(ShortArray);

JS

OBJECTIVE

 

03

 

 

03

 

var fruta = {type:"uva", color:"rojo", cantidad:12, dulce:true};

console.log(fruta);
console.log(fruta.type);

JS

FUNCTIONS

 

03

 

 

03

 

function square (x) {return x * x;}
console.log(square(5)); 
  
let myNumbers = [1, 2, 3, 4];
myNumbers = myNumbers.map(function(d){return d*2;});
console.log(myNumbers);
  
function numberFunction(myNumber) {
if (myNumber < 10) {return myNumber;} else {return myNumber * myNumber;}}
console.log(numberFunction(30));

BASICS

 

04

 

CONNECT

LIBRARY

 

04

 

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

ONLINE

 

04

 

D3

SELECTION

 

04

 

svg.append("rect")
   .attr("x",0)
   .attr("y",0)
   .attr("width",500)
   .attr("height",500);

svg.append("circle")
   .attr("cx",250)
   .attr("cy",250)
   .attr("r",150);
  
svg.append("line")
   .attr("class","line1")
   .attr("x1",100)
   .attr("x2",100)
   .attr("y1",  0)
   .attr("y2",500);
rect{
  fill:none;
  stroke:#f5fa91;
  stroke-dasharray:2;
}
  
circle {
  fill:#f5fa91;
  opacity:1;
}  
  
line {
  stroke:#8ff798;
  stroke-width:200;
  opacity:0.6;
}

SCRIPT

CSS

 

04

 

 

04

 

DATA

BINDING

 

04

 

var data=[0.1, 1.5, 2.5, 3.5, 4.5];

svg.selectAll("rect") 
   .data(data) 
   .enter()
   .append("rect")
   .attr("x",d=>d*100) 
   .attr("y",50) 
   .attr("width", 150) 
   .attr("height",150);

SCRIPT

 

04

 

 

04

 

DATA

LOADING

 

04

 

d3.csv("https://gist.githubusercontent.com/sandravizmad/f269cff704036fbdeb9b376a478a6c62/raw/c996153d4040ead266f1e16fd75ba493ffed682e/Tax%2520revenue%2520by%2520country%25202018", 
       function(d){ 

svg.selectAll("circle")
   .data(d)
   .enter()
   .append("circle")
   .attr("r", 12)
   .attr("cx",d=> d.Percent_GDP*7)
   .attr("cy",d=> d.MLN_USD/12); 

SCRIPT

 

04

 

 

04

 

DATA

SCALING

LINEAR MAPPING  BETWEEN A CONTINUOUS DOMAIN & RANGE

D3.SCALE.LINEAR

 

04

 

 

04

 

DOMAIN

RANGE

10

100

50

500

 

04

 

var x=d3.scale.linear()
        .domain([0.5,4.5])   
        .range([0,200]); 
  
var y=d3.scale.linear()
        .domain([0.5,4.5])   
        .range([50,200]);

 

04

 

 

04

 

	var x=d3.scaleLinear()
		.domain([0,d3.max(data,d=> d[0])])
		.range([0,w]);

	var y=d3.scaleLinear()
		.domain([0,d3.max(data,d=> d[1])])
		.range([h,50]);

	var r=d3.scaleSqrt()
		.domain(d3.extent(data,d=> d[1]))
		.range([20,100]);
  
	var c=d3.scaleLinear()
    		.domain(d3.extent(data,d=> d[1]))
    		.range(["#f5fa91","#8ff798"]);

 

04

 

 

04

 

var cnew=d3.scaleSequential(d3["interpolate"+buttonValue])
           .domain([0,w]);

 

04

 

 

04

 

D3

AXIS

 

04

 

<G>

<LINE>

<PATH>

<TEXT>

THE D3 AXIS COMPONENT CONSIST OF 4 ELEMENTS

 

04

 

svg.append("g")
   .attr("class","y-axis")
   .attr("transform",`translate(0,${0})`)
   .call(d3.axisLeft()
           .scale(y)
    	   .ticks(5)
           .tickSize(-w)
           .tickPadding(20));

 

04

 

.y-axis text {
  font-family:'Montserrat Alternates', sans-serif;
  font-family:'Poiret One', cursive;
  font-weight:100;
  font-size:16px;
  opacity:1;
  fill:#acfff8;
}

.y-axis path {
  fill:none;
  stroke-width:6;
  stroke-opacity:0.5;
  stroke:#acfff8;
}

.y-axis line {
  fill:none;
  stroke-width:2;
  stroke-opacity:1;
  stroke:#acfff8;
  stroke-dasharray:1;
}

 

04

 

 

04

 

MARGIN

CONVENTION

 

04

 

	var m={top:100,right:50,bottom:0,left:30}
	ow=500
	oh=500
	iw=ow-m.left-m.right,
	ih=oh-m.top-m.bottom,
	p={top:50,right:30,bottom:30,left:30}
	w=iw-p.left-p.right,
	h=ih-p.top-p.bottom;
  
	var svg=d3.select("body")
		.append("svg")
		.attr("width",ow+m.left+m.right)
		.attr("height",oh+m.top+ m.bottom)
		.append("g")
		.attr("transform",`translate(${m.left},${m.top})`);

 

04

 

 

04

 

 

01 DEFINE THE MARGIN OBJECT

02 WIDTH AND HEIGHT

03 SVG CONTAINER AS GROUP ELEMENTS BASED ON THE MARGINS  

 

MARGIN CONVENTION

 

04

 

BAR

CHARTS

 

04

 

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr("x",(d,i)=> x(i))
   .attr("width",x.bandwidth()) 
   .attr("y",d=> y(d.Value))
   .attr("height",d=>h-y(d.Value));

 

04

 

svg.selectAll("text")
   .data(data)  
   .enter()
   .append("text") 
   .text(d=> d.LOCATION)   
   .attr("x",(d,i)=> x(i)+3) 
   .attr("y",h-8); 

 

04

 

 

04

 

svg.selectAll(".bar")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "bar")
   .attr("x", d => x(d.LOCATION))
   .attr("width", x.bandwidth())
   .attr("y",d=> y(d.Value))
   .attr("height",d=> h-y(d.Value));

 

04

 

 

04

 

var bar=svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("transform",(d,i)=>`translate(0,${i*18})`);
           
bar.append("rect")
   .attr("width",d=> x(d.Value))
   .attr("height",17)
   .attr("class","bars");

 

04

 

 

04

 

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .style('fill',d=>c(d.Value))
   .attr('width',x.bandwidth())
   .attr('x',d=>x(d.LOCATION))
   .attr("y",d=>y(d.Value))
   .attr("height",d=>h-y(d.Value))

 

04

 

 

04

 

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr('class','bar')
   .attr("x", d=>x(d.LOCATION))
   .attr("width",x.bandwidth()) 
   .attr("y",d=>{if(+d.Value<0){return h/2;}
		else{return y(+d.Value);}})
   .attr("height",d=>h/2-y(Math.abs(+d.Value))) 
   .attr("fill",d=>{if(+d.Value>=0){return c(d.Value);}
		else{return c2(d.Value);}})});

 

04

 

 

04

 

SCATTER

PLOT

 

04

 

svg.selectAll("circle")
   .data(data) 
   .enter() 
   .append("circle")
   .attr("cx",d=> x(d.carat))  
   .attr("cy",d=> y(d.price))
   .attr("fill",d=> c(d.price))
   .attr("r",0.7);

 

04

 

 

04

 

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx",d=> x(d[xCol]))
   .attr("cy",d=> y(d[yCol]))
   .attr("r",d=> r(d[rCol]))
   .attr("fill",d=> c(d[colorCol]))
   .attr("stroke",d=> c(d[colorCol]));

 

04

 

 

04

 

svg.selectAll("filter")
    .data(d3.nest()
    	    .key(d=>d.region)
    	    .entries(data))
    .enter()
    .append("filter")
    .attr("width","300%")
    .attr("x","-100%")
    .attr("height","300%")
    .attr("y","-100%")
    .attr("id",d=>d.key+"glow")
    .append("feGaussianBlur")
    .attr("stdDeviation",4.5);

svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform",d=>`translate(${x(d[user15])},${y(d[change])})`)
   .append("circle")
   .attr("r",d=>r(d[pop]))
   .attr("fill",d=>c(d[pop]))
   .style("filter",d=>{return"url(#"+d.region+"glow)"});

 

04

 

ANIMATION

WHY

ANIMATE

 

05

 

05

 

05

 

05

D3

TRANSTION

 

05

.ease()

 

05

 

05

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .style("fill","#f5fa91")
   .transition()
   .duration(2000)
   .ease("bounce")
   .style("fill","#8ff798")
   .attr("cx",(d,i)=>i*80)
   .attr("r",d=>d*2)
   .attr("cy","10%");

 

05

 

05

svg.selectAll(".bar")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "bar")
   .attr("x",d=>x(d.letter))
   .attr("width", x.rangeBand())
   .attr("y",470)
   .attr("height",d=>h-470)
   .transition()
   .duration(1000)
   .attr("y",d=>y(d.frequency))
   .attr("height",d=>h-y(d.frequency));

 

05

 

05

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr('class', 'bar')
   .attr("fill",d=> c(d.Value))
   .attr("x", d=> x(d.LOCATION))
   .attr("width", x.bandwidth())
   .attr("y",d=>h)
   .attr("height",0)
   .transition()
   .duration(400)
   .delay((d,i)=> i*200)
   .attr("y",d=> y(d.Value))
   .attr("height",d=> h-y(d.Value));

 

05

 

05

d3.select("#start")
  .on("click",function() {
  
rect
  .transition()  
  .attr("x",0)
  .attr("y",30)
  .attr("width",50)
  .attr("height",50)
  .attr("fill", "white")
});

 

05

 

05

d3.select("#start")
  .on("click",function() {
 
data = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10, 13, 19, 21, 25, 22, 18, 15, 13];

svg.selectAll("rect")
   .data(data) 
   .transition()	 
   .ease(d3.easeLinear) 
   .duration(1500) 
   .delay(100)
   .attr("y",d=> y(d))
   .attr("height",d=> h-y(d));

svg.selectAll("text")
   .data(data)
   .transition()
   .ease(d3.easeLinear)          	
   .duration(1500)
   .delay(100)          	
   .text(d=> d)
   .attr("x",(d,i)=>x(i) + x.bandwidth()/2)
   .attr("y",d=> y(d)+14);
					   				
});

 

05

 

05

d3.select("#start")
  .on("click", function() {
 
d3.csv('https://gist.githubusercontent.com/sandravizmad/8e50af53c013d57ce3cdb4c07a42f6e0/raw/d983b9517212f95036db77a8396c5a61f2493e3d/OECD%2520BUILT%2520UP%2520AREA%2520by%2520country%25202014', prepare, function(data) {
     
data.sort((b,a)=> {return a.Value - b.Value;});
  
var c=d3.scaleLinear().domain([0,550]).range(["#f5fa91","#8ff798"]);  
var x=d3.scaleBand().domain(data.map(d=> d.LOCATION)).rangeRound([0,w]).paddingInner(0.05);
var y=d3.scaleLinear().domain([0,550]).rangeRound([h,0]);

svg.select(".x-axis")
   .transition()
   .duration(1000)  
   .call(d3.axisBottom().scale(x).ticks(5))
   .attr("transform",`translate(0,${h})`);   
  
svg.selectAll('rect')
   .data(data)  
   .transition()
   .duration(2000)
   .delay(1000)
   .attr("y",d=> y(d.Value))
   .attr("height",d=> h-y(d.Value))
   .attr("fill",(d)=> c(d.Value)); 
  
}) 

 

05

 

05


d3.select("#start")
  .on("click", function() {
  

EVERYTHING THAT IS AFFECTED BY CLICKING THE BUTTON INSERT HERE 

  
};

 

05

ANIMATED

SCATTER     PLOT

 

05

 

05

svg.selectAll("circle")
   .data(data) 
   .transition()
   .duration(1000)		
   .attr("cx",d=> x(d[0]))
   .attr("cy",d=> y(d[1]))
   .attr("r",d=> r(d[0])) 
   .attr("fill",d=> c(d[0])) 
                     

svg.select(".x-axis")
   .transition() 
   .duration(2000)
   .call(d3.axisBottom()
	.scale(x)
	.ticks(3)
	.tickSize(-h));
					

svg.select(".y-axis")
   .transition()
   .duration(2000)
   .call(d3.axisLeft()
	.scale(y)
	.ticks(3)
	.tickSize(-w)); 

 

05

GENERATORS

 

06

D3

LINE

 

06

var line=d3.line()
           .x(d=>x(d.TIME))
           .y(d=>y(d.Value));

svg.selectAll(".line")
   .data(country)
   .enter()
   .append("path")
   .attr("class","line")
   .attr("d",d=> line(d.values));

SCRIPT

.line {
   fill:none;
   stroke-width:0.3px;
   opacity:0.8;
   stroke-dasharray:2;
}

CSS

 

06

 

06

.line {
   fill:none;
   stroke-width:0.3px;
   opacity:0.8;
   stroke-dasharray:2;
}
  
.line2 {
   fill:none;
   stroke-width:4px;
   stroke-dasharray:1;
}
 
.end-label1, .end-label2, .end-label3 {
  font-family:'Montserrat Alternates', sans-serif;
  font-family:'Poiret One', cursive;
  font-size: 10px;
  font-variant: small-caps slashed-zero;
}
  
.end-label1 {
  fill:white;
}
  
.end-label2 {
  fill:#f5fa91;
}
  
.end-label3 {
  fill:#8ff798;
}

CSS

 

06

.line {
   fill:none;
   stroke-width:0.3px;
   opacity:0.8;
   stroke-dasharray:2;
}
  
.line2 {
   fill:none;
   stroke-width:4px;
   stroke-dasharray:1;
}
 
.end-label1, .end-label2, .end-label3 {
  font-family:'Montserrat Alternates', sans-serif;
  font-family:'Poiret One', cursive;
  font-size: 10px;
  font-variant: small-caps slashed-zero;
}
  
.end-label1 {
  fill:white;
}
  
.end-label2 {
  fill:#f5fa91;
}
  
.end-label3 {
  fill:#8ff798;
}

SCRIPT

 

06

 

06

 

06

D3

AREA

 

06

 

06

 

06

 

06

 

06

 

06

 

06

INTERACTION

D3

NEST

 

07

WHY

INTERACT

 

07

NAVIGATE

IDENTIFY

COMPARE

REDUCE

 

07

 

07

 

07

D3

EVENT

 

07

 

07

 

07

 

07

SMALL

MULTIPLE

 

07

 

07

 

07

 

07

 

07

 

07

 

07

SETUP

ONLINE

 

07

 

D3.V3

 

 

D3.V4

 

 

D3.V5

 

VERSIONS

 

07

 

python -m SimpleHTTPServer

 

LOCALHOST

 

07

 

DOWNLOAD THE LIBARY/IES

MOVE THE LIBARY INTO YOUR WORKING FOLDER

CONNECT TO A LOCALHOST

 

 

WORKING OFFLINE

 

07

ADVANCED

 

08

 

08

VISUALLY CLUSTERS

THE MOST POPULAR AREAS

ON A SCATTERPLOT

BY USING A CONTINUOUS

COLOR OR SIZE SCALE

RAW

 

08

 

08

 

08

BEESWARM

CHART

 

08

DISTRIBUTES ELEMENTS

HORIZONTALLY

AVOIDING OVERLAP

BETWEEN THEM

AND ACCORDING TO

A SELECTED DIMENSION

 

 

 

08

RAW

 

08

 

08

 

08

 

08

HORIZON

CHART

 

08

 

08

IT COMBINES POSITION

AND COLOR

TO REDUCE VERTICAL SPACE

 

 

 

RAW

 

08

 

08

OBSERVABLE

 

09

DANKE