CODEWITHSUNDEEP
svgd3.js
moin moin
moin moin

Reputation: 2453

multiple d3 visualizations in one HTML document

I want to have multiple d3 visualizations in one document. My idea is to store some configuration such as url of the RESTful service along with the SVG tag attributes. On document load d3 would read in the attributes and load the data from the server and create the visualization. In this way I could edit / rearrange the document while keeping the visualizations intact.

My question is whether there is already a standardized way (best practice) of doing this? Or is there some plugin or something I could use?

change: I realized that I should mention that I want to create different documents with the same code. Consequently the document defines the content of the visualization (not the code).

A sample document with SVG attributes:

...
<head>
...
<svg width="200"... src="localhost:8000/rest/host1/cpu" type="os.line">...</svg>
<svg width="200"... src="localhost:8000/rest/host1/memory" type="os.bar">...</svg>

Upvotes: 0

Views: 360

Answers (2)

moin moin
moin moin

Reputation: 2453

in the end I decided to move the configuration into paragraphs (integrates well with redactor):

<p class="plot" src="localhost:8000/rest/host1/cpu" type="os.line">...</p>
<p class="plot" src="localhost:8000/rest/host1/memory" type="os.bar">...</p>

... here is my code:

define(['lib/d3.v3.min'], function(ignore) {

    var visualise = function(plugins) {
        var _host = function(src) {
            return src.split("/")[4];
        };

        var _plot = function(type) {
            var parts = type.split(".", 2);
            return plugins[parts[0]][parts[1]];
        };

        d3.selectAll("p.plot")
            .each(function() {
                var div = d3.select(this);
                var plot = _plot(div.attr("type"));
                var url = div.attr("src");
                var host = _host(url);
                d3.csv(url, function(data) {
                    div.call(plot, data, host);
                });
            });
    };

    return {visualise: visualise};
});

comments, improvements are more than welcome.

Upvotes: 1

Tsvi Tannin
Tsvi Tannin

Reputation: 407

Why not just append each visualization to a different div?

Upvotes: 0

Related Questions