MNoichl/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple graph demonstrating the display of multiple lines. This was written using d3.js v4 and is a follow on to the simple graph example here.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
forked from d3noob's block: Multiple line graph in v4

  
## data2.csv

          
            k
            l1
            l2

            
              2
              0.113212457932
              0.101603091592

            
              3
              0.150978458014
              0.154857017872

            
              4
              0.141962927145
              0.139643053447

            
              5
              0.143957260472
              0.154571208154

            
              6
              0.150923173291
              0.160486118216

            
              7
              0.182861275556
              0.190745435277

            
              8
              0.192743121166
              0.205195996953

            
              9
              0.221165804717
              0.2294743561

            
              10
              0.212572108253
              0.213632388619

            
              11
              0.252002572861
              0.240550597334

            
              12
              0.13836260635
              0.218561345375

            
              13
              0.23563938429
              0.246147673524

            
              14
              0.225977637707
              0.2591358681

            
              15
              0.22947739055
              0.2180824069

            
              16
              0.229417913831
              0.179158050775

            
              17
              0.276699637091
              0.263459631931

            
              18
              0.157588816952
              0.267329039081

            
              19
              0.283205463534
              0.259024355004

            
              20
              0.253708343633
              0.184403937991

            
              21
              0.267479724987
              0.241620826205

            
              22
              0.252616754808
              0.273891147242

            
              23
              0.299342817098
              0.230917393366

            
              24
              0.246888583853
              0.260551346229

            
              25
              0.288373611785
              0.246597317525

            
              26
              0.247987198639
              0.280598526788

            
              27
              0.290412012573
              0.235758436828

            
              28
              0.298049416629
              0.289914126959

            
              29
              0.234295107925
              0.204764110292

            
              30
              0.239722979186
              0.237907736124

            
              31
              0.235005320686
              0.245737071791

            
              32
              0.279868743127
              0.218324260217

            
              33
              0.238531497029
              0.257828038009

            
              34
              0.250289799164
              0.238691393614

            
              35
              0.231100165308
              0.284560449992

            
              36
              0.239070648127
              0.287150983392

            
              37
              0.264845963911
              0.225455561062

            
              38
              0.232097881817
              0.222256987095

            
              39
              0.258411181766
              0.277984255675

            
              40
              0.237605791707
              0.213424942406

            
              41
              0.230341268378
              0.223427396789

            
              42
              0.255480951692
              0.260820792402

            
              43
              0.247291461088
              0.242430230212

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

</style>
<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
//var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleLinear().range([0,width]);
var y = d3.scaleLinear().range([height, 0]);

// define the 1st line
var valueline = d3.line()
    .x(function(d) { return x(d.k); })
    .y(function(d) { return y(d.l1); });

// define the 2nd line
var valueline2 = d3.line()
    .x(function(d) { return x(d.k); })
    .y(function(d) { return y((d.l2+d.l2)/2); });


// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// Get the data
d3.csv("data2.csv", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.k = +d.k;
      d.l1 = +d.l1;
      d.l2 = +d.l2;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.k; }));
  y.domain([0.1, d3.max(data, function(d) {
	  return Math.max(d.l1, d.l2); })]);

  // Add the valueline path.
  //svg.append("path")      .data([data])      .attr("class", "line")      .attr("d", valueline);

  // Add the valueline2 path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .style("stroke", "red")
      .attr("d", valueline2);

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

</script>
</body>
k	l1	l2
2	0.113212457932	0.101603091592
3	0.150978458014	0.154857017872
4	0.141962927145	0.139643053447
5	0.143957260472	0.154571208154
6	0.150923173291	0.160486118216
7	0.182861275556	0.190745435277
8	0.192743121166	0.205195996953
9	0.221165804717	0.2294743561
10	0.212572108253	0.213632388619
11	0.252002572861	0.240550597334
12	0.13836260635	0.218561345375
13	0.23563938429	0.246147673524
14	0.225977637707	0.2591358681
15	0.22947739055	0.2180824069
16	0.229417913831	0.179158050775
17	0.276699637091	0.263459631931
18	0.157588816952	0.267329039081
19	0.283205463534	0.259024355004
20	0.253708343633	0.184403937991
21	0.267479724987	0.241620826205
22	0.252616754808	0.273891147242
23	0.299342817098	0.230917393366
24	0.246888583853	0.260551346229
25	0.288373611785	0.246597317525
26	0.247987198639	0.280598526788
27	0.290412012573	0.235758436828
28	0.298049416629	0.289914126959
29	0.234295107925	0.204764110292
30	0.239722979186	0.237907736124
31	0.235005320686	0.245737071791
32	0.279868743127	0.218324260217
33	0.238531497029	0.257828038009
34	0.250289799164	0.238691393614
35	0.231100165308	0.284560449992
36	0.239070648127	0.287150983392
37	0.264845963911	0.225455561062
38	0.232097881817	0.222256987095
39	0.258411181766	0.277984255675
40	0.237605791707	0.213424942406
41	0.230341268378	0.223427396789
42	0.255480951692	0.260820792402
43	0.247291461088	0.242430230212
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2px;
	}

	</style>
	<body>

	<!-- load the d3.js library -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	// set the dimensions and margins of the graph
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// parse the date / time
	//var parseTime = d3.timeParse("%d-%b-%y");

	// set the ranges
	var x = d3.scaleLinear().range([0,width]);
	var y = d3.scaleLinear().range([height, 0]);

	// define the 1st line
	var valueline = d3.line()
	.x(function(d) { return x(d.k); })
	.y(function(d) { return y(d.l1); });

	// define the 2nd line
	var valueline2 = d3.line()
	.x(function(d) { return x(d.k); })
	.y(function(d) { return y((d.l2+d.l2)/2); });


	// append the svg obgect to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	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 + ")");

	// Get the data
	d3.csv("data2.csv", function(error, data) {
	if (error) throw error;

	// format the data
	data.forEach(function(d) {
	d.k = +d.k;
	d.l1 = +d.l1;
	d.l2 = +d.l2;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.k; }));
	y.domain([0.1, d3.max(data, function(d) {
	return Math.max(d.l1, d.l2); })]);

	// Add the valueline path.
	//svg.append("path") .data([data]) .attr("class", "line") .attr("d", valueline);

	// Add the valueline2 path.
	svg.append("path")
	.data([data])
	.attr("class", "line")
	.style("stroke", "red")
	.attr("d", valueline2);

	// Add the X Axis
	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	// Add the Y Axis
	svg.append("g")
	.call(d3.axisLeft(y));

	});

	</script>
	</body>