O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a group element

The first thing we need to do is create a g element to which we can add our own elements. Since we're visualizing data using SVG, we need to create this element inside the root SVG element we defined in our HTML skeleton in the previous section. We do this in the following manner:

function show() {      var margin = { top: 20, bottom: 20, right: 40, left: 40 },         width = 400 - margin.left - margin.right,         height = 400 - margin.top - margin.bottom;      var chart = d3.select(".chart")         .attr("width", width + margin.left + margin.right)         .attr("height", height + margin.top + margin.bottom)         .append("g")         .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); }

In this code fragment, we see the first usage ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required