ndarville

# ~/.bash_aliases
alias gc='git commit'
alias gcv='git commit --no-verify'

ndarville

[ 
   5, 10, 13, 19, 21,
   24, 22, 18, 15, 13,
   11, 12, 15, 20, 18,
   17, 16, 18, 23, 25
]

ndarville

This reproduces mbostock’s vertical bar chart example with the full source.

I ran into a bunch of problems trying to follow the tutorial, so it’s instructive to put the entire source here—with my own cosmetic tweaks.

ndarville

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"

ndarville

Sites

Hacker News

table { max-width: 800px; }
td.default { width: 500px; }

ndarville

{
    "Version": "2008-10-17",
    "Statement": [
		{
			"Sid": "Deny access if referer is not set",
			"Effect": "Deny",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",

ndarville

ndarville

(This chart is a part of the d3-charts collection available [here][collection].)

---

This chart is for displaying something as simple as the share of votes as per cent for political parties over time.

The example thumbnail.png shows the graph with the proper historical data for the Danish political parties according to the data by [meningsmaalinger.dk][data], whereas the included data is arbitrary.

Usage

ndarville

(This chart is a part of the d3-charts collection available [here][collection].)

---

Example data from [Sunlight Foundation's API][sunlight]:

"breakdown": {
  "total": {
 "Yea": 62,

ndarville

(This chart is a part of the d3-charts collection available [here][collection].)

---

This chart displays the share of votes over time between two Danish parliamentary coalitions using placeholder data. The chart here has been used for two coalitions, but can also be used for two candidates.

You will notice something enveloping the line charts, which is the [confidence interval][ci], which indicates the spectrum of the confidence in our displayed results---to use a completely unscientific definition.

Compare this to [Sam Wang's chart for the U.S. 2012 election][wang] and [Drew Linzer's charts for individual states][votamatic].