D3 Diagrams

for use in this tutorial

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

DOM

svg

select all <circle> elements in the svg

Data

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

horizontal position

vertical position

Data

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

DOM

svg

select all <circle> elements in the svg

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

// id:1

// id:2

// id:3

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

The data-join

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

The data-join

// id:1

// id:2

// id:3

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

svg

Select the element in which you want to represent your data

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

svg

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

Make a selection that you want to bind your data to

svg

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

Bind data to your selection

// id:1

// id:2

// id:3

svg

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

Identify elements that have entered your data (i.e., not represented in the DOM)

// id:1

// id:2

// id:3

svg

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

For each element in your data not on your DOM, append a new circle

   id:1

   id:2

   id:3

svg

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

returns elements in the data not on the DOM

// id:1

// id:2

enter

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
];

returns elements on the DOM not in the data

// id:1

// id:2

exit

// id:3

Data

DOM

var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

returns elements in the data and on the DOM

// id:1

// id:2

data

// id:3

var svg = d3.select('#my-svg'); // select svg by id

var selection = svg.selectAll('circle') // select all circles in svg

var circles = selection.data(data) // bind data to selection of circles

var entering = circles.enter(); // determine which data is not on the screen

entering.append('circle'); // append a circle for each entering element
    

// More concisely / typical

var svg = d3.select('#my-svg'); // select svg by id


var circles = svg.selectAll('circle') // select all circles in svg
                 .data(data) // bind data to selection of circles

circles.enter().append('circle'); // append a circle for each entering element
    

// Dataset you want to visualize.
var data = [
  {id:1, x:10, y:10},
  {id:2, x:20, y:20},
  {id:3, x:30, y:30}
];

// Select an SVG from the DOM
var svg = d3.select('#my-svg');

// Store the data-join in a variable `circles`
var circles = svg.selectAll('circle') // select all circles in the svg
 .data(data, function(d){return d.id}); // bind the data to your selection

// Append a circle element for each observation that added the data. These will now be stored in the `circles` array.
circles.enter()
       .append('circle');

// Manipulate the visual attributes of updating and entering elements
circles.attr('r', 5) // set a constant radius of 5
       .attr('cx', function(d) {return d.x}) // specify the x attribute
       .attr('cy', function(d) {return d.y}); // specify the y attribute  

// Remove any exiting elements
circles.exit().remove();

// Define a linear scale
var scale = d3.scale.linear();

// Set the data domain of your scale
scale.domain([0, 10000]);

// Set the visual range of your scale
scale.range([0, 600]);

// Use your scale to translate between data space and visual space
scale(0) // returns 0 pixels
scale(5000) // returns 300 pixels
scale(10000) // returns 600 pixels

// Data to visualize
var data = [{name:'Steph', age:29}, {name:'Kristen', age:55}, {name:'Winston', age:12}];

// Get minimum age in dataset
var minAge = d3.min(data, function(d) {return d.age})

// Get maximum age in dataset
var maxAge = d3.max(data, function(d) {return d.age})

// Define an age-scale using these values
var ageScale = d3.scale.linear()
                       .domain([minAge, maxAge])
                       .range([0, 500])

// Function to update visual elements
var draw = function(data) {

    // Set your scales using the current data
    setScales(data);

    // Define axis functions and render axes on the screen
    setAxes();

    // Perform your data join
    var bars = g.selectAll('rect').data(data);

    // Enter elements
    bars.enter().append('rect');

    // Update elements
    bars.attr(...);

    // Exit elements
    bars.exit().remove();
};

var filterData = function() {
    currentData = allData.filter(function(d) {
        return d.type == type && d.sex == sex
    }).sort(function(a,b){
        if(a.state_name < b.state_name) return -1;
        if(a.state_name > b.state_name) return 1;
	return 0;
    });
};

// simplified, commented
d3.svg.axis = function() {
    var orient;

    // Axis function that gets returned, operates on a selected g element
    function axis(g) {
      
      // Loop through g elements
      g.each(function() {
        var g = d3.select(this); // select element that called function
        
        // Build visual axis components
    }

    // Expose scale getter/setter
    axis.scale = function(x) {
      if (!arguments.length) return scale;
      scale = x;
      return axis;
    };

    // Expose orient getter/setter
    axis.orient = function(x) {
      if (!arguments.length) return orient;
      orient = x in d3_svg_axisOrients ? x + "" : d3_svg_axisDefaultOrient;
      return axis;
    };
   
    // Assign a few more getter/setters
    return axis;
  };