Skip to content

Instantly share code, notes, and snippets.

View bewest's full-sized avatar

Ben West bewest

322 followers · 66 following
  • San Francisco
View GitHub Profile
@bewest
bewest / index.html
Created December 11, 2012 05:50 — forked from stepheneb/index.html
D3 Example: zoom, pan, and axis rescale
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>One Graph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="simple-graph.js"></script>
<style type="text/css">
body { font: 13px sans-serif; }
rect { fill: #fff; }
@bewest
bewest / README.md
Created December 11, 2012 17:37 — forked from mbostock/.block
L*a*b* and HCL color spaces

D3 2.10 adds support for CIE L*a*b* and HCL. These perceptually-motivated color spaces are designed with humans (rather than computers) in mind. RGB and HSL interpolation can cause unintentional grouping due to parts of the color space appearing more visually similar; L*a*b* and HCL, in contrast, are perceptually uniform. For more information, see Gregor Aisch’s post How To Avoid Equidistant HSV Colors and Drew Skau’s post Dear NASA: No More Rainbow Color Scales, Please.

You can create L*a*b* or HCL colors directly using d3.lab or d3.hcl. For example:

var steelblue = d3.lab(52, -4, -32);
var steelblue = d3.hcl(-97, 32, 52);

You can also convert from RGB or HSL. This is useful for creating brighter or darker colors with uniform changes in perception:

@bewest
bewest / README.md
Created December 11, 2012 17:42 — forked from mbostock/.block
d3.geo.tile
@bewest
bewest / README.markdown
Last active October 13, 2015 22:27 — forked from ZJONSSON/README.markdown
bewest glucose with panning
@bewest
bewest / README.md
Created December 17, 2012 08:38 — forked from mbostock/.block

Horizon charts combine position and color to reduce vertical space. Start with a standard area chart, then mirror negative values (in blue) or offset them vertically. Click the + button above to increase the number of bands, turning the area into a horizon.

Implemented with the d3.horizon plugin.

@bewest
bewest / README.markdown
Last active December 11, 2015 08:29 — forked from anonymous/page-1-find_dates.log

notice:

logs/ReadHistoryData-page-1.data: 45 records
RECORD 0: 2006-07-01T08:23:47 0x5b hex(2), extra(22)
  hex (2)
0000   0x5b 0x64                                  [d
  decimal
@bewest
bewest / README.markdown
Created February 4, 2013 21:59 — forked from tsenga/README.markdown

An experiment within the Visualisation Exploration series.

Exploring, techniques and practices in the field of data visualisation.

Key history of this experiment:

  • D3, the data driven visualisation enabler.
  • Initial prototype written in handcrafted SVG with handcrafted data
  • Creation of sample .json dataset
  • Migration to systematic data treatment using D3
@bewest
bewest / grid.js
Created February 4, 2013 22:01 — forked from bunkat/grid.js
/**
* calendarWeekHour Setup a week-hour grid:
* 7 Rows (days), 24 Columns (hours)
* @param id div id tag starting with #
* @param width width of the grid in pixels
* @param height height of the grid in pixels
* @param square true/false if you want the height to
* match the (calculated first) width
*/
function calendarWeekHour(id, width, height, square)
@bewest
bewest / p-with-fixed-help.py
Created February 17, 2013 17:16 — forked from von/p-with-fixed-help.py
#!/usr/bin/env python
import argparse
import ConfigParser
conf_parser = argparse.ArgumentParser(
# Turn off help, so we print all options in response to -h
add_help=False
)
conf_parser.add_argument("-c", "--conf_file",
help="Specify config file", metavar="FILE")
@bewest
bewest / README.md
Last active December 14, 2015 10:59 — forked from mbostock/.block

d3 glucose heatmap over hours of day

D3 implementation of ~@jebecks excellent glucose heatmaps in R.