Skip to content

Instantly share code, notes, and snippets.

View larskotthoff's full-sized avatar

Lars Kotthoff larskotthoff

83 followers · 0 following
View GitHub Profile
@larskotthoff
larskotthoff / README.md
Created February 4, 2015 18:51 — forked from mbostock/.block

This brush snaps to day boundaries. When the user releases the brush, the brush fires a brushend event, allowing a listener to adjust the brush extent. Using the new brush transitions released in D3 3.3, the brush smoothly interpolates from the original extent to the rounded extent. Compare this approach to using immediate snapping while brushing.

@larskotthoff
larskotthoff / README.md
Created February 4, 2015 18:45 — forked from mbostock/.block

This brush snaps to day boundaries. When the user releases the brush, the brush fires a brushend event, allowing a listener to adjust the brush extent. Using the new brush transitions released in D3 3.3, the brush smoothly interpolates from the original extent to the rounded extent. Compare this approach to using immediate snapping while brushing.

@larskotthoff
larskotthoff / index.html
Last active August 29, 2015 14:10 — forked from nvcleemp/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
div .tests {
float: none;
margin:auto;
text-align: center;
@larskotthoff
larskotthoff / data.tsv
Last active August 29, 2015 14:08 — forked from alimzi/data.tsv
date New York San Francisco Austin
20111001 63.4 62.7 72.2
20111002 58.0 59.9 67.7
20111003 53.3 59.1 69.4
20111004 55.7 58.8 68.0
20111005 64.2 58.7 72.4
20111006 58.8 57.0 77.0
20111007 57.9 56.7 82.3
20111008 61.8 56.8 78.9
20111009 69.3 56.7 68.8
@larskotthoff
larskotthoff / index.html
Last active August 29, 2015 14:06 — forked from maggie-lee/index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>
.axis text {
font: 10px sans-serif;
@larskotthoff
larskotthoff / index.html
Created September 14, 2014 17:51 — forked from maggie-lee/index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>
.axis text {
font: 10px sans-serif;
@larskotthoff
larskotthoff / README.md
Created August 15, 2014 08:18 — forked from mbostock/.block
@larskotthoff
larskotthoff / README.md
Last active August 29, 2015 14:05 — forked from mbostock/.block

This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

@larskotthoff
larskotthoff / README.md
Last active May 15, 2017 09:02 — forked from mbostock/.block
@larskotthoff
larskotthoff / README.md
Last active August 29, 2015 14:03 — 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