danse

getBoundingClientRect

danse

- No indexes
- No easy way to generate local (hash link)

danse

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:

• d3.tsv - load and parse data
• d3.time.format - parse dates
• d3.time.scale - x-position encoding
• d3.scale.linear - y-position encoding
• d3.extent - compute domains
• d3.svg.axis - display axes
• d3.svg.line - display line shape

danse

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!

danse

# 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) 

danse

$< first prerequisite
$^ all prerequisites
$@ target

danse

/**
 * Just for fun: Wifi icon with pure CSS
 */

.wifi {
	padding: 20px;
}

.wifi, .wifi:before {
	display: inline-block;

danse

brackets editor
conditionizr
font awesome

danse

.red {
	background: red;
	width: 100px;
	float: left;
	hight: 100px;
}
.blue {
	background: blue;
	width: 100px;
	overflow: hidden;

danse

.red {
	background: red;
	width: 100px;
	float: left;
	hight: 100px;
}
.blue {
	background: blue;
	width: 100px;
	overflow: hidden;