Information and Resources

User Tools

Site Tools


Simple Treemap for Publications in JournalMap

A Treemap is a compact way of visualizing data that you might normally put in a bar or pie chart. Treemaps use nested rectangles whose size is determined by a data attribute. In this example, each rectangle in the treemap below corresponds to a journal (publication) that is indexed in JournalMap. The size of each rectangle is related to the number of articles from that journal in JournalMap's database. This example uses D3.js to access the data from the JournalMap API and the super helpful D3plus for easily building the treemap.

Steps for creating the example

This one is pretty easy. To see the full script put together, see our example on GitHub.

1. Add the script references to the page header

Add the following references to the <head> section of your webpage:

<script src=""></script>
<script src=""></script>

2. Add a container to hold the map

Put a <div> tag in the body of your page where you want the treemap to be. Give it an id (e.g., id=“viz”) and set any other attributes or styles you need to.

<div id="viz"></div>

3. Add a script block for the map coding

Add a <script> tag after your <div> container. In the script tag, we'll call the JournalMap API for the publications data and build the treemap.

var apikey = "<INSERT_YOUR_API_KEY>";
d3.json(""+apikey+"&version=1.0", function(error, sample_data) {
  var visualization = d3plus.viz()
    .messages("Loading data from JournalMap API...")
        "method" : "color",
        "type": "drop",
        "title": "Change color scheme:",
        "value"  : [{"Random": "name"}, {"Article Count": "articles_count"}]
}); // Close d3
api/journal_treemap.txt · Last modified: 2015/01/21 14:16 by jkarl


JournalMap data is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
Creative Commons License