d3.js勉強中。困っている。

ドットインストールでd3.jsの勉強している。
私の凡ミスなのかわからないが、この段階で詰まっていて途方に暮れている次第。
私が書いたのは以下の通り。レクチャーの通りに書いたと思っているのだが。。。
OSはwindows8, ブラウザはクローム。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Practice of JavaScript</title>
</head>
<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
		var dataset = [11, 25, 45, 30, 33];
		var w = 500;
		var h = 200;

		var svg = d3.select("body").append("svg").attr({width:w, height:h});

	</script>
</body>
</html>

結果、svg要素がbodyに追加されているけどwidthとheightの設定がされてない。。。
f:id:g0nChang:20160703040605p:plain
なんでや。。。

変数使わないでやってみる。

var svg = d3.select("body").append("svg").attr({width:500, height:200});

結果は変わらず。

こうすればうまく行った。

var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);

結果
f:id:g0nChang:20160703040918p:plain
なんか芋い。まぁ意図した結果にはなっているので我慢。attrをまとめるのはやめる。

ところがレッスンをtransitionの話まで進めたところでまた問題が。
durationの指定までは問題なくいったが・・・

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Practice of JavaScript</title>
</head>
<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
		var dataset = [11, 25, 45, 30, 33];
		var w = 500;
		var h = 200;

		var svg = d3.select("body")
			    .append("svg")
			    .attr("width",w)
			    .attr("height",h);

		svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.attr("cx", function(d,i) { return 50 + (i * 100); })
			.attr("cy", h / 2)
			.attr("r", 0)
			.attr("fill", "red")
			.transition()
			.duration(1000)
			.ease("in")
			.attr("r",function(d) { return d; });

	</script>
</body>
</html>

こう書いたらeaseでUncaught error。次に進めない。。。
ドットインストールの動画を見ても、他のブログを見ても問題なさそうに見える。
環境的な問題なのか、はたまた私の凡ミスなのか。もう少し調べることにする。。。

追記：バージョン下げたらうまく行った。
変更前

<script src="https://d3js.org/d3.v4.min.js"></script>

変更後

<script src="https://d3js.org/d3.v3.min.js"></script>

d3.v4.min.js→d3.v3.min.jsとした。v4は使わないことにする。使わないことにする。