Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 00:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mbostock/1117287 to your computer and use it in GitHub Desktop.
Save mbostock/1117287 to your computer and use it in GitHub Desktop.
Segmented Lines
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke: #000;
stroke-width: 7px;
stroke-linejoin: round;
}
circle {
fill: #ccc;
stroke: #777;
stroke-width: 1px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var n = 4,
m = 64;
var x = d3.scale.linear()
.domain([0, m - 1])
.range([0, width]);
var y = d3.scale.linear()
.range([height - 20, 20]);
var z = d3.scale.linear()
.domain([0, Math.PI / 2, Math.PI])
.range(["#0f0", "#777", "#f00"]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var line = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
d3.json("series.json", function(error, series) {
if (error) throw error;
y.domain([0, d3.max(d3.merge(series))]);
var g = svg.selectAll("g")
.data(series)
.enter().append("g");
var path = g.selectAll("path")
.data(segments)
.enter().append("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(function(d) { return d; })
.enter().append("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 i = 0, n = values.length, segments = new Array(n - 1);
while (++i < n) segments[i - 1] = [[i - 1, values[i - 1]], [i, values[i]]];
return segments;
}
</script>
[[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]]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment