Workshop Basics

Introduction

What is D3.js?
... D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

D3.js is a JavaScript visualization library for the web. D3.js is extremely flexible, at the cost of having to 'assemble-it-yourself'. This page will touch on the basics needed to create a map.

SVG, what is it?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated

Selection

D3 allows us to select elements from the DOM based on CSS selectors, for instance by ID, class attribute or tag name. The result of a select operation is an array of selected elements, the selection. Using select(), we select a single element from the DOM:

//select the element with ID 'example' d3.select('#example');

D3 allows us to select elements from the DOM based on CSS selectors, for instance by ID, class attribute or tag name. The result of a select operation is an array of selected elements, the selection. Using select(), we select a single element from the DOM:

//select all elements with class 'example' d3.selectAll('.example');

Adding Elements

// The margin gives us a boundary around the figure. This is useful when // you have an axis with ticks needed to give information about the data var margin = {top: 15, right: 15, bottom: 15, left: 15}; // We set the width/height with respect to the margins. // This allows all of our marking to be corretly placed, we'll correct for this var width = 960 - margin.left - margin.right; var height = 600 - margin.top - margin.bottom; // Our SVG element. var svg = d3.select("#viz") // grabs the
with the id 'visualization' .append("svg") // Adds a SVG element to the end of it .attr("width", width + margin.left + margin.right) // With our pre-calcd dimensions .attr("height", height + margin.top + margin.bottom) .append('g') // Before adding a group and moving it .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Attributes, IDs, and Styles

Class' are an HTML attribute that allow many objects to share similar properties. You can set CSS rules and assign classes to d3.js elements.

/* style.css */ .outlineSVG { fill: ddd; fill-opacity: 0.5; stroke: #000; stroke-width: 1px; } #fillSVG { fill: #d33dd3; fill-opacity: 0.25; }

Then, when we assign class and ID to rectangles, they will reflect those properties!

// Classes // Classes allow many objects to share similar properties. // It also allows selecting a 'group' svg.append('rect') .attr('x', 0) .attr('y', 0) .attr("width", width/2) .attr("height", height/2) .style('fill', 'none'); svg.append('rect') .attr('class', 'outlineSVG') // ADD a class .attr('x', width/2) .attr('y', 0) .attr("width", width/2) .attr("height", height/2); svg.append('rect') .attr('class', 'outlineSVG') // ADD a class .attr('x', 0) .attr('y', height/2) .attr("width", width/2) .attr("height", height/2); // ID // ID's allow selection of a single element, useful for when we want specific elements svg.append('rect') .attr('class', 'outlineSVG') .attr('id', 'fillSVG') // ADD an unique ID .attr('x', width/2) .attr('y', height/2) .attr("width", width/2) .attr("height", height/2);