pbogden

IE problem

Note: If you're not using IE, you're probably not seeing anything wrong. But if you're using IE, then the height of the SVG is 150px, no matter how many times you refresh the browser -- that's not cool.

With nice browsers, every time you refresh the page the SVG height adjusts to contain a line of circles that always fills the light gray box. Most modern browsers will set the SVG and container height according to the aspect ratio of the viewbox attribute, and the SVG will fill the width of the page.

But not IE (tested with IE 9, 10 & 11): IE sets the SVG height to 150px, regardless of the aspect ratio of the SVG. So the you'll probably see a random amount of empty gray space to the right of the circles every time you refresh. Click here for a solution to the IE problem.

pbogden

data
tmp

pbogden

Starting with http://bl.ocks.org/mbostock/4060606

Step 1. Change

.defer(d3.json, "/mbostock/raw/4090846/us.json")

to

.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/us.json")

pbogden

Using the code in http://bl.ocks.org/mbostock/4090848 plot a red circle on DC

Step 1. Change

d3.json("/mbostock/raw/4090846/us.json", function(error, us) {

to

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/us.json", function(error, us) {

pbogden

reusable legend

pbogden

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

Version that uses D3 v3

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

data
segments
segments.json

pbogden

gz
shp

pbogden

04c4acfe866676409ddb
todd