Skip to content

Instantly share code, notes, and snippets.

View kielni's full-sized avatar

Kimberly Nicholls kielni

View GitHub Profile
@kielni
kielni / README.md
Last active August 29, 2015 14:06 — forked from ZJONSSON/README.md
d3.legend with line or circle icons

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"

@kielni
kielni / Makefile
Last active August 29, 2015 13:57 — forked from raylu/Makefile
go: go.c
gcc -o go -O go.c -Wall -Wextra -std=c11 -ggdb

D3 Streamgraph Example

Series Hover

The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983

Data Tooltip

It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.

@kielni
kielni / Readme.md
Last active April 10, 2018 17:29 — forked from WillTurman/Readme.md

D3 Streamgraph Example

Series Hover

The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983

Data Tooltip

It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.