Skip to content

Instantly share code, notes, and snippets.

d3.legend

d3.legend is a quick hack to add a legend to a d3 chart. Simply add a g and .call(d3.legend). Any elements that have a title set in the "data-legend" attribute will be included when d3.legend is called. Each title will appear only once (even when multiple items define the same data-legend) as the process uses a set based on a existing names, not an array of all items.

Color

By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Color can be explicitly defined by attribute "data-legend-color"

Order

The order of items in the legend will be sorted using the top of the bounding box for each included item. The order can be explicitly defined by attribute "data-legend-pos"

@milroc
milroc / README.md
Last active August 29, 2015 13:59 — forked from mbostock/.block
d3.dispatch + reusable components
@milroc
milroc / README.md
Created June 12, 2014 17:41 — forked from mbostock/.block
@milroc
milroc / README.md
Last active August 29, 2015 14:08 — forked from mbostock/.block

Source: American Community Survey, 2011 5-Year Estimate

This map was inspired by a similar map found on Wikipedia. I wasn’t wild about the diverging color scale, so I thought it would be a fun challenge to recreate.

Finding the shapefiles was easy; I used the U.S. National Atlas 1:1,000,000 scale dataset, conveniently packaged in my U.S. Atlas repository. I reprojected the shapefiles to the California Albers projection using ogr2ogr:

ogr2ogr \
	-f 'ESRI Shapefile' \
	-t_srs 'EPSG:3310' \
@milroc
milroc / README.md
Last active August 29, 2015 14:25 — forked from magrawala/README.md
Bubble Cursor

This is an implentation of the Bubble Cursor, which was originally introduced by Tovi Grossman and Ravin Balakrishnan at CHI 2005.

@milroc
milroc / index.html
Created June 22, 2012 21:17 — forked from biovisualize/index.html
Tooltip as a d3 helper
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="./tooltip.js"></script>
</head>
<body>
<div class="viz"></div>
<script type="text/javascript">
@milroc
milroc / README.md
Last active October 6, 2015 12:08 — forked from ZJONSSON/index.html
axes as whitespace

This is a fork of Ziggy Jonsson's Bar Stack (flex lao) to add to this conversation.

The purpose of this gist was to recommend using whitespace to represent the axes of visualizations, as they signify the zero point in the opposite dimensions encoding. Additionally, this enhances the users comprehension because positive and negative areas are able to be assessed independently.

When doing visual encoding, we tend to ignore whitespace and let 0's handle themselves. To learn about other techniques around this concept, refer to: The Design of Nothing: Null, Zero, Blank by Andy Kirk (@visualisingdata).

Proposed Improvements:

  • aesthetics (very little changes from original example were made).
  • transitions that serve a purpose and flow with the expectation of the reader.
@milroc
milroc / README.md
Last active October 13, 2015 20:57 — forked from dchud/README.md
selection.each example
# Editor backup files
*.bak
*~
@milroc
milroc / JuliaGlobals
Last active December 17, 2015 05:18 — forked from johnmyleswhite/JuliaGlobals
Fork of @johnmyleswhite's Julia vs Python.
total = 0
N = 300
start_time = time()
for a in 0:(N - 1)
for b in 0:(N - 1)
for c in 0:(N - 1)
if a^2 + b^2 == c^2
total = total + 1