Examples: namespaces are optional as of v2.6.0.

examples/albers/albers.html

@@ -47,18 +47,18 @@ <h3>Albers Projection</h3>
     path = d3.geo.path().projection(xy);
 
 d3.select("body")
-  .append("svg:svg")
-  .append("svg:g")
+  .append("svg")
+  .append("g")
     .attr("id", "states");
 
 d3.json("../data/us-states.json", function(collection) {
   d3.select("#states")
     .selectAll("path")
       .data(collection.features)
-    .enter().append("svg:path")
+    .enter().append("path")
       .attr("d", path);
   d3.select("#states")
-    .append("svg:circle")
+    .append("circle")
       .attr("r", 10)
       .attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
 });

examples/area/area-radial.html

@@ -23,21 +23,21 @@
 var r = 960 / 2,
     data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; });
 
-var svg = d3.select("body").append("svg:svg")
+var svg = d3.select("body").append("svg")
     .data([data])
     .attr("width", r * 2)
     .attr("height", r * 2)
-  .append("svg:g")
+  .append("g")
     .attr("transform", "translate(" + r + "," + r + ")");
 
-svg.append("svg:path")
+svg.append("path")
     .attr("class", "area")
     .attr("d", d3.svg.area.radial()
     .innerRadius(r / 2)
     .outerRadius(function(d) { return r * d; })
     .angle(function(d, i) { return i / 180 * Math.PI; }));
 
-svg.append("svg:path")
+svg.append("path")
     .attr("class", "line")
     .attr("d", d3.svg.line.radial()
     .radius(function(d) { return r * d; })

examples/area/area.html

@@ -48,61 +48,61 @@
     y = d3.scale.linear().domain([0, 1]).range([h, 0]);
 
 var vis = d3.select("body")
-  .append("svg:svg")
+  .append("svg")
     .data([data])
     .attr("width", w + p * 2)
     .attr("height", h + p * 2)
-  .append("svg:g")
+  .append("g")
     .attr("transform", "translate(" + p + "," + p + ")");
 
 var rules = vis.selectAll("g.rule")
     .data(x.ticks(10))
-  .enter().append("svg:g")
+  .enter().append("g")
     .attr("class", "rule");
 
-rules.append("svg:line")
+rules.append("line")
     .attr("x1", x)
     .attr("x2", x)
     .attr("y1", 0)
     .attr("y2", h - 1);
 
-rules.append("svg:line")
+rules.append("line")
     .attr("class", function(d) { return d ? null : "axis"; })
     .attr("y1", y)
     .attr("y2", y)
     .attr("x1", 0)
     .attr("x2", w + 1);
 
-rules.append("svg:text")
+rules.append("text")
     .attr("x", x)
     .attr("y", h + 3)
     .attr("dy", ".71em")
     .attr("text-anchor", "middle")
     .text(x.tickFormat(10));
 
-rules.append("svg:text")
+rules.append("text")
     .attr("y", y)
     .attr("x", -3)
     .attr("dy", ".35em")
     .attr("text-anchor", "end")
     .text(y.tickFormat(10));
 
-vis.append("svg:path")
+vis.append("path")
     .attr("class", "area")
     .attr("d", d3.svg.area()
     .x(function(d) { return x(d.x); })
     .y0(h - 1)
     .y1(function(d) { return y(d.y); }));
 
-vis.append("svg:path")
+vis.append("path")
     .attr("class", "line")
     .attr("d", d3.svg.line()
     .x(function(d) { return x(d.x); })
     .y(function(d) { return y(d.y); }));
 
 vis.selectAll("circle.area")
     .data(data)
-  .enter().append("svg:circle")
+  .enter().append("circle")
     .attr("class", "area")
     .attr("cx", function(d) { return x(d.x); })
     .attr("cy", function(d) { return y(d.y); })

examples/axis/axis-alternating.html

@@ -29,18 +29,18 @@
     x = d3.scale.linear().domain([.05, .95]).range([0, w]),
     y = d3.scale.linear().range([0, h]);
 
-var svg = d3.select("body").append("svg:svg")
+var svg = d3.select("body").append("svg")
     .attr("width", w + m[1] + m[3])
     .attr("height", h + m[0] + m[2])
-  .append("svg:g")
+  .append("g")
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "x minor")
     .attr("transform", "translate(0," + h + ")")
     .call(d3.svg.axis().scale(x).tickSubdivide(2).tickSize(-6));
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + h + ")")
     .call(d3.svg.axis().scale(x));

examples/axis/axis-ggplot2.html

@@ -43,22 +43,22 @@
     x = d3.scale.linear().domain([.05, .95]).range([0, w]),
     y = d3.scale.linear().range([0, h]);
 
-var svg = d3.select("body").append("svg:svg")
+var svg = d3.select("body").append("svg")
     .attr("width", w + m[1] + m[3])
     .attr("height", h + m[0] + m[2])
-  .append("svg:g")
+  .append("g")
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
-svg.append("svg:rect")
+svg.append("rect")
     .attr("width", w)
     .attr("height", h);
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "x grid")
     .attr("transform", "translate(0," + h + ")")
     .call(d3.svg.axis().scale(x).tickSubdivide(1).tickSize(-h));
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + h + ")")
     .call(d3.svg.axis().scale(x));

examples/axis/axis-multiples.html

@@ -82,30 +82,30 @@
   // Add an SVG element for each symbol, with the desired dimensions and margin.
   var svg = d3.select("body").selectAll("svg")
       .data(symbols)
-    .enter().append("svg:svg")
+    .enter().append("svg")
       .attr("width", w + m[1] + m[3])
       .attr("height", h + m[0] + m[2])
-    .append("svg:g")
+    .append("g")
       .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
   // Add the area path elements. Note: the y-domain is set per element.
-  svg.append("svg:path")
+  svg.append("path")
       .attr("class", "area")
       .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
 
   // Add the x-axis.
-  svg.append("svg:g")
+  svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + h + ")")
       .call(xAxis);
 
   // Add the line path elements. Note: the y-domain is set per element.
-  svg.append("svg:path")
+  svg.append("path")
       .attr("class", "line")
       .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
 
   // Add a small label for the symbol name.
-  svg.append("svg:text")
+  svg.append("text")
       .attr("x", w - 6)
       .attr("y", h - 6)
       .attr("text-anchor", "end")

examples/axis/axis-orientations.html

@@ -34,26 +34,26 @@
 var yAxis = d3.svg.axis()
     .scale(y);
 
-var svg = d3.select("body").append("svg:svg")
+var svg = d3.select("body").append("svg")
     .attr("width", w + m[1] + m[3])
     .attr("height", h + m[0] + m[2])
-  .append("svg:g")
+  .append("g")
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "bottom axis")
     .attr("transform", "translate(0," + h + ")")
     .call(xAxis.orient("bottom"));
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "top axis")
     .call(xAxis.orient("top"));
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "left axis")
     .call(yAxis.orient("left"));
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "right axis")
     .attr("transform", "translate(" + w + ",0)")
     .call(yAxis.orient("right"));

examples/axis/axis-transition.html

@@ -91,45 +91,45 @@
   y.domain([0, d3.max(values, function(d) { return d.price; })]);
 
   // Add an SVG element with the desired dimensions and margin.
-  var svg = d3.select("body").append("svg:svg")
+  var svg = d3.select("body").append("svg")
       .attr("width", w + m[1] + m[3])
       .attr("height", h + m[0] + m[2])
-    .append("svg:g")
+    .append("g")
       .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
   // Add the clip path.
-  svg.append("svg:clipPath")
+  svg.append("clipPath")
       .attr("id", "clip")
-    .append("svg:rect")
+    .append("rect")
       .attr("width", w)
       .attr("height", h);
 
   // Add the area path.
-  svg.append("svg:path")
+  svg.append("path")
       .attr("class", "area")
       .attr("clip-path", "url(#clip)")
       .attr("d", area(values));
 
   // Add the x-axis.
-  svg.append("svg:g")
+  svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + h + ")")
       .call(xAxis);
 
   // Add the y-axis.
-  svg.append("svg:g")
+  svg.append("g")
       .attr("class", "y axis")
       .attr("transform", "translate(" + w + ",0)")
       .call(yAxis);
 
   // Add the line path.
-  svg.append("svg:path")
+  svg.append("path")
       .attr("class", "line")
       .attr("clip-path", "url(#clip)")
       .attr("d", line(values));
 
   // Add a small label for the symbol name.
-  svg.append("svg:text")
+  svg.append("text")
       .attr("x", w - 6)
       .attr("y", h - 6)
       .attr("text-anchor", "end")

examples/azimuthal/azimuthal.js

@@ -1,14 +1,14 @@
 var xy = d3.geo.azimuthal().scale(240).mode("stereographic"),
     circle = d3.geo.greatCircle(),
     path = d3.geo.path().projection(xy),
-    svg = d3.select("body").append("svg:svg");
+    svg = d3.select("body").append("svg");
 
 d3.json("../data/world-countries.json", function(collection) {
   svg.selectAll("path")
       .data(collection.features)
-    .enter().append("svg:path")
+    .enter().append("path")
       .attr("d", function(d) { return path(circle.clip(d)); })
-    .append("svg:title")
+    .append("title")
       .text(function(d) { return d.properties.name; });
 });
 

examples/bar/bar-hierarchy.html

@@ -44,24 +44,24 @@
     .scale(x)
     .orient("top");
 
-var svg = d3.select("body").append("svg:svg")
+var svg = d3.select("body").append("svg")
     .attr("width", w + m[1] + m[3])
     .attr("height", h + m[0] + m[2])
-  .append("svg:g")
+  .append("g")
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
-svg.append("svg:rect")
+svg.append("rect")
     .attr("class", "background")
     .attr("width", w)
     .attr("height", h)
     .on("click", up);
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "x axis");
 
-svg.append("svg:g")
+svg.append("g")
     .attr("class", "y axis")
-  .append("svg:line")
+  .append("line")
     .attr("y1", "100%");
 
 d3.json("../data/flare.json", function(root) {
@@ -185,23 +185,23 @@
 
 // Creates a set of bars for the given data node, at the specified index.
 function bar(d) {
-  var bar = svg.insert("svg:g", ".y.axis")
+  var bar = svg.insert("g", ".y.axis")
       .attr("class", "enter")
       .attr("transform", "translate(0,5)")
     .selectAll("g")
       .data(d.children)
-    .enter().append("svg:g")
+    .enter().append("g")
       .style("cursor", function(d) { return !d.children ? null : "pointer"; })
       .on("click", down);
 
-  bar.append("svg:text")
+  bar.append("text")
       .attr("x", -6)
       .attr("y", y / 2)
       .attr("dy", ".35em")
       .attr("text-anchor", "end")
       .text(function(d) { return d.name; });
 
-  bar.append("svg:rect")
+  bar.append("rect")
       .attr("width", function(d) { return x(d.value); })
       .attr("height", y);
 

examples/bonne/bonne.html

@@ -46,15 +46,15 @@ <h3>Bonne Projection</h3>
 var xy = d3.geo.bonne(),
     path = d3.geo.path().projection(xy);
 
-var countries = d3.select("body").append("svg:svg")
+var countries = d3.select("body").append("svg")
     .attr("id", "countries");
 
 d3.json("../data/world-countries.json", function(collection) {
   countries.selectAll("path")
       .data(collection.features)
-    .enter().append("svg:path")
+    .enter().append("path")
       .attr("d", path)
-    .append("svg:title")
+    .append("title")
       .text(function(d) { return d.properties.name; });
 });