mbostock · February 16, 2017 15:23 · Feb 9, 2016 · Oct 31, 2015 · Jun 11, 2015 · Oct 12, 2012
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
 
 </style>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script>
 
 var data = d3.range(20).map(function(i) {

diff --git a/index.html b/index.html
@@ -6,7 +6,8 @@
   font: 10px sans-serif;
 }
 
-.axis path, .axis line {
+.axis path,
+.axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
@@ -26,7 +27,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script>
 
 var data = d3.range(20).map(function(i) {
@@ -86,4 +87,4 @@
     .attr("cy", line.y())
     .attr("r", 3.5);
 
-</script>
+</script>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -1 +1,8 @@
-D3 2.10 allows you to implement custom interpolators for [d3.svg.line](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line) and [d3.svg.area](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area). This contrived example shows how to draw arcs between data points using SVG’s [elliptical arc path segments](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands).
+D3 2.10 allows you to implement custom interpolators for [d3.svg.line](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line) and [d3.svg.area](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area). This contrived example shows how to draw arcs between data points using SVG’s [elliptical arc path segments](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands).
+
+```javascript
+var line = d3.svg.line()
+    .interpolate(function(points) { return points.join("A 1,1 0 0 1 "); })
+    .x(function(d) { return x(d.x); })
+    .y(function(d) { return y(d.y); });
+```
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@
     .orient("left");
 
 var line = d3.svg.line()
-    .interpolate(function(points) { return points.join("A 1,1 0 0 1 "); })
+    .interpolate(function(points) { return points.join("A 1,1 0 0 1 "); }) // custom interpolator
     .x(function(d) { return x(d.x); })
     .y(function(d) { return y(d.y); });
 

diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
 
 </style>
 <body>
-<script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script>
+<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
 <script>
 
 var data = d3.range(20).map(function(i) {
@@ -86,4 +86,4 @@
     .attr("cy", line.y())
     .attr("r", 3.5);
 
-</script>
+</script>
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
   return {x: i / 19, y: (Math.sin(i / 3) + 2) / 4};
 });
 
-var margin = {top: 10, right: 10, bottom: 20, left: 40},
+var margin = {top: 20, right: 30, bottom: 30, left: 40},
     width = 960 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
 

diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+D3 2.10 allows you to implement custom interpolators for [d3.svg.line](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line) and [d3.svg.area](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area). This contrived example shows how to draw arcs between data points using SVG’s [elliptical arc path segments](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands).
diff --git a/index.html b/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  font: 10px sans-serif;
+}
+
+.axis path, .axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.line {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.dot {
+  fill: white;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+</style>
+<body>
+<script src="https://raw.github.com/mbostock/d3/2.10.0/d3.v2.min.js"></script>
+<script>
+
+var data = d3.range(20).map(function(i) {
+  return {x: i / 19, y: (Math.sin(i / 3) + 2) / 4};
+});
+
+var margin = {top: 10, right: 10, bottom: 20, left: 40},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+var x = d3.scale.linear()
+    .domain([0, 1])
+    .range([0, width]);
+
+var y = d3.scale.linear()
+    .domain([0, 1])
+    .range([height, 0]);
+
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom");
+
+var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient("left");
+
+var line = d3.svg.line()
+    .interpolate(function(points) { return points.join("A 1,1 0 0 1 "); })
+    .x(function(d) { return x(d.x); })
+    .y(function(d) { return y(d.y); });
+
+var svg = d3.select("body").append("svg")
+    .datum(data)
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+svg.append("g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0," + height + ")")
+    .call(xAxis);
+
+svg.append("g")
+    .attr("class", "y axis")
+    .call(yAxis);
+
+svg.append("path")
+    .attr("class", "line")
+    .attr("d", line);
+
+svg.selectAll(".dot")
+    .data(data)
+  .enter().append("circle")
+    .attr("class", "dot")
+    .attr("cx", line.x())
+    .attr("cy", line.y())
+    .attr("r", 3.5);
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		D3 2.10 allows you to implement custom interpolators for [d3.svg.line](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line) and [d3.svg.area](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area). This contrived example shows how to draw arcs between data points using SVG’s [elliptical arc path segments](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands).
No results found