Bookworm D3 layouts

Ben Schmidt, October 20, 2015

There’s no full description of the D3 bookworm package yet, because it’s still something of a moving target.

But Abby Mullen wanted to know what the different possibilities were for charts through the API, so I thought it was time to give a quick tour.

Core chart types

Heatmaps (heatmap)

Heatmaps show two different categorical variables on the x and y axes; they’re one of the most information-dense ways for identifying outliers or complicated patterns, but their use of coloration makes them poor at representing quantities.

Basic Example: usage of “bicycle” by week and year

{
    "database": "ChronAm",
    "plotType": "heatmap",
    "method": "return_json",
    "search_limits": {
        "word": ["bicycle"]
    },
    "aesthetic": {
        "x": "publish_year",
        "y": "publish_week_year",
		"color": "WordsPerMillion"
    }
}

With log-scale coloring: pages published per state by year

{
    "database": "ChronAm",
    "plotType": "heatmap",
    "method": "return_json",
    "search_limits": {
    },
    "aesthetic": {
        "x": "publish_year",
        "y": "placeOfPublication_adminName1",
		"color": "TextCount"
    },
	"scaleType":"log"
}

Maps (map)

Maps show usages of language on a map.

Zooming is not yet enabled: projections may not be the appropriate size for all screens.

Basic map example: newpapers

{
    "database": "ChronAm",
    "projection": "USA",
    "plotType": "map",
    "method": "return_json",
    "search_limits": {
        "word": ["test"]
    },
    "aesthetic": {
        "size": "TotalWords",
        "point": "placeOfPublication_geo",
        "label": "publisher"
    }
}

Line charts (linechart)

Linecharts do not quite implement all the capacities of the linechart bookworm, but they make it much easier to represent a number of other useful linecharts.

Hover does not work: clicking does.

Linechart example: Pages per year of the top 15 papers

{
    "database": "ChronAm",
    "plotType": "linechart",
    "method": "return_json",
    "search_limits": {
	"title__id":{"$lte":15}
    },
    "aesthetic": {
        "x": "publish_year",
        "color": "title",
		"y": "TextCount"
    },
	"scaleType":"log"
}

Streamgraphs (streamgraph)

Streamgraphs display quantities over time: they are pretty and give a sense of the dominant materials.

The implementation is imperfect. Interaction does not work, and large return quantities are automatically curtailed.

Streamgraph example:

{
    "database": "ChronAm",
    "plotType": "streamgraph",
    "method": "return_json",
    "search_limits": {
    },
    "aesthetic": {
        "x": "publish_year",
        "fill": "placeOfPublication_adminName1",
		"y": "TextCount"
    },
	"scaleType":"log"
}

pointchart

The layout used for rate my professors.

barchart

Two-part comparisons: slopegraph and worddiv.

These two types compare between two different views.

Slope graphs (slopegraph)

Needs lots of space. Uses a ‘y’ aesthetic to position words and a “label” aesthetic to display groups.

Two-column variable-sized text layout (worddiv)

One of the few non-SVG based visualizations.

Other chart types (passim)

To see other chart types, you can change “charttype”:“WHATEVER” in the D3 view, and the refresh the page. After doing this, if the chart type is still actively supported the dropdowns will populate with appropriate choices for the database specified.