Skip to content

Instantly share code, notes, and snippets.

View bollwyvl's full-sized avatar

Nicholas Bollweg bollwyvl

View GitHub Profile
@bollwyvl
bollwyvl / README.md
Last active December 21, 2015 00:49 — forked from mbostock/.block

This is a fork of the [population][http://bl.ocks.org/mbostock/4062085], with the x and y axes switched.

This diagram shows the distribution of age groups in the United States over the last 150 years. Use the arrow keys to observe the changing population. Data from the Minnesota Population Center. Use the arrow keys to change the displayed year. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.

@bollwyvl
bollwyvl / data.json
Created October 24, 2013 13:31 — forked from nemequ/data.json
{
"iliad": {
"uncompressed-size": 1308638,
"plugins": {
"blosc": {
"blosc": [
{
"level": 1,
"compressed-size": 1308654,
"compress-cpu": 0.00240027,

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

  • works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
  • interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
  • percentages are shown explicitly, to help overcome the distortion of the data that occurs wh
@bollwyvl
bollwyvl / README.md
Last active December 27, 2015 16:39 — forked from kerryrodden/.block

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

  • works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
  • interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
  • percentages are shown explicitly, to help overcome the distortion of the data that occurs wh
@bollwyvl
bollwyvl / README.md
Last active January 3, 2016 12:29 — forked from jasondavies/.block

This is based on Jason Davies' parallel coordinates visualization of cars from the ‘70s and ‘80s which demonstrated one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension.

This version demonstrates the multibrush component by Humanities + Design. After creating a filter, click and drag again on the same axis, and you can create a second filter. You will see all cars that match either filter.

@bollwyvl
bollwyvl / index.html
Last active August 29, 2015 14:02 — forked from makoto/index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.border {
color: yellow;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>d3.carto.map - d3.carto.layer</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/d3map.css" />
<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
html,body {
height: 100%;
@bollwyvl
bollwyvl / README.md
Last active August 29, 2015 14:04 — forked from jstcki/README.md
d3.layout.grid with icons
@bollwyvl
bollwyvl / README.md
Last active August 29, 2015 14:05 — forked from mbostock/.block
Drag + Zoom + Slider