Display multiple d3.js charts in a single html page

Question

I have the the d3.js code which is pasted here.

I am trying to display more than one graphs in the same page. Though the d3.js code is same. Say one from data1.json and the other from data2.json. Following is the snippet which is bothering me.

<svg width="960" height="960"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg2 = d3.select("svg"),
    margin = 20,
    diameter = +svg2.attr("width"),
    g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

As per different answers in SO here, here, here, here or here, the solution seems to be one of the following:

Use different variable name to hold svgs such as svg1, svg2.. etc.. which I have done.

Use a method as described here.

   var chart1 = d3.select("#area1")
       .append("svg")

Method two is not working for me, as it shows blank page.

How to resolve this. I am sure that I am not getting the syntax correctly.

You seem to be using one svg for multiple graphs (you only have one svg element)? Method two - do you have a html element with an `id="area1"`? Have you checked your developers console for any errors? — Craicerjack, Jan 30 '17 at 16:16

score 13 · Accepted Answer · answered Jan 30 '17 at 16:42

13

There's no problem at all using multiple SVGs on the same page. Here's an example:

var svg1 = d3.select("#svg1");
svg1.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "red");
var svg2 = d3.select("#svg2");
svg2.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="200" height="200" id="svg1"></svg>
<svg width="200" height="200" id="svg2"></svg>

answered Jan 30 '17 at 16:42

r3mainer

23,981
3
51
88

Ok. I get it! But how do I convert ```var svg2 = d3.select("svg"), margin = 20, diameter = +svg2.attr("width"), g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); ``` to similar format. – kingmakerking Jan 30 '17 at 21:44
`d3.select("svg")` selects every SVG object in the DOM. You don't want to do that. Instead, give each SVG a unique `id` attribute (`svg1` and `svg2` in my example), and use those to refer to the SVG objects individually with `d3.select("#svg1")` and `d3.select("#svg2")`. – r3mainer Jan 30 '17 at 21:48
http://pastebin.com/evFYrn1f Still not working. I feel I am missing some silly syntax error. – kingmakerking Jan 30 '17 at 22:00
@kingmakerking It's `d3.select("#svg1")`, not `d3.select("svg1")`. – r3mainer Jan 30 '17 at 22:04
2

@squeamishossifrage you said *"d3.select("svg") selects every SVG object in the DOM"*. No, it doesn't. That code selects only **one** SVG, which is the first one in the DOM. – Gerardo Furtado Jan 31 '17 at 01:58
1

@GerardoFurtado Ah, you're right. I was thinking jQuery. Thanks for pointing that out. – r3mainer Jan 31 '17 at 09:08
2

No worries. In d3 three is `select` and `selectAll`. The latter would do what you said in your comment. – Gerardo Furtado Jan 31 '17 at 09:10
Buggeringly good answer, squeamish! Helped one out of a jiffy, I do say. – RobertMyles Oct 20 '17 at 13:41

Gerardo Furtado · Answer 2 · 2017-01-31T02:05:10.497

There is no need for repeating all the code, as you're doing right now. Don't repeat yourself.

An easy alternative is wrapping all your D3 code in a function that has two parameters, selector and url:

function draw(selector, url){
    //code here
};

Then, inside that function draw, you set the position of your SVG:

var svg = d3.select(selector).append("svg")...

And the URL you get the data:

d3.json(ulr, function(error, root) {...

After that, just call the draw function twice, with different arguments:

draw(selector1, url1);
draw(selector2, url2);

Here is a demo, read it carefully to see how it works:

draw("#svg1", "#data1");
draw("#svg2", "#data2");

function draw(selector, url){

var data = d3.csvParse(d3.select(url).text())

var width = 500,
    height = 150;

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

var xScale = d3.scalePoint()
    .domain(data.map(function(d) {
        return d.name
    }))
    .range([50, width - 50])
    .padding(0.5);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
        return d.value
    }) * 1.1])
    .range([height - 20, 6]);

var line = d3.line()
 .x(function(d){ return xScale(d.name)})
 .y(function(d){ return yScale(d.value)});
 
svg.append("path")
 .attr("d", line(data))
 .attr("stroke", "teal")
 .attr("stroke-width", "2")
 .attr("fill", "none");

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", "translate(0,130)")
    .attr("class", "xAxis")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(50,0)")
    .attr("class", "yAxis")
    .call(yAxis);

}

pre {
display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div>First SVG</div>
<div id="svg1"></div>
<div>Second SVG</div>
<div id="svg2"></div>
<pre id="data1">name,value
foo,8
bar,1
baz,7
foobar,9
foobaz,4</pre>
<pre id="data2">name,value
foo,1
bar,2
baz,3
foobar,9
foobaz,8</pre>

Olá @Gerardo_Furtardo. Could you point me to examples with different kind of graphs in a single page (e.g. bar plots, scatter plots, lines...)? I am working on a project with multiple graphs in a page, it gets messy quickly. Any tips on this? Thanks! — JdeMello, Sep 20 '18 at 17:44
Olá @JdeMello, the easiest approach is encapsulating each code in a separate function, which selects a given container in the page., as I explain here: https://codereview.stackexchange.com/a/194948/143592 — Gerardo Furtado, Sep 20 '18 at 22:24

Ryan Lee Simms · Answer 3 · 2017-01-30T22:14:06.380

If the two charts use the same code, I think the most d3-like way to go about it would be

var width = 960,
    height = 960,
    margin = 30;

var svgs = d3.select('#area1')
    .selectAll('svg')
    .data([json1, json2])
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height)

svgs.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .each(function(d) {console.log(d)}) // will log json1, then json2

You'll then have json1 and json2 bound to each of the newly appended svgs, and all code that follows will be done to both.

var width = 200,
    height = 100,
    margin = 30;

var svgs = d3.select('#area1')
    .selectAll('svg')
    .data([{text:'thing1'}, {text:'thing2'}])
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height);

svgs.append("text")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .text(function(d) {return d.text});

<script src="https://d3js.org/d3.v4.js"></script>
<div id='area1'></div>

Display multiple d3.js charts in a single html page

3 Answers3

Linked