shawnbot

This gist shows how to restrict d3's zoom behavior so that users can't pan outside of a rectangular bounding box. Use your scroll wheel to zoom in and out of the field of circles, and click and drag to move when zoomed in. Note how when you zoom back out (by scrolling up) the view snaps to the original extent at zoom 1.

nbremer

height: 650
license: mit

patternCreationWithD3.js

(function() {
  var incrementWithoutSpace, incrementWithSpace, FirstColumnType, SecondColumnType;
 
  incrementWithoutSpace = 20; // I'm guessing this is in px
  incrementWithSpace = 40;
 
  FirstColumnType = function ColumnType1 () {
    var x, y, r;
    circle = {
      x : 20,

lsauer

#lsauer.com, 2013
#Note: -)for convenience the function uses the re-module, but can be rewritten to fit into a lambda expression
#      -)choose any other, more-expressive return type such as NumPy's `nan` over None if you like

#demonstrative-version:
def parseInt(sin):
  import re
  return int(''.join([c for c in re.split(r'[,.]',str(sin))[0] if c.isdigit()])) if re.match(r'\d+', str(sin), re.M) and not callable(sin) else None

#via a simple regex:

pnavarrc

Automatic Label Placement

This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using the force layout and multiple foci. The centroid of each feature will define a foci of the force. This foci will attract the label that correspond to that feature (and ignore the others). The labels will repel themselves to avoid overlapping.

References

• Lets Make a Map
• Multi-Foci Force Layout

bycoffe

This is a demonstration of how to create a combination town/county map from a shapefile using TopoJSON and d3.js.

It includes a simplified version of the code used for the Massachusetts special Senate election results on The Huffington Post.

Get the data

Download a shapefile of Massachusetts towns from the state's GIS site:

wget http://wsgw.mass.gov/data/gispub/shape/census2000/towns/census2000towns_poly.exe

yckart

A simple bookmarklet which makes our painful life a bit easier.

javascript:(function(b,a,c,d,e){if(/\.\w+$/.test(a))b.location=c+a.replace("/blob/","/");else if(e=prompt("Insert a filename:","index.html"))b.location=c+a.replace("/tree/","/")+(~a.indexOf(d)?"/":d)+e})(window,location.pathname,"http://rawgit.com","/master/");

The usage is quite simple:

Go to any repo where you like to preview a file, and execute the booklet. If the current url is a file, it should open the file directly, otherwise it will prompt for a filename (per default it is index.html).

milroc

This is a six part series, taking you through stages of designing and creating reusable visualizations with d3.js

All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.

• Basic Concept (vanilla d3.js)
• Reusability Step
• Angular.js + d3.js
• ember.js + d3.js
• Backbone.js + d3.js
• react.js (& flux concepts) + d3.js <- New

yanofsky

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.

In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit

SlexAxton

gifify() {
  if [[ -n "$1" ]]; then
    if [[ $2 == '--good' ]]; then
      ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
      time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
      rm out-static*.png
    else
      ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
    fi
  else