grouped lines

by nancynancy

HTML

<pre id="data">
carat,cut,color,clarity,depth,table,price,x,y,z
0.41,Ideal,G,VS1,60.8,56,899,4.79,4.82,2.92
0.3,Ideal,F,VS1,62.1,55,612,4.31,4.35,2.69
1.25,Ideal,H,SI1,62.2,57,6661,6.86,6.9,4.28
0.41,Ideal,G,VS2,61.4,55,1061,4.8,4.75,2.93
0.53,Premium,E,VVS2,62.4,56,2331,5.19,5.17,3.23
1.14,Very Good,G,VS2,63.2,56,6435,6.67,6.63,4.2
0.51,Premium,G,SI1,62,59,1053,5.12,5.1,3.17
1.51,Good,H,VVS2,63.1,59,11826,7.26,7.28,4.59
1.31,Ideal,J,SI1,62.5,56,6337,6.95,7.04,4.37
0.33,Very Good,I,VVS1,61.7,61,608,4.43,4.45,2.74
0.42,Ideal,F,VS1,62.3,55,1103,4.79,4.77,2.98
1.01,Good,E,VS2,60.8,63,6250,6.44,6.46,3.92
1,Premium,F,SI1,62.7,59,5292,6.4,6.36,4
0.51,Ideal,G,VVS1,61.9,53,1919,5.14,5.2,3.2
0.34,Ideal,H,SI1,61.5,55,647,4.53,4.55,2.79
0.23,Premium,F,VVS2,61.3,59,445,3.94,3.99,2.43
0.3,Ideal,F,VS2,62.9,57,776,4.29,4.27,2.69
1.14,Premium,F,SI1,60.4,58,6320,6.82,6.79,4.11
0.33,Ideal,J,VVS1,62.1,54,509,4.45,4.47,2.77
0.41,Premium,H,SI1,60.9,60,683,4.79,4.83,2.93
2.01,Premium,J,SI2,62.8,58,12407,8.09,8,5.05
2.01,Very Good,I,SI1,60.3,59,15126,8.14,8.21,4.93
0.4,Very Good,D,VS2,62.8,58,993,4.66,4.71,2.94
1.09,Premium,D,SI1,61.6,58,5799,6.61,6.57,4.06
0.3,Ideal,F,VS1,61.5,55,612,4.31,4.34,2.66
0.77,Very Good,H,SI2,63.6,58,2129,5.77,5.81,3.68
0.38,Very Good,F,VS1,62.7,57,883,4.71,4.64,2.93
0.54,Premium,E,VS1,60.3,58,1939,5.26,5.32,3.19
0.93,Premium,F,SI1,58.8,60,4010,6.49,6.37,3.78
0.32,Ideal,H,VS1,61.1,56,561,4.44,4.46,2.72
0.78,Premium,F,SI2,62.8,56,2200,5.9,5.86,3.69
0.4,Ideal,E,VS1,61.2,55,1005,4.79,4.76,2.92
0.41,Ideal,D,VS2,62.4,55,1076,4.79,4.76,2.98
0.73,Very Good,E,SI1,61.6,59,2760,5.77,5.78,3.56
2.52,Very Good,G,SI2,63.2,58,17689,8.65,8.61,5.45
1.06,Ideal,D,VVS2,62,56,12053,6.53,6.57,4.06
0.8,Very Good,D,IF,63.3,57,6834,5.85,5.87,3.71
1.5,Premium,H,VS2,62.2,58,10291,7.27,7.36,4.55
2.17,Good,H,SI2,58.9,62,16036,8.48,8.52,5.01
1.58,Ideal,G,SI1,62.2,55,11927,7.44,7.5,4.65
2.03,Premium,H,VS2,62.1,56,18139,8.2,8.12,5.07
0.58,Very...

CSS

pre {
  display:none;
  }

path
{
  fill: none;
  stroke: #000;
}

.line {
  fill: none;
//  stroke: green;
//  stroke-width: 3.5px;
}

JavaScript

var margin = {top: 20, right: 40, bottom: 100, left: 100},
    width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().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()
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.carat); });

var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = d3.csv.parse(d3.select("pre#data").text());
data.forEach(function(d) {
  d.x = +d.x;
  d.carat = +d.carat;
  //d.cut = +d.cut;
})

data.sort(function(a,b) { return a.x - b.x; });

x.domain(d3.extent(data, function(d) { return d.x; })).nice();
y.domain(d3.extent(data, function(d) { return d.carat;  })).nice();

// Nest the entries by symbol
var dataNest = d3.nest()
.key(function(d) {return d.cut;})
.entries(data);

console.log({dataNest});

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .attr("y", 6)
  .attr("x", 5)
  .attr("dy", ".35em")
  .attr("transform", "rotate(45)")
  .style("text-anchor", "start")

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("class", "label")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end");
//  .text("Price");

var color = d3.scale.category10();   // set the colour scale

// Loop through each symbol / key
dataNest.forEach(function(d) {
  svg.append("path")
    .attr("class", "line")
    .style("stroke", function() { // Add the colours dynamically
                return d.color = color(d.key); })
    .attr("d", line(d.values));

});