pbogden

reusable legend

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

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

data
tmp

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

HTML button

Uses CSS

• linear-gradient
• box-shadow

Check out an SVG button

pbogden

Using tweens with transitions: Custom tweens with a custom attribute.

pbogden

junk

pbogden

Clustered Force Layout using D3 v4

Modified from Mike Bostock's original.

Looks more like the version with custom gravity.

Compare with Shan Carter's v4 adaptation.

pbogden

Assignment for Class #3