| // Gruntfile with the configuration of grunt-express and grunt-open. No livereload yet! | |
| module.exports = function(grunt) { | |
| // Load Grunt tasks declared in the package.json file | |
| require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); | |
| // Configure Grunt | |
| grunt.initConfig({ | |
| // grunt-express will serve the files from the folders listed in `bases` |
| /** | |
| * SVG inspired by Quine's paradox | |
| */ | |
| svg { | |
| display: block; | |
| margin: 40px auto; | |
| font: 83px sans-serif; | |
| } |
| /** | |
| * Just for fun: Wifi icon with pure CSS | |
| */ | |
| .wifi { | |
| padding: 20px; | |
| } | |
| .wifi, .wifi:before { | |
| display: inline-block; |
| # Specify where our binaries are (I'm using package.json and npm to handle dependencies) | |
| LESSC = node_modules/.bin/lessc | |
| UGLIFYJS = node_modules/.bin/uglifyjs | |
| # Our LESS input file(s) | |
| LESS = css/base.less | |
| # Our CSS list (replaces .less with .css in the list) | |
| CSS = $(LESS:.less=.css) |
Source: Bureau of Labor Statistics
This visualization shows the distribution of unemployment for 380 U.S. metropolitan areas from January 2000 to December 2012. I’m currently weighting each area equally, but it would probably be better to weight areas by the size of the civilian labor force. Thanks to Kevin Quealy for suggesting this dataset, which was the basis for his earlier graphic!
This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features: