Skip to content
d3.sketchy for sketchy dataviz
JavaScript
Branch: master
Clone or download
Latest commit ee03f51 Jun 19, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
d3.sketchy.js Initial Commit Jun 19, 2014
example.html Initial Commit Jun 19, 2014
readme.md CR Jun 19, 2014

readme.md

d3.sketchy consists of three ways to make your dataviz look more sketchy:

d3.sketchy.circle creates an SVG circle element with an SVG path element over it that looks like a hand-drawn circle. The current circle outline is too static and needs to be improved, but by adjusting the strokeWidth property a bit among your circles, you can make them look different.

d3.sketchy.rect does the same things for rectangles and includes a .jostle property to make them more or less off-kilter.

d3.sketchy.randomColor takes a color and a range (between 0 and 1) and returns a color that has been perturbed along HSL by that range. Notice that pure hues need more perturbation to be readily visible.

The circles and rects work in a pretty straightforward manner similar to the SVG components already in D3:

  var sketchyRectangle = d3.sketchy.rect();
  sketchyRectangle
  .height(100)
  .width(50)
  .x(100)
  .y(100)
  .stroke("black")
  .strokeWidth(10)
  .jostle(5)
  
  d3.select("#someParent").call(sketchyRectangle);

Likewise for a circle:

  var sketchyCircle = d3.sketchy.circle();
  sketchyCircle
  .radius(15)
  .cx(150)
  .cy(150)
  .fill("red")
  .stroke("black")
  .strokeWidth(10);
  
  d3.select("#someContainer").call(sketchyCircle);

Sketchy colors are just: d3.sketchy.randomColor("pink",.075);

Here's an interactive example using circle-packing, brushing and bar charts.

You can’t perform that action at this time.