pbogden

Various homework assignments for Fall 2015

pbogden

Binesh final project -- points plotted on map.

pbogden

data

pbogden

data

pbogden

Event bubbling & capturing demo

1. SVG elements are not nested -- they don't bubble to each other. Topmost element is the target.
2. Blue SVG rect captures the event with d3.event.stopPropagation();
3. Nested DIV elements bubble to each other up the DOM tree.
4. Non-nested DIV elements don't bubble to each other.

pbogden

04c4acfe866676409ddb
todd

pbogden

gz
shp

pbogden

data
segments
segments.json

pbogden

Side-by-side responsive graphics

The key is to use appropriate CSS for the containers...

• display: inline-block; for side-by-side containers
• vertical-align: top; so content aligns along the top (default is baseline of parent)
• float: left; otherwise carriage-return between containers will take up space
• width: 48%; must account for padding on left & right

pbogden

Reusable and responsive version of http://bl.ocks.org/mbostock/3885304" that handles negative values.

Version that uses D3 v3