Skip to content

Instantly share code, notes, and snippets.

@hyonschu

hyonschu/README.md

Created April 26, 2016 03:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hyonschu/9f479603500ae47bf1d8fe3af724ee43 to your computer and use it in GitHub Desktop.
Save hyonschu/9f479603500ae47bf1d8fe3af724ee43 to your computer and use it in GitHub Desktop.
Download ZIP
Tufte slopegraph
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment