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:
| 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); |
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>ninjaPixel.js Donut Chart</title> | |
| </head> | |
| <style> | |
| path { | |
| stroke-width: 5px; | |
| } |
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>ninjaPixel.js Histogram</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 Bubble 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 Bar Chart</title> | |
| </head> | |
| <style> | |
| .ninja-axis path, | |
| .ninja-axis line { | |
| fill: none; |
[ Launch: very simple browser test ] 9e675c8cd14a23484b67 by ninjaPixel