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:
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!
| # 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) |
| /** | |
| * Just for fun: Wifi icon with pure CSS | |
| */ | |
| .wifi { | |
| padding: 20px; | |
| } | |
| .wifi, .wifi:before { | |
| display: inline-block; |
| /** | |
| * SVG inspired by Quine's paradox | |
| */ | |
| svg { | |
| display: block; | |
| margin: 40px auto; | |
| font: 83px sans-serif; | |
| } |
| // 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` |
This variation of a simple bar chart adds sorting with staggered delay and translucency to improve readability during the transition. This technique is recommended by Heer & Robertson. Use the checkbox in the top right to turn sorting on or off.
| var s=document.createElement('script'); s.type='text/javascript'; s.src='http://d3js.org/d3.v3.min.js'; document.head.appendChild(s); |
Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.
| from Eve import Eve | |
| import superdesk.users | |
| import superdesk.auth | |
| app = Eve(auth=superdesk.auth.SuperdeskTokenAuth) | |
| superdesk.users.register(app) | |
| superdesk.auth.register(app) | |
| app.run() |