Matt Michel ninjaPixel

[ Launch: very simple browser test ] 9e675c8cd14a23484b67 by ninjaPixel

This grouped 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

	<!DOCTYPE HTML>
	<html>

	<head>
	<title>ninjaPixel.js Bar Chart</title>
	</head>
	<style>
	.ninja-axis path,
	.ninja-axis line {
	fill: none;

	<!DOCTYPE HTML>
	<html>

	<head>
	<title>ninjaPixel.js Line Chart</title>
	</head>
	<style>
	.ninja-axis path,
	.ninja-axis line {
	fill: none;

	<!DOCTYPE HTML>
	<html>

	<head>
	<title>ninjaPixel.js Bubble Chart</title>
	</head>
	<style>
	.ninja-axis path,
	.ninja-axis line {
	fill: none;

	<!DOCTYPE HTML>
	<html>

	<head>
	<title>ninjaPixel.js Bar Chart</title>
	</head>
	<style>
	.ninja-axis path,
	.ninja-axis line {
	fill: none;

	<!DOCTYPE HTML>
	<html>

	<head>
	<title>ninjaPixel.js Histogram</title>
	</head>
	<style>
	.ninja-axis path,
	.ninja-axis line {
	fill: none;

	var gulp = require('gulp'),
	less = require('gulp-less'),
	path = require('path'),
	jade = require('gulp-jade'),
	livereload = require('gulp-livereload');

	var MY_LOCALS = {errLogToConsole: true};

	gulp.task('default', function() {
	// place code for your default task here

	<!DOCTYPE HTML>
	<html>
	<head>
	<title>ninjaPixel.js Treemap</title>
	</head>
	<style>
	.d3-tip {
	line-height: 1;
	padding: 8px;
	background: rgba(100, 100, 100, 0.7);