View hn_search_with_sort.js
function query() {
var SORT_RECENT_FIRST = true;
var SEARCH_REPLIES = true;
var query_list = Array.prototype.slice.call(arguments);
var commentTable = document.querySelector('.comment-tree');
var commentNodes = Array.prototype.slice.call(commentTable.querySelectorAll('.athing'));
var COMMENT_TEXT_SELECTOR = '.c5a,.cae,.c00,.c9c,.cdd,.c73,.c88';
View git-author-rewrite.sh
#!/bin/sh
git filter-branch --env-filter '
OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Name"
CORRECT_EMAIL="your-correct-email@example.com"
if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
View d3.slider.css
.d3-slider {
position: relative;
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
border: 1px solid #aaaaaa;
z-index: 2;
}
.d3-slider-horizontal {
height: .8em;
View README.md

Some of these files are from the us-atlas:

  • us.json - make topo/us-10m.json
  • us-congress-113.json - make topo/us-congress-10m.json

Others are from the world-atlas:

  • world-50m.json - make topo/world-50m.json
  • world-110m.json - make topo/world-110m.json
View README.md

D3: Async Arc Progress Gauge / Meter

View on bl.ocks.org/cmdoptesc/e9b3bfc6f43b4bd237e2

Forked from Bostock's original Progress Events example to answer Rex X's post on the d3-js group:

The progress meter is based on the number of files that have downloaded. In our case, numberOfFiles is set to 20.

We then generate 20 random durations between 0 - 3000ms to simulate download times, and call setTimeout using the durations. Each timer then calls update, which increments the number of files downloaded, increasing the progress arc with a tweening function.

View Readme.md

D3: Open Hours

view on bl.ocks.org
github repo

D3 visualisation utilising D3's text/CSV to read/parse a CSV file with restaurant information and display which restaurants are currently open.

Users can drag the time (red line) to display restaurants open at other hours.

View quicksort.js
// quicksort using new arrays is easy, but surprisingly, there weren't too many examples
// in javascript of in-place quick sort...
// the outer function is simply just a wrapper that copies the original array;
// you can just use lines 12-37 if preserving the original array isn't important
function quickSortInPlace(unsortedArray) {
var unsorted = unsortedArray.slice(); // copy the original array
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .5;
stroke-width: .5px;
}
View nodejs-express-cors.js
// Express CORS middleware.. so much easier than trying to get Restify to work
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Accept, Origin, Referer, User-Agent, Content-Type, Authorization');
// intercept OPTIONS method
if (req.method === 'OPTIONS') {
res.send(200);
View Readme.md

D3: Arcs Tweening Animation

view on bl.ocks.org

Click on the grey circles. The green arcs will transition using attr, whereas the red ones will use the attrTween method.

If you have not seen/read Bostock's arc tween example, it's probably the best place to start. Secondly, I've posted up a basic example of drawing static, concentric arcs (gist), which might be helpful before adding on tweens/animations.

Below is some annotated source code from my experience playing with arcs. The biggest issue I came across was understanding the role of the arcTween helper function in relation to attrTween. Unlike attr, which takes a value as its second argument, attrTween requires a helper function, arcTween, which will be called during the intermediary animation ticks. This method was used for my [muniNow project](http