Last active
September 3, 2015 00:40
-
-
Save enjalot/d524bd18fbff11046c75 to your computer and use it in GitHub Desktop.
datasana #2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
</head> | |
<style> | |
body { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
</style> | |
<body> | |
<svg width=100% height=100%> | |
<rect id="base" x=100 y=300 width=600 height=6></rect> | |
<rect id="box" x=100 y=0 width=600 height=300 fill="none" stroke="#000"></rect> | |
</svg> | |
<script> | |
var list = [ | |
5, 19, -10, 6, 29 | |
] | |
var chartX = 121; | |
var chartWidth = 675; | |
var chartHeight = 485; | |
var xMargin = 15; | |
d3.select("#box").attr({ | |
width: chartWidth, | |
height: chartHeight, | |
x: chartX | |
}) | |
d3.select("#base").attr({ | |
width: chartWidth, | |
x: chartX, | |
y: chartHeight | |
}) | |
var xscale = d3.scale.linear() | |
.domain([0, list.length-1]) | |
.range([chartX + xMargin, chartX + chartWidth - xMargin]) | |
var yscale = d3.scale.linear() | |
.domain([0, d3.max(list, function(d) { return d })]) | |
.range([chartHeight, 0]) | |
var svg = d3.select("svg"); | |
var circles = svg.selectAll("circle") | |
.data(list) | |
.enter() | |
.append("circle") | |
.attr({ | |
r: 10, | |
cx: function(d,i) { | |
return xscale(i); | |
}, | |
cy: function(d,i) { | |
return yscale(d); | |
} | |
}) | |
var bars = svg.selectAll("rect.bar") | |
.data(list) | |
.enter() | |
.append("rect").classed("bar", true) | |
.attr({ | |
x: function(d,i) { | |
return xscale(i); | |
}, | |
y: function(d,i) { | |
return yscale(d); | |
}, | |
width: 10, | |
height: function(d,i) { | |
return chartHeight - yscale(d) | |
}, | |
fill: "orange" | |
}) | |
var barLines = svg.selectAll("line") | |
.data(list) | |
.enter() | |
.append("line") | |
.attr({ | |
x1: function(d,i) { | |
return xscale(i) | |
}, | |
y1: function(d,i) { | |
return yscale(d); | |
}, | |
x2: function(d,i) { | |
return xscale(i) | |
}, | |
y2: function(d,i) { | |
return yscale.range()[0] //chartHeight | |
}, | |
stroke: "#7a7a7a", | |
"stroke-width": 10 | |
}) | |
var line = svg.selectAll("path") | |
.data([list]) | |
.enter() | |
.append("path") | |
.attr({ | |
d: function(entries,index) { | |
var x = xscale(0); | |
var y = yscale(entries[0]); | |
var string = "M" + [x,y]; | |
console.log("STRING", string); | |
for(var i = 1; i < entries.length; i++) { | |
x = xscale(i); | |
y = yscale(entries[i]); | |
string += "L" + [x,y]; | |
} | |
console.log("STRING AFTER", string) | |
return string | |
}, | |
fill: "none", | |
stroke: "#000" | |
}) | |
</script> | |
</body> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment