It is probably very rare that you will only be visualizing static local data. The power of data visualization usually lays on the ability to visualize dynamic data typically generated by a server-side program. Since this is a common use case, D3 comes with some handy helper functions to make this task as easy as possible. In this recipe, we will see how a remote data set can be loaded dynamically, and we will update an existing visualization once loaded.
Open your local copy of the following file in your web browser:
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter3/asyn-data-load.html
In the code example of the asyn-data-load.html file, we will load data dynamically from the server on user's request, and once the data is loaded, we also update our visualization to reflect the new expanded data set. Here is the code where we do that:
<script type="text/javascript">
var data = [ // <-A
{expense: 10, category: "Retail"},
{expense: 15, category: "Gas"},
{expense: 30, category: "Retail"},
{expense: 50, category: "Dining"},
{expense: 80, category: "Gas"},
{expense: 65, category: "Retail"},
{expense: 55, category: "Gas"},
{expense: 30, category: "Dining"},
{expense: 20, category: "Retail"},
{expense: 10, category: "Dining"},
{expense: 8, category: "Gas"}
];
function render(data) {
d3.select("#chart").selectAll("div.h-bar") // <-B
.data(data)
.enter().append("div")
.attr("class", "h-bar")
.append("span");
d3.select("#chart").selectAll("div.h-bar") // <-C
.data(data)
.exit().remove();
d3.select("#chart").selectAll("div.h-bar") // <-D
.data(data)
.attr("class", "h-bar")
.style("width", function (d) {
return (d.expense * 5) + "px";
})
.select("span")
.text(function (d) {
return d.category;
});
}
render(data);
function load(){ // <-E
d3.json("data.json", function(error, json){ // <-F
data = data.concat(json);
render(data);
});
}
</script>
<div class="control-group">
<button onclick="load()">Load Data from JSON feed</button>
</div>Here is what our data.json file looks like:
[
{"expense": 15, "category": "Retail"},
{"expense": 18, "category": "Gas"},
...
{"expense": 15, "category": "Gas"}
]This recipe generates the following visual output after clicking the Load Data from JSON feed button once:
Data Loading from Server
In this recipe, we initially have a local data set defined on the line marked as A, and a row-based visualization generated by lines B, C, and D. The load function is defined on line E that responds to the user's click on the Load Data from JSON feed button, which loads the data from a separate file (data.json) served by the server. This is achieved by using the d3.json function as shown on line F:
function load(){ // <-E
d3.json("data.json", function(error, json){ // <-F
data = data.concat(json);
render(data);
});
}
Since loading a remote data set from a JSON file could take some time, it is performed asynchronously. Once loaded, the data set will be passed to the given handler function, which is specified on line F. In this function, we simply concatenate the newly loaded data with our existing data set, then re-render the visualization to update the display.
If a more customized and specific control is required, the d3.xhr function can be used to further customize the MIME type and request headers. Behind the scenes, d3.json and d3.csv are both using d3.xhr to generate the actual request.
Of course this is by no means the only way to load remote data from the server. D3 does not dictate how data should be loaded from the remote server. You are free to use your favorite JavaScript libraries, for example, jQuery or Zepto.js to issue an Ajax request and load a remote data set.