joshuarrrr · August 29, 2015 14:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
    <style type="text/css">

 path {
  fill: none;
  stroke: #000;
  stroke-width: 7px;
 }

 circle {
  fill: #ccc;
  stroke: #777;
  stroke-width: 1px;
 }

    </style>
  </head>
  <body>
    <script type="text/javascript">

 var w = 960,
    h = 500,
    n = 4,
    m = 64,
    x = d3.scale.linear().domain([0, m - 1]).range([0, w]),
    y = d3.scale.linear().range([h - 20, 20]),
    z = d3.scale.linear().domain([0, Math.PI / 2, Math.PI]).range(["#0f0", "#777", "#f00"]);

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

 var line = d3.svg.line()
    .x(function(d) { console.log(d[0]); return x(d[0]); })
    .y(function(d) { console.log(d[1]); return y(d[1]); });

 d3.json("series.json", function(series) {
  y.domain([0, d3.max(d3.merge(series))]);

  var g = svg.selectAll("g")
      .data(series)
    .enter().append("svg:g");

  var path = g.selectAll("path")
      .data(segments)
    .enter().append("svg:path")
      .attr("d", line)
      .style("stroke", function(d) { return z(Math.atan2(d[1][0] - d[0][0], d[1][1] - d[0][1])); });

  var circle = g.selectAll("circle")
      .data(Object)
    .enter().append("svg:circle")
      .attr("cx", function(d, i) { return x(i); })
      .attr("cy", function(d, i) { return y(d); })
      .attr("r", 3);
 });

 // Produce an array of two-element arrays [x,y] for each segment of values.
 function segments(values) {
  var segments = [], i = 0, n = values.length
  while (++i < n) segments.push([[i - 1, values[i - 1]], [i, values[i]]]);
  console.log(segments);
  return segments;
 }

    </script>
  </body>
 </html>
diff --git a/series.json b/series.json
 [[2.6789260777072372,3.3661788626086824,3.945765912804607,4.3967704073529825,4.708361217829621,4.8291361038040295,4.607910261651076,4.173219505204577,3.67405355338097,3.071635742225912,2.40577535675906,1.7691553879432829,1.3362160661265783,0.8905045432717759,0.6029978636169471,0.4738257117298671,0.32895377086943767,0.2556792328914885,0.15288808900963408,0.13505419572186206,0.11745745853407848,0.12755279453987803,0.16725568867381763,0.13535528105112662,0.11074600584111623,0.1553547830069371,0.174069018772339,0.19495084769991378,0.17718081200107857,0.1971319881927776,0.20518537394323638,0.4397874465448923,0.8683112637855163,1.6457261017273257,2.90132350731368,4.592178388487886,6.119030462921119,7.221256908665137,7.2692308874424185,6.323282725447738,4.81513099486056,3.1505303756792538,1.7669210976270864,0.9097342161504554,0.4894299647152823,0.29058311196674774,0.18546634267009207,0.20493809942490182,0.18477498256666805,0.1267707540730526,0.13582339947712335,0.18833586741794212,0.12560044682369834,0.18763032991572792,0.19680916666418077,0.13925716728434426,0.12027096104984925,0.17547352821598486,0.1171933938416223,0.16008900445863214,0.16202363641862297,0.10671894924184888,0.16573910808342474,0.13328301342675136],[0.1958131432736551,0.15691692954827904,0.11156459161670311,0.1087347431789802,0.19860806323511115,0.10239850597056577,0.17607649473949707,0.14555528988132,0.16995155347977065,0.13928909176029297,0.18973475494422024,0.19422070409636946,0.16871617306023837,0.17446476272307337,0.1137761572841555,0.11344822412356735,0.15101759762037548,0.12679111352190375,0.1229630780639127,0.13247370070312173,0.17878753659315408,0.10347676747478546,0.14692063815891743,0.15973213284742088,0.16083306067157538,0.13982846422586592,0.19739837308879943,0.18663611514493825,0.15784819060936572,0.11661883392371238,0.196309204492718,0.15305843076203018,0.15040321471169593,0.17222877943422646,0.1060683123068884,0.12776894934941085,0.15655775552149864,0.16036771801300348,0.13292055423371496,0.12808091454207898,0.13579945457167925,0.15594899826683106,0.15722048226743937,0.1147079909220338,0.17036385235842336,0.15264693608042207,0.10500905220402677,0.16803176365879122,0.15236288440611212,0.11139371641023735,0.18822100550745216,0.1195490880480306,0.12105880207635228,0.12843838278235614,0.17269307163461664,0.12958665597317948,0.17627146348342965,0.14349209204919355,0.13381112546076418,0.16189985441080912,0.13006309773340508,0.2447002539486919,0.34671114411361936,0.5324839936163404],[0.36968641830922316,0.5466266056361713,0.7781836440591513,0.9964730911586056,1.0483895805339556,1.059264082619234,0.9750146700889426,0.7628660076656778,0.526865534048869,0.3256401922993918,0.27713577549085744,0.1804140077859075,0.17418448490412364,0.19034204909016647,0.17162534130698676,0.12405557020926546,0.1854119310286842,0.13946345573593194,0.1035555173445174,0.1016542143928416,0.15068167129293772,0.10989012480483776,0.12320840279718619,0.14857472070199432,0.11953740781210169,0.10382305334789671,0.11861630429048173,0.10680760412942622,0.15648170579224827,0.1280320857418701,0.1439627910964191,0.150583032425493,0.1235026810783893,0.15870067584328354,0.11431613930035384,0.1737722685094923,0.17285098521970213,0.13461906618904323,0.11969569926150143,0.10620398910250516,0.11864413907751442,0.12353371614590294,0.12529809689149346,0.13826832098421554,0.12610939291779505,0.15681554959225644,0.19275938820193259,0.10915716664879391,0.17004038615601594,0.19054918548626892,0.13462327075493413,0.19890965131493107,0.1862261432844415,0.18435431861239757,0.16186765928522565,0.17422359196913623,0.10742989344232882,0.12654032963798148,0.1273280468117104,0.15479641809328284,0.17572149232535278,0.17227196682152998,0.1528002484819744,0.2201548581457083],[0.475577150408932,0.3825517339868662,0.3028471658019633,0.2069143057261192,0.19064404636934834,0.1779997564449322,0.19434930150785226,0.18042191923596612,0.18349462050315202,0.1236787994148454,0.13557605201028367,0.1968087170283119,0.19698337632013313,0.19824672179411823,0.11371818900054521,0.12686284166669534,0.15320421979540144,0.17019830551562504,0.18205798802745948,0.11185436580854316,0.14085723942515177,0.1466654120380998,0.16031203970360522,0.19657264447029707,0.1802642111597212,0.18831583795554074,0.15583755698588023,0.19969293387616605,0.1905774010659499,0.10044246598050878,0.13958003052948795,0.15475650698246962,0.13859933813952963,0.20053841523767182,0.2153522252691435,0.4527352489319669,0.8747918755911674,1.7915128213790323,3.015082819424563,4.323101206306187,5.11637177438746,5.424505929750382,5.789656811111745,5.9976052833716755,6.029269266804943,5.5993106666519035,4.7484958721562345,3.716609186216833,2.7557860324650347,1.7847418054389148,1.1289502324219984,0.6584311946429096,0.40690147198079496,0.24886212435946353,0.22213599558271063,0.1651928793825513,0.12227313638903632,0.1735440608963584,0.16643706592744822,0.1541020412477468,0.1870521823138681,0.15384024990322165,0.18872978465664395,0.1716808112202577]]
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
	<style type="text/css">

	path {
	fill: none;
	stroke: #000;
	stroke-width: 7px;
	}

	circle {
	fill: #ccc;
	stroke: #777;
	stroke-width: 1px;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500,
	n = 4,
	m = 64,
	x = d3.scale.linear().domain([0, m - 1]).range([0, w]),
	y = d3.scale.linear().range([h - 20, 20]),
	z = d3.scale.linear().domain([0, Math.PI / 2, Math.PI]).range(["#0f0", "#777", "#f00"]);

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

	var line = d3.svg.line()
	.x(function(d) { console.log(d[0]); return x(d[0]); })
	.y(function(d) { console.log(d[1]); return y(d[1]); });

	d3.json("series.json", function(series) {
	y.domain([0, d3.max(d3.merge(series))]);

	var g = svg.selectAll("g")
	.data(series)
	.enter().append("svg:g");

	var path = g.selectAll("path")
	.data(segments)
	.enter().append("svg:path")
	.attr("d", line)
	.style("stroke", function(d) { return z(Math.atan2(d[1][0] - d[0][0], d[1][1] - d[0][1])); });

	var circle = g.selectAll("circle")
	.data(Object)
	.enter().append("svg:circle")
	.attr("cx", function(d, i) { return x(i); })
	.attr("cy", function(d, i) { return y(d); })
	.attr("r", 3);
	});

	// Produce an array of two-element arrays [x,y] for each segment of values.
	function segments(values) {
	var segments = [], i = 0, n = values.length
	while (++i < n) segments.push([[i - 1, values[i - 1]], [i, values[i]]]);
	console.log(segments);
	return segments;
	}

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