Tufte slopegraph

forked from hyonschu's block: fresh block

forked from hyonschu's block: Tufte slopegraph

<!DOCTYPE html>
<html>
	<head><meta charset="UTF-8">
		<title>Page Titles</title>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<script src = 'lib/underscore-min.js'></script>
		<style>
		.axis path, .yaxis path { fill: none;  shape-rendering: auto; }
		.axis text, .yaxis text, .notes{ font-family: "Times"; font-size: 12px; color: black;}
		.labels { font-family: serif; font-size: 11px; color: black;}

</style>
	</head>
	<body>
		<script>

// create new JSON file {year: x, values: y}
		d3.csv('https://raw.githubusercontent.com/hyonschu/data/master/cancer_survival_rates.csv', function(csv) {
			var dataset = []
			for (var i=0; i<csv.length; i++) {
				// console.log(data[i])
				dataset.push( csv[i] )
			}

// layout variables
				var pad = 50;
				var hh = 1200;
				var ww = 600;
				var listed=[];
				var tmplist=[];
				var ten=[];
				var fifteen=[];
				var twenty=[];
				var xmarks=[0,175,275,375,475]

// CREATE SVG CANVAS
				var canvas = d3.select('body')
					.append('svg').attr({'height': hh,'width': ww })

// CREATE SCALES TO AUTO ADJUST USING D3.SCALE
				var xscale = d3.scale.linear()
					.range([pad,ww-pad]).domain([0,100])

var yscale = d3.scale.linear()
					.range([hh-pad,pad]).domain([0,100])

// LETS TRY DRAWINGSOME PATHS YALL

canvas.selectAll('leftlabels')
				.data(dataset)
				.enter()
				.append('text')
				.text(function(d) {return d['group']})
				.attr({
					'class': 'labels',
					'y': function(d) {
						// var tmplist = [];
						var tmp = Math.round(d[5])
						if (tmplist.indexOf(tmp)>=0) {
							while (tmplist.indexOf(tmp)>=0) {
								tmp++
							}
							tmplist.push(tmp) }
						else {
								tmplist.push(tmp)
							}
						return yscale(tmplist[tmplist.length-1])
						},
					'x': xmarks[0]

})

// 'text-anchor':'end',
					// 'text-align': 'right'

canvas.selectAll('five')
				.data(dataset)
				.enter()
				.append('text')
				.text(function(d,i) {return (d[5])})
				.attr({
					'class': 'labels',
					'y': function(d,i) {
						return yscale(tmplist[i])},
					'x': xmarks[1],
				})

canvas.selectAll('ten')
					.data(dataset)
					.enter()
					.append('text')
					.text(function(d) {return d3.round(d[10], 1)})
					.attr({
						'class': 'labels',
						'y': function(d) {
							// var tmplist = [];
							var tmp = Math.floor(d[10])
							if (ten.indexOf(tmp)>=0) {
								while (ten.indexOf(tmp)>=0) {
									tmp++
								}
								ten.push(tmp) }
							else {
									ten.push(tmp)
								}
							return yscale(ten[ten.length-1])
							},
						'x': xmarks[2],
					})

canvas.selectAll('fifteen')
					.data(dataset)
					.enter()
					.append('text')
					.text(function(d) {return d3.round(d[15],1)})
					.attr({
						'class': 'labels',
						'y': function(d) {
							// var tmplist = [];
							var tmp = Math.floor(d[15])
							if (fifteen.indexOf(tmp)>=0) {
								while (fifteen.indexOf(tmp)>=0) {
									tmp++
								}
								fifteen.push(tmp) }
							else {
									fifteen.push(tmp)
								}
							return yscale(fifteen[fifteen.length-1])
							},
						'x': xmarks[3],
					})

canvas.selectAll('twenty')
					.data(dataset)
					.enter()
					.append('text')
					.text(function(d) {return d3.round(d[20],1)})
					.attr({
						'class': 'labels',
						'y': function(d) {
							// var tmplist = [];
							var tmp = Math.floor(d[20])
							if (twenty.indexOf(tmp)>=0) {
								while (twenty.indexOf(tmp)>=0) {
									tmp++
								}
								twenty.push(tmp) }
							else {
									twenty.push(tmp)
								}
							return yscale(twenty[twenty.length-1])
							},
						'x': xmarks[4],
					})

var line = d3.svg.line()
    				.x(function(d) {console.log(d) ; return d; })
        		.y(function(d) { return d });
					// array=[1,3,4,6,7,45,746,5,6]

canvas.selectAll("path")
					        .data(dataset).enter()
					        .append("path")
					    .attr("d", function(d) {
								line.x(d[5])
								line.y(d[10])

console.log(d)
							}) // replacing line with M0,0l100,100 draws a line
					            .attr("class", "line")
					            .style("stroke", "black" )
					            .attr('fill', 'none');

})
		// console.log(dataset)

</script>

</body>
</html>