shawnbot

export default function foo() {
  return 'foo';
};

export function bar() {
  return 'bar';
};

shawnbot

This example shows how to use d3 to create uniformly scaled geographic feature thumbnails. There are two interesting features of SVG at play here:

1. The viewBox attribute is used to "zoom in" to the individual states.
2. The use element is used to redraw a common background states path into each thumbnail, reducing DOM overhead.

The other nice thing here is that we didn't have to define the SVG elements'

shawnbot

This tweak to my original example uses a Mercator projection rather than Albers USA, which straightens out many of the state borders and puts Alaska and Hawaii in their right places.

Good call, Jeremy Stucki!

shawnbot

shawnbot

Here are the 53 repos affected by Monotype's DMCA takedown:

• aberthelot/slides-ippon
• adachis/lh_resume_builder
• adriantoman/WeddingPages
• alcf/chms
• amercier/www.oeco-architectes.com
• arctirux/Fikia
• artemkochnev/Global-Defense
• bitmonet/bitmonet

shawnbot

This snippet is heavily inspired by Heydon Pickering's Practical ARIA Examples, and implements his ARIA tabs example with D3.

shawnbot

swagger-static

This document is largely superceded by the swagger-static repo, where I'm now planning a project. GitHub won't notify me of comments here, so if you want to get in touch please comment on or file an issue. Thanks!

Background

At 18F we're implementing [Swagger]-compliant APIs to make them more accessible and facilitate simpler documentation. Unfortunately, the only generally accepted way of exposing human-readable Swagger API documentation is [SwaggerUI], a client-side JavaScript library with some serious issues:

1. Because all SwaggerUI-based documentation is rendered at runtime, search engines are [theoretically] unable to crawl their contents.
2. Tight coupling with jQuery and a [long list of dependencies](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html#L10-L2

shawnbot

function noreallygimmeasyncdammit(sync) {
  return function() {
    var args = [].slice.call(arguments),
        next = args.pop();
    try {
      var value = sync.apply(this, args);
    } catch (err) {
      return next(err);
    }
    next(null, value);

shawnbot

{% macro series(bars, value_key, tooltip=None) %}
<div class="chart-series chart-series--vertical">
  {% for bar in bars %}
  <div class="chart-series__bar" data-value="{{ bar[value_key] }}">
    {% if tooltip %}
    <div class="chart-series__bar__tooltip">
      <div class="chart-series__bar__tooltip__content">
        {{ tooltip(bar) }}
      </div>
    </div>

shawnbot

Stateful Checkboxes

This quick little hack creates a global function named checkboxes() that uses [localStorage] to remember the state of checkboxes on the host page. Usage:

var boxes = checkboxes({
    // the checkbox selector (always prefixed with 'input[type=checkbox]')
    selector:   '.stateful',
    // the storage engine (only 'localStorage' is supported here)
    storage:    'localStorage',
 // the prefix for all storage keys