DATA 

DRIVEN 

DOCUMENTS

COMMUNITY DEVELOPMENT

 

 

INTRO

 

 

 

SESSION01

 

"EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA ."

MIKE BOSTOCK

SESSION01

 

 

CHARTING TOOL  

OPEN SOURCE

COMMUNITY DEVELOPMENT

VISUAL PHILOSOPHY

BRILLIANT IDEA

TOP 10 GITHUB

 

SESSION01

 

+

=

SESSION01

 

SESSION01

 

&

D3.V5

 

&

D3.V4

 

 

D3.V3

 

SESSION01

 

HOW TO LEARN?

SESSION01

 

 

EXAMPLES

 

TUTORIALS

SESSION01

 

SESSION01

 

SESSION01

 

HTML

<!>

CSS

/**/

SCRIPT

// or /**/

YOU HAVE TO SAY SOMETHING

SESSION01

 

SESSION01

 

SESSION01

 

CLICK ME

MIKE

PHIL

KAI

IAN

NADIEH

MICAH

ROMAIN

ADAM

MIKE

JEREMY

D3

TOM

SAHIL

LARS

DAVID

IAN

SESSION01

 

JOIN

 

 

 

THE GLOBAL     COMMUNITY

 

 

 

D3

 

 

 

SESSION01

 

WEB

 

 

 

SESSION02

 

HTML

 

 

 

SESSION02

 

SESSION02

 

<!DOCTYPE html>
<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>

SESSION02

 

DOM

 

 

 

SESSION02

 

D3select
D3selectAll

SESSION02

 

<!doctype html>

<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <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>
</html>

 

TAG

*V4*

SESSION02

 

SVG

 

 

 

SESSION02

 

 

RECT

<!DOCTYPE html> 

<html>
    <head>
        <meta charset="utf-8"> <title>SVG Example</title>
    </head> 
    <body>
        <svg>
        <rect width="100" height="100"></rect>
        </svg>
    </body> 
</html>

SESSION02

 

E01

Create 4 rect with the size of 100*100 and the color #7b3294.
The position of the first rect is 0,0 of the second 0,50, of the 3. 50,0 and the 4. 50,50.

The opacity starts in 0.2 and increase by 0.2, so that the 4. rect has a opacity of 0.8.

 

SESSION03

 

SESSION02

 

<script>

    var width = 500;
    var height = 500;

//Create SVG element
  
   var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

//Create and append rectangle element
    
  svg.append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", 200)
            .attr("height", 100)

</script>  

 

RECT

*V4*

SESSION02

 

 

LINE

*V4*

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

  //Create SVG element
  
   var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

  //Create and append line
  
    svg.append("line")
            .attr("x1", 100)
            .attr("x2", 500)
            .attr("y1", 50)
            .attr("y2", 250)
            .attr("stroke", "black")
</script> 

SESSION02

 

 

CIRCLE

*V4*

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

    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

    //Append circle 
    svg.append("circle")
       .attr("cx", 250)
       .attr("cy", 50)
       .attr("r", 50)
</script>

SESSION02

 

E02

Add a SVG element to the body

Create 3 rect with the following properties

1. One: position: 100/100, size: 100, 20, color: red

2. Second: position: 100/120, size: 100, 30, color: yellow

3. Third: position: 100/150, size: 100, 20, color: red

 

SESSION03

 

CSS

 

 

 

SESSION02

 

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
   
    <style>

      text {
        font-size: 2em;
      }

    </style>
  </head>
  <body>

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

  </body>
</html>

SESSION02

 


<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            strong {
                background-color: red;
                font-size: 300%;
            }
        </style>
    </head>

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

 

TAG

SESSION02

 

 

CLASS


<!DOCTYPE html>
<html lang="en">
    <head>
       <style>
        .important {
            font-weight: bold;
        }

        .footnote {
            font-size: 75%;
        }
    </style>
    </head>
<body>

<div class="important">Some text</div>
<div class="footnote">Some other text</div>
<div class="important footnote">And this is an important footnote!</div>

</body>

SESSION02

 

SESSION02

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Example</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet">

    <style>
      .my-text {
        font-size: 3em;
        font-family: 'Raleway Dots', cursive;
        fill:#40E0D0;
      }
      body {
        background-color:black;
      }
    </style>

 </head>
  <body>
    <svg width="1200" height="600">
      <text class="my-text" x="0" y="100">What is a visual encoding again?</text>
    </svg>
  </body>
</html>

 

FONTS

SESSION02

 

E03

Create three text elements using SVG

Use the class attribute to group them under one name.

Change their font size and color by using CSS.

Apply one style from this webpage https://fonts.google.com

 

SESSION03

 

  body { 
    background: #4a1486;
    }   
    #lights {
     width:800px
    }    
    .bulb {
      width: 50px;
      height: 50px;
      display: inline-block;
      float: left;
      margin: 15px 10px;
      border-radius: 50% 2px;
      transform: rotate(-45deg);
    }   
    .bulb:nth-child(odd) {
      background: #6bf5ff;
      opacity: 1;
      box-shadow: 1px 1px 15px #6bf5ff, -1px -1px 15px #6bf5ff;
      animation: bulb-pulse-1 0.9s linear 0s infinite alternate;
    }   
    .bulb:nth-child(even) {
      background: #d8ff19;
      opacity: 1;
      box-shadow: 1px 1px 15px #d8ff19, -1px -1px 15px #d8ff19;
      animation: bulb-pulse-2 0.9s linear 0s infinite alternate;
    }   
    @keyframes bulb-pulse-1 {
      from {box-shadow: 1px 1px 15px #6bf5ff, -1px -1px 15px #6bf5ff; }
      to { box-shadow: none; opacity: .3;}
    } 
    @keyframes bulb-pulse-2 {
      from { box-shadow: none; opacity: .3;}
      to {box-shadow: 1px 1px 15px #d8ff19, -1px -1px 15px #d8ff19; }
    }

SESSION02

 

JS

 

 

 

SESSION03

 

VARIABLE

 

 

 

SESSION03

 

var number = 5;
var value = 12.3467; 
var active = true;
var text = "Crystal clear" 

console.log(number);

SESSION03

 

SESSION03

 

ARRAY

 

 

 

SESSION03

 

var numbers = [ 5, 10, 15, 20, 25 ];

console.log(numbers [2]) 

OBJECT

 

 

 

SESSION03

 

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

console.log(fruta);

SESSION03

 

FUNCTION

 

 

 

SESSION03

 

function square (x) {return x * x;}

console.log(square(5));

SESSION03

 

E04

Create the array (see below)

First call the total array in the console log

Then call the first city and check if it is bonito.

Check the number of residents in Cologne.

 

var ciudades = [
{ nombre: "Sao Paulo", habitantes: 12, bonito: true}, 
{ nombre: "Madrid", habitantes: 6, bonito: true},
{ nombre: "Koeln" , habitantes: 1, bonito: true}
];

SESSION03

 

E05

Calculate the BMI of the following two persons

Remember the BMI is calculated by x/(y*y)

 

SESSION03

 

var personas = [{ x: 60, y: 1.60}, { x: 70, y: 2.00},]; 

JSON

 

 

 

SESSION03

 

SESSION03

 

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

D3 BASICS

 

 

 

SESSION04

 

SETUP

 

 

 

SESSION04

 

SESSION04

 

<script src="//d3js.org/d3.v3.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

 

ONLINE

SELECTIONS

 

 

 

SESSION04

 

SESSION04

 

<style>
	rect{fill: #FCE33E}
  circle{fill: #A6C9B1}
  body {background-color: #E0DDDA }
	text {
    font-size:70px; 
    font-family: "Trebuchet MS", Verdana, sans-serif;
    letter-spacing: 20px;
    text-transform: capitalize;
    font-weight: bold;}
</style>
 <body>
    <script>
      
      var svg= d3.select("body").append("svg")
           .attr("width",  1000)
           .attr("height", 1000);

      var rect = svg.append("rect")
           .attr("x", 50)
           .attr("y", 50)
           .attr("width", 250)
           .attr("height", 250);
      
      var circle = svg.append("circle")
           .attr("cx", 250)
           .attr("cy", 250)
           .attr("r", 120);
      
     var line = svg.append("line")
            .attr("x1", 20)
            .attr("x2", 220)
            .attr("y1", 150)
            .attr("y2", 450)
            .attr("stroke", "#81D4DC")
     				.attr("stroke-width", 50)
     
      var text = svg.append("text")
            .attr("x", 10)
            .attr("y", 100)
      			.text("Liebe ist alles")
            .attr("fill", "#33312F")
     			
       
    </script>
 </body>

SESSION03

 

E06

What will be the output of the following code.

Explain each line.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<style>
  body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-size: 14px;
      color: white;
      background-color:black;
        }

  circle {
      fill: #ddd;
      cursor: pointer;
        }
</style>

<body>
  <svg width="760" height="140">
    <g transform="translate(70, 70)">
      <circle r="40" />
      <circle r="40" cx="120" />
      <circle r="40" cx="240" />
      <circle r="40" cx="360" />
      <circle r="40" cx="480" />
    </g>
  </svg>
  <div class="status">Click on a circle</div>

  <script>
      d3.selectAll('circle')
        .on('click', function(d, i) 
           {
            d3.select(this)
              .style('fill', '#40E0D0');
           });
  </script>

</body>
</html>


DATABINDING

 

 

 

SESSION04

 

SESSION04

 

var myData = ["Hello World!"];
     
var p = d3.select("body")
          .selectAll("p")
          .data(myData)
          .text(function (d) {return d;});


SESSION04

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <style>
	rect{fill: #40E0D0}
  </style>
  
  <body>
    <script> 
    
      var a_name = [1, 2, 3, 4, 5];
     
      var svg = d3.select("body").append("svg")
        .attr("width",  800)
        .attr("height", 800);
      
      svg.selectAll("rect") 
         .data(a_name) 
         .enter().append("rect")
         .attr("x", function(a_name){return a_name*100;}) 
         .attr("y", 50) 
         .attr("width",  80) 
         .attr("height", 80);

    </script>
  </body>
</html>

#2 EXAMPLE

 

DATALOADING

 

 

 

SESSION04

 

SESSION04

 

SESSION04

 

 d3.csv("url", function(data) {console.log(data);});
         

SESSION04

 

D3.CSV

D3.TSV

D3.JSON

D3.XML

SESSION04

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <body>

    <script>

      var svg = d3.select("body").append("svg")
        .attr("width",  250)
        .attr("height", 250);

      function Hello (data1)
      
      {var circles = svg.selectAll("circle").data(data1);
        
        circles.enter()
          .append("circle")
          .attr("r", 10)
          .attr("cx", function (data3){ return data3.x; })
          .attr("cy", function (data3){ return data3.y; });}
      
      
      d3.csv("https://gist.githubusercontent.com/sandravizmad/7287d19eee4e427d988282dbcf81faaa/raw/1150864a4881223226559f6dae83155b0d3a0d05/test", 
      function (data2){Hello(data2);});

    </script>

  </body>
</html>

 

EXAMPLE

SESSION04

 

E07

Save this data in your own gist, attention it is a TSV file.

Load the data with d3.tsv and write them into the console

Write in the console only the variable "letter"

 

SCALING

 

 

 

SESSION04

 

SESSION04

 

var newRamp = d3.scale.linear().domain([500000,13000000]).range([0, 500]);

SESSION04

 

SESSION04

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <style>
	rect{fill: #40E0D0}
  </style>
  
  <body>
    <script> 
    
      var a_name = [1, 2, 3, 4, 5];
      
      var scale = d3.scale.linear()
        .domain([1, 5])   
        .range([0, 400]); 
     
      var svg = d3.select("body").append("svg")
        .attr("width",  800)
        .attr("height", 800);
      
      svg.selectAll("rect") 
         .data(a_name) 
         .enter().append("rect")
         .attr("x", function(a_name){return scale(a_name);}) 
         .attr("y", 50) 
         .attr("width",  80) 
         .attr("height", 80);

    </script>
  </body>
</html>

#3 EXAMPLE

 

SESSION04

 

 var scale = d3.scale.linear()
        .domain([d3.min(a_name), d3.max(a_name)])
        .range([0, 400]); 

SESSION04

 

E08

Create a one dimensional array

Define the domain as the min and max of the data

Create the range as 20 and 200

Apply this scaling to circles with the color green and the radius 20.

The visual encoding should be represented by the X position.

 

SESSION04

 

Adding lables

SESSION04

 

E09

Create a scaling which you will apply to the radius.  

With the domain as 0 and the max. of the X variable

and the range 0 and 100.

Which scaling function would you suggest?  

 

SESSION04

 

var newRamp = d3.scale.linear().domain([500000,13000000]).range(["blue","red"]);

SESSION04

 

var sampleArray = [423,124,66,424,58,10,900,44,1];
var qScale = d3.scale.quantile().domain(sampleArray).range([0,1,2]);

SESSION04

 

var x = d3.scaleLog()
    .rangeRound([0, width - 2]);

var y = d3.scaleLog()
    .rangeRound([height - 2, 0]);

x.domain(d3.extent(diamonds, 
function(d) { return d.carat; }));
y.domain(d3.extent(diamonds, 
function(d) { return d.price; }));

AXIS

 

 

 

SESSION04

 

SESSION04

 

//Creation
var x_axis = d3.axisBottom()
               .scale(scale);

//Calling
svg.append("g")
    .call(x_axis);

SESSION04

 

E10

Add in the same style as the x axis has been created the y axis.

Have a thought where this axis should be placed.  

 

SESSION04

 

SESSION04

 

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.chart div {
  font: 18px sans-serif;
  background-color: #40E0D0;
  text-align: right;
  padding: 20px;
  margin: 5px;
  color: white; 
}
  
body {
    background-color: black;
  }

</style>

<div class="chart"></div>

<script>
var data = [4, 8, 15, 16, 23, 42, 60];
var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 300]);
d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter().append("div")
  .style("width", function(d) { return x(d) + "px"; })
  .text(function(d) { return d; });
</script>

E11

- Look at the following code.

- What will be the result.

- Explain each line.

SESSION04

 

E12

- Use the example under the following link and add axis.

ENTERUPDATEEXIT

 

 

 

SESSION04

 

SESSION04

 

 

ENTER

DATA

ELEMENT

 

UPDATE

 

EXIT

SESSION04

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <style>
	rect{fill: #40E0D0}
  </style>
  
  <body>
    <script> 
      
      var a_name = [1, 2, 3, 4, 5];
      
      var scale = d3.scale.linear()
        .domain([1, 5])   
        .range([1, 10]); 
     
      var svg = d3.select("body").append("svg")
        .attr("width",  2000)
        .attr("height", 2000);
    
      //Binding
      var rects = svg.selectAll("rect").data(a_name);
      
      //Enter
          rects
            .enter().append("rect")
            .attr("width", 50);
            
      //Update		
      	  rects
           .attr("height", function(a_name){return scale(a_name)*30;})
           .attr("y", function(a_name) {return (400 - scale(a_name)*30) ;})
           .attr("x", function(a_name, i) {return i *60;});
      //Exit	
       	 rects
           .exit().remove();
      
    </script>
  </body>
</html>

#4 EXAMPLE

 

SESSION04

 

SESSION04

 

E13

- Draw the following data

- Try to apply data scaling and axes as well as CSS styling.

- Once your example is finished save it in the blockbuilder.

var data = [
[70,150],
[120,200],
[150,300],
[200,350],
[170,250],
[90,220],
[320,70],
[115,250],
[180,200],
[160,220]
];

LINE CHART

 

 

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

MARGIN

CONVENTION

 

 

 

SESSION04

 

var margin = {top: 50, right: 20, bottom: 50, left: 20},
    padding = {top: 100, right: 60, bottom: 100, left: 60},
    outerWidth = 600,
    outerHeight = 600,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom,
    width = innerWidth - padding.left - padding.right,
    height = innerHeight - padding.top - padding.bottom;

var x = d3.scale.linear()
   	  .domain([0, width])
          .rangeRound([0, width]);

var y = d3.scale.linear()
    	  .domain([0, height])
	  .rangeRound([height, 0]);

SESSION04

 

 

01 DEFINE THE MARGIN OBJECT

02 WIDTH AND HEIGHT

03 SVG CONTAINER AS GROUP ELEMENTS BASED ON THE MARGINS  

 

MARGINCONVENTION

SESSION04

 

SETUP

OFFLINE

 

 

 

SESSION04

 

LOCALHOST

SESSION04

 

 

01 DOWNLOAD THE LIBARY/IES

02 MOVE THE LIBARY INTO YOUR WORKING FOLDER

03 CONNECT TO A LOCALHOST

 

 

WORKING OFFLINE

SESSION04

 

$ python -m SimpleHTTPServer

SESSION04

 

E14

Download the D3 library version 3 under this link

Go to the search box in blockbuilder and find an example created under version 3 or use this example

Check the code first and make sure that it does not include any error or requires other libraries downloaded

Go to the Github page of this example and download the corresponding code.

Create a folder and move the D3 library and the example there.

Start the localhost in your terminal

Open your browser and connect to the correspond port http://localhost:8000 in order to open the html of the D3 example.

 

SESSION04

 

D3 ADVANCED

 

 

 

SESSION05

 

THE POWER OF ANIMATION

 

 

 

SESSION05

 

SESSION05

 

SESSION05

 

.transition() 
.delay
.duration()

SESSION05

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
 
  <script>
    
  d3.select("body")
    .transition()
    .duration(2000)
    .delay(1000)
    .style("background-color", "red");
  
  </script>
  
</body>
</html>

 

BODY

SESSION05

 

<script>

//First transition by clicking on the button with the id #start
   d3.select("#start")
      .on("click", function() {rect
      .transition()
      .attr("fill", "red")
      .attr("opacity", "0.5")
	});
//Second transition by clicking on the button with the id #reset
    d3.select("#reset")
      .on("click", function() {rect
      .transition()
      .attr("fill", "black")
      .attr("opacity", "1")
	});

</script>  

 

BY CLICK

SESSION04

 

E15

Similar to the example, create an animation which will affect the position and size, which includes a delay and a duration by clicking the two buttons.

 

SESSION05

 

SESSION04

 

           //Width and height
			var w = 600;
			var h = 300;
			var barPadding = 1;
			
			var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
							11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
			
			//Create SVG element
			var svg = d3.select("body")
			            .append("svg")
				    .attr("width", w)
				    .attr("height", h);
            
            //Create RECT element
			svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length);
			   })
			   .attr("y", function(d) {
			   		return h - (d * 6);
			   })
			   .attr("width", w / dataset.length - barPadding)
			   .attr("height", function(d) {
			   		return d * 6;
			   })
			   .attr("fill", function(d) {
					return "rgb(0, 100, " + Math.round(d * 10) + ")";
			   });

            //Create TEXT lable
			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
			   })
			   .attr("y", function(d) {
			   		return h - (d * 6) + 14;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "12px")
			   .attr("fill", "white");

E16

What will be the output of this code.

 

SESSION05

 

SESSION05

 

.ease()

SESSION05

 

	d3.select("#start").on("click", function() {
		rectangle
			.transition()
			.attr("x", 250) // New Position
			.ease("bounce"); // Use the Bounce Transition Ease
	});

	d3.select("#reset").on("click", function() {
		rectangle
			.transition()
			.attr("x", 50) // New Position
			.ease("bounce"); // Use the Bounce Transition Ease

 

EASE BOUNCE

SESSION05

 

SESSION05

 

<!DOCTYPE html>
<html lang="en">
<head>
	<title>I'm Learning D3</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
		button {
			position: absolute;
			margin-left: 6px;
			margin-top: 6px;
		}
	</style>
</head>
<body>
	<button id="start">Transition</button>
	<button id="reset" style="margin-left: 82px">Reset</button>
	
<script>
	
	var svgContainer = d3.select("body").append("svg")
		.attr("width", 400)
		.attr("height", 200)
		.style("border-color", "black")
		.style("border-style", "solid")
		.style("border-width", "1px");
	 
	
	var rectangle = svgContainer.append("rect")
		.attr("x", 50)
		.attr("y", 50)
		.attr("width", 50)
		.attr("height", 50);

	d3.select("#start").on("click", function() {
		rectangle
			.transition()
			.attr("width", 100) 
			.attr("height", 100); 
	});

	d3.select("#reset").on("click", function() {
		rectangle
			.transition()
			.attr("width", 50)
			.attr("height", 50);
	});
</script>
</html>

E17 

What will be the output of the following code.

Explain each line.

 

SESSION05

 

SESSION05

 

SESSION05

 

E18

Explain the code of the example line by line.

 

SESSION05

 

SESSION05

 

SESSION05

 

SESSION05

 

ROOTS OF THE IDEA

 

 

 

SESSION03

 

SESSION05

 

SESSION05

 

THE POWER OF INTERACTION

 

 

 

SESSION05

 

SESSION06

 

D3 COMPLEX

 

 

 

SESSION06

 

HEXAGONAL

BINNING

 

 

 

Clusters visually

the most populated areas

on a scatterplot

by using a continuous color code.

 

 

 

SESSION04

 

SESSION06

 

SESSION06

 

SESSION06

 

SESSION06

 

SESSION06

 

BEESWARM

 

 

 

Distributes elements horizontally

avoiding overlap between them

according to a selected dimension.

 

 

 

SESSION04

 

SESSION06

 

SESSION06

 

SESSION06

 

SESSION06

 

HORIZONGRAPH

 

 

 

SESSION06

 

COMBINES POSITION AND COLOR

TO REDUCE VERTICAL SPACE

 

 

 

SESSION06

 

SESSION06

 

SESSION06

 

SESSION06

 

SESSION06

 

INSPIRATION

 

 

 

SESSION06

 

SESSION06

 

SESSION06

 

D3.JS

By Sandra Becker

D3.JS

Una presentación de 10min en BCN https://www.youtube.com/watch?v=hxDJq5uFdcY

  • 1,895
Loading comments...

More from Sandra Becker