Skip to content

Commit dfd6487

Browse files
mbostockmbostock
committed
Drop namespaces from tutorials.
Also fix d3#429 with typo in code example.
1 parent 2c2b342 commit dfd6487

5 files changed

Lines changed: 142 additions & 155 deletions

File tree

‎index.markdown‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,10 +252,10 @@ operator, which takes four arguments: the *x* and *y* of the ellipse center, and
252252
the *width* and *height*. Raphaël provides an `ellipse` operator with the same
253253
arguments, and a `circle` operator that takes three arguments using *radius*.
254254
Protovis defines `pv.Dot` and `pv.Wedge` mark types. D3, in contrast, does not
255-
reinvent the wheel, instead using the standard `svg:circle` element:
255+
reinvent the wheel, instead using the standard `circle` element:
256256

257257
{% highlight js linenos %}
258-
svg.append("svg:circle")
258+
svg.append("circle")
259259
.attr("cx", 50)
260260
.attr("cy", 40)
261261
.attr("r", 10);

‎tutorial/bar-1.markdown‎

Lines changed: 32 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@ HTML, and then a more advanced example with SVG.
5151
To get started with HTML, you'll first need a container for the chart:
5252

5353
{% highlight js linenos %}
54-
var chart = d3.select("body")
55-
.append("div")
54+
var chart = d3.select("body").append("div")
5655
.attr("class", "chart");
5756
{% endhighlight %}
5857

@@ -114,8 +113,7 @@ comma-grouping of thousands and fixed precision.
114113
The above code results in a rudimentary bar chart:
115114

116115
<script type="text/javascript">
117-
d3.select(".content")
118-
.append("div")
116+
d3.select(".content").append("div")
119117
.attr("class", "chart")
120118
.selectAll("div")
121119
.data(data)
@@ -176,12 +174,11 @@ Vector Graphics](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics) (SVG)!
176174
## SVG
177175

178176
You use SVG much the same way as HTML, but it offers substantially more
179-
flexibility. To start with SVG, create an `svg:svg` container instead of a
177+
flexibility. To start with SVG, create an `svg` container instead of a
180178
`div`:
181179

182180
{% highlight js linenos %}
183-
var chart = d3.select("body")
184-
.append("svg:svg")
181+
var chart = d3.select("body").append("svg")
185182
.attr("class", "chart")
186183
.attr("width", 420)
187184
.attr("height", 20 * data.length);
@@ -212,7 +209,7 @@ height explicitly:
212209
{% highlight js linenos %}
213210
chart.selectAll("rect")
214211
.data(data)
215-
.enter().append("svg:rect")
212+
.enter().append("rect")
216213
.attr("y", function(d, i) { return i * 20; })
217214
.attr("width", x)
218215
.attr("height", 20);
@@ -233,14 +230,13 @@ The SVG-based chart is now almost identical to our original. The chart is
233230
currently missing labels, but that will be fixed shortly:
234231

235232
<script type="text/javascript">
236-
d3.select(".content")
237-
.append("svg:svg")
233+
d3.select(".content").append("svg")
238234
.attr("class", "chart")
239235
.attr("width", 420)
240236
.attr("height", 20 * data.length)
241237
.selectAll("rect")
242238
.data(data)
243-
.enter().append("svg:rect")
239+
.enter().append("rect")
244240
.attr("y", function(d, i) { return i * 20; })
245241
.attr("width", x)
246242
.attr("height", 20);
@@ -276,7 +272,7 @@ The new scale plugs into the bar specification, replacing the "y" attribute:
276272
{% highlight js linenos %}
277273
chart.selectAll("rect")
278274
.data(data)
279-
.enter().append("svg:rect")
275+
.enter().append("rect")
280276
.attr("y", y)
281277
.attr("width", x)
282278
.attr("height", y.rangeBand());
@@ -289,7 +285,7 @@ text:
289285
{% highlight js linenos %}
290286
chart.selectAll("text")
291287
.data(data)
292-
.enter().append("svg:text")
288+
.enter().append("text")
293289
.attr("x", x)
294290
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
295291
.attr("dx", -3) // padding-right
@@ -307,22 +303,21 @@ settings for alignment and padding!
307303
The SVG chart now looks identical to the earlier HTML version:
308304

309305
<script type="text/javascript">
310-
var chart = d3.select(".content")
311-
.append("svg:svg")
306+
var chart = d3.select(".content").append("svg")
312307
.attr("class", "chart")
313308
.attr("width", 420)
314309
.attr("height", 120);
315310

316311
chart.selectAll("rect")
317312
.data(data)
318-
.enter().append("svg:rect")
313+
.enter().append("rect")
319314
.attr("y", y)
320315
.attr("width", x)
321316
.attr("height", y.rangeBand());
322317

323318
chart.selectAll("text")
324319
.data(data)
325-
.enter().append("svg:text")
320+
.enter().append("text")
326321
.attr("class", "bar")
327322
.attr("x", x)
328323
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
@@ -336,16 +331,15 @@ With the basic chart is in place, you can place additional marks to improve
336331
readability. As a first step, pad the SVG container to make space for labels:
337332

338333
{% highlight js linenos %}
339-
var chart = d3.select(".content")
340-
.append("svg:svg")
334+
var chart = d3.select("body").append("svg")
341335
.attr("class", "chart")
342336
.attr("width", 440)
343337
.attr("height", 140)
344-
.append("svg:g")
338+
.append("g")
345339
.attr("transform", "translate(10,15)");
346340
{% endhighlight %}
347341

348-
The `svg:g` element is a [container
342+
The `g` element is a [container
349343
element](http://www.w3.org/TR/SVG/struct.html), much like the `div` element in
350344
HTML. Setting a
351345
[transform](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) on a
@@ -361,20 +355,20 @@ generate. These tick values serve as data for reference lines:
361355
{% highlight js linenos %}
362356
chart.selectAll("line")
363357
.data(x.ticks(10))
364-
.enter().append("svg:line")
358+
.enter().append("line")
365359
.attr("x1", x)
366360
.attr("x2", x)
367361
.attr("y1", 0)
368362
.attr("y2", 120)
369-
.attr("stroke", "#ccc");
363+
.style("stroke", "#ccc");
370364
{% endhighlight %}
371365

372366
Positioning text above the reference lines reveals their value:
373367

374368
{% highlight js linenos %}
375-
chart.selectAll("text.rule")
369+
chart.selectAll(".rule")
376370
.data(x.ticks(10))
377-
.enter().append("svg:text")
371+
.enter().append("text")
378372
.attr("class", "rule")
379373
.attr("x", x)
380374
.attr("y", 0)
@@ -389,36 +383,35 @@ put reference labels in a separate `g` container.) Lastly, add a single black
389383
line for the *y*-axis:
390384

391385
{% highlight js linenos %}
392-
chart.append("svg:line")
386+
chart.append("line")
393387
.attr("y1", 0)
394388
.attr("y2", 120)
395-
.attr("stroke", "#000");
389+
.style("stroke", "#000");
396390
{% endhighlight %}
397391

398392
Et voilà!
399393

400394
<script type="text/javascript">
401-
var chart = d3.select(".content")
402-
.append("svg:svg")
395+
var chart = d3.select(".content").append("svg")
403396
.attr("class", "chart")
404397
.attr("width", 440)
405398
.attr("height", 140)
406399
.style("margin-left", "32px") // Tweak alignment…
407-
.append("svg:g")
400+
.append("g")
408401
.attr("transform", "translate(10,15)");
409402

410403
chart.selectAll("line")
411404
.data(x.ticks(10))
412-
.enter().append("svg:line")
405+
.enter().append("line")
413406
.attr("x1", x)
414407
.attr("x2", x)
415408
.attr("y1", 0)
416409
.attr("y2", 120)
417-
.attr("stroke", "#ccc");
410+
.style("stroke", "#ccc");
418411

419-
chart.selectAll("text.rule")
412+
chart.selectAll(".rule")
420413
.data(x.ticks(10))
421-
.enter().append("svg:text")
414+
.enter().append("text")
422415
.attr("x", x)
423416
.attr("y", 0)
424417
.attr("dy", -3)
@@ -427,14 +420,14 @@ chart.selectAll("text.rule")
427420

428421
chart.selectAll("rect")
429422
.data(data)
430-
.enter().append("svg:rect")
423+
.enter().append("rect")
431424
.attr("y", y)
432425
.attr("width", x)
433426
.attr("height", y.rangeBand());
434427

435-
chart.selectAll("text.bar")
428+
chart.selectAll(".bar")
436429
.data(data)
437-
.enter().append("svg:text")
430+
.enter().append("text")
438431
.attr("class", "bar")
439432
.attr("x", x)
440433
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
@@ -443,10 +436,10 @@ chart.selectAll("text.bar")
443436
.attr("text-anchor", "end")
444437
.text(String);
445438

446-
chart.append("svg:line")
439+
chart.append("line")
447440
.attr("y1", 0)
448441
.attr("y2", 120)
449-
.attr("stroke", "#000");
442+
.style("stroke", "#000");
450443
</script>
451444

452445
This tutorial covered many of the core concepts in D3, including selections,

0 commit comments

Comments
 (0)