This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.
var gulp = require('gulp'); | |
var tsProject = ts.createProject('tsconfig.json'); | |
var ts = require('gulp-typescript'); | |
gulp.task('build', function() { | |
return tsProject.src() | |
.pipe(ts(tsProject)) | |
.pipe(gulp.dest('dist')); | |
}); | |
sudo chown -R $(whoami) /usr/local/lib/node_modules | |
sudo chown -R $(whoami) /usr/local/bin | |
sudo chown -R $(whoami) /usr/local/share |
watch -n5 'sudo kill -USR1 $(pgrep ^dd)' |
// Node.js CheatSheet. | |
// Download the Node.js source code or a pre-built installer for your platform, and start developing today. | |
// Download: http://nodejs.org/download/ | |
// More: http://nodejs.org/api/all.html | |
// 0. Synopsis. | |
// http://nodejs.org/api/synopsis.html |
find [DIRECTORY] -mindepth 2 -type f -exec mv -i '{}' [DIRECTORY] ';' |
This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:
- d3.csv - load and parse data
- d3.scale.ordinal - x-position encoding and color encoding
- d3.scale.linear - y-position encoding
- d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
- d3.max - compute domains
- d3.keys - compute column names
- d3.svg.axis - display axes
This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
This stacked area chart is constructed from a TSV file storing the market share of several popular web browsers over the last year. Data is from Clicky Web Analytics. The chart employs conventional margins and a number of D3 features:
- d3.tsv - load and parse data
- d3.time.format - parse dates
- d3.format - format percentages
- d3.time.scale - x-position encoding
- d3.scale.linear - y-position encoding
- d3.scale.category20, a d3.scale.ordinal - color encoding
- [d3.extent](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_exten