... 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.
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');
// 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 + ")");
- Margin Convention by the D3.js author himself.
- Dashing D3: Setting up margins and graph area.
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);