Skip to content

Instantly share code, notes, and snippets.

@hyonschu

hyonschu/gist:040ebb341ef3a1c4aac3

Created June 16, 2014 04:51
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/040ebb341ef3a1c4aac3 to your computer and use it in GitHub Desktop.
Save hyonschu/040ebb341ef3a1c4aac3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dark Souls II Body Armor Comparison</title>
<style type="text/css">
.yaxis path,
.yaxis line,
.xaxis path,
.xaxis line {
fill: none;
stroke: #AAA;
shape-rendering: crispEdges;
}
.yaxis,
.xaxis {
font-family: sans-serif;
font-size: 11px;
fill: #999;
}
.titlex {
font-family: sans-serif;
font-size: 14px;
fill: orange;
}
</style>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body bgcolor="black">
<div style="text-align:center;" class="mainchart" width='50'>
<h1 style="color: gray; text-align:center; font-family:Georgia; font-size:32px">Dark Souls II Body Armor Comparison</h1>
<script type="text/javascript">
// load the csv file!
var width = 720
var height = 280
var dataset
var padding = 22
d3.csv("body.csv", function(data) {
data.forEach(function(d) {
d.Phys = +d.Phys;
d.Weight = +d.Weight;
d.Poise = +d.Poise;
d.Dur = +d.Dur;
d.Mag = +d.Mag;
d.Fire = +d.Fire;
d.Light = +d.Light;
d.Dark = +d.Dark;
d['Total Defense'] = +d['Total Defense'];
});
durD = [0, 0.73537253793028479, 255, 28.412505932894664]
totalD =[0, -3.8152939360143563, 1559, 21.764254501971635]
physD = [0, -1.2297935879109552, 437, 22.496383451350237]
poiseD = [0, 4.0077181112133058, 47.0, 21.730141021739236]
magD = [0, 9.4949059782753427, 135, 6.0664293336673314]
dataset=data;
var color = d3.scale.category10();
var xsc = d3.scale.linear().range([padding, width-padding]).domain([0, d3.max(data, function(d) { return d.Phys; })])
var ysc = d3.scale.linear().range([padding, height-padding]).domain([0, d3.max(data, function(d) { return d.Weight; })])
//Define X axis
var xAxis = d3.svg.axis()
.scale(xsc)
.orient("bottom")
//Define Y axis
var yAxis = d3.svg.axis()
.scale(d3.scale.linear().range([height-padding,0]).domain([0, d3.max(data, function(d) { return d.Weight; })]))
.orient("left")
.ticks(5)
//generating charts
var charts = d3.select(".mainchart")
.append("svg")
.attr({
"height": height,
"width": width
})
// generate title
var titleX = d3.selectAll("svg")
.append("text")
.text("Physical Defense x Weight")
.attr({
'x': 30,
'y': 15,
"fill": "white",
"class": "titlex"
})
//Create X axis
charts.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(0,"+(height-padding)+")")
.call(xAxis);
//Create Y axis
charts.append("g")
.attr("class", "yaxis")
.attr("transform", "translate("+padding+",0)")
.call(yAxis);
charts.append("line")
.data(data)
.attr("class", "regress")
.style("stroke", "pink")
.style("stroke-width", 2)
.attr("x1", xsc(physD[0]))
.attr("x2", xsc(physD[2]))
.attr("y2", height-ysc(physD[3]))
.attr("y1", height-ysc(physD[1]))
charts.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return xsc(d.Phys) } )
.attr("cy", function(d) { return height-ysc(d.Weight)} )
.attr("r", 5)
.attr("opacity", 0.4)
.style("fill", function(d) { return color(d.Reinforcement)})
// .style("stroke", function(d) {
// if (d.Effect != "")
// {return "yellow"}
// else {return "none"}
// })
.on("mouseover", function(d) {
d3.select(this).attr("r", 10).attr("opacity", 1);
})
.on("mouseout", function(d) {
d3.select(this).attr("r", 4).attr("opacity", 0.4) })
.append("svg:title")
.text(
function(d) {
if (d.Effect == "")
{return d.Name}
else
{return d.Name + '\n • '+ d.Effect; };
});
// .style("stroke", function(d) {
// if (d.Effect != "")
// {return "yellow"}
// else {return "none"}
// })
//Phys
d3.select(".phys")
.on("click", function(){
xsc = d3.scale.linear().range([padding, width-padding]).domain([0, d3.max(data, function(d) { return d.Phys; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("circle")
.transition()
.attr("cx", function(d) {
return xsc(d.Phys)
})
charts.selectAll("g.xaxis")
.transition()
.call(xAxis);
charts.select(".regress")
.transition()
.attr("x1", xsc(physD[0]))
.attr("x2", xsc(physD[2]))
.attr("y2", height-ysc(physD[3]))
.attr("y1", height-ysc(physD[1]))
.style("stroke", "pink")
titleX.text("Physical Defense x Weight")
})
//Total Defense
d3.select(".totaldef")
.on("click", function(){
xsc = d3.scale.linear().range([padding, width-padding]).domain([0, d3.max(data, function(d) { return d['Total Defense']; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis);
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d['Total Defense']) } )
charts.selectAll(".regress")
.transition()
.attr("x1", xsc(totalD[0]))
.attr("x2", xsc(totalD[2]))
.attr("y2", height-ysc(totalD[3]))
.attr("y1", height-ysc(totalD[1]))
.style("stroke", "pink")
titleX.text("Sum: All Defense x Weight")
});
//POISE
d3.select(".poise")
.on("click", function(){
xsc = d3.scale.linear().range([padding, width-padding])
.domain([0, d3.max(data, function(d) { return d.Poise; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis);
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d.Poise) } )
charts.select(".regress")
.transition()
.attr("x1", xsc(poiseD[0]))
.attr("x2", xsc(poiseD[2]))
.attr("y2", height-ysc(poiseD[3]))
.attr("y1", height-ysc(poiseD[1]))
.style("stroke", "pink")
titleX.text("Poise x Weight")
});
// DURABILITY
d3.select(".dur")
.on("click", function(){
xsc = d3.scale.linear().range([padding, width-padding])
.domain([0, d3.max(data, function(d) {
return d.Dur;
})])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis);
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d.Dur) } )
charts.select(".regress")
.transition()
.attr("x1", xsc(durD[0]))
.attr("x2", xsc(durD[2]))
.attr("y2", height-ysc(durD[3]))
.attr("y1", height-ysc(durD[1]))
.style("stroke", "pink")
titleX.text("Durability x Weight")
})
//MAG DEF
d3.select(".mag")
.on("click", function(){
xsc = d3.scale.linear().range([padding, width-padding])
.domain([0, d3.max(data, function(d) { return d.Mag; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis);
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d.Mag) } )
charts.select(".regress").transition()
.attr("x1", xsc(magD[0]))
.attr("x2", xsc(magD[2]))
.attr("y2", height-ysc(magD[3]))
.attr("y1", height-ysc(magD[1]))
.style("stroke", "pink")
titleX.text("Magic Defense x Weight")
});
//fire
d3.select(".fire")
.on("click", function(){
xsc = d3.scale.linear()
.range([padding, width-padding]).domain([0, d3.max(data, function(d) { return d.Fire; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis)
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d.Fire) } )
charts.select(".regress").transition().style("stroke", "black")
titleX.text("Fire Defense x Weight")
});
//light
d3.select(".light")
.on("click", function(){
xsc = d3.scale.linear()
.range([padding, width-padding]).domain([0, d3.max(data, function(d) { return d.Light; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis)
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d.Light) } )
charts.select(".regress").transition().style("stroke", "black")
titleX.text("Lightning Defense x Weight")
});
//dark
d3.select(".dark")
.on("click", function(){
xsc = d3.scale.linear()
.range([padding, width-padding]).domain([0, d3.max(data, function(d) { return d.Dark; })])
xAxis = d3.svg.axis().scale(xsc)
charts.selectAll("g.xaxis")
.transition()
.call(xAxis)
charts.selectAll("circle")
.transition()
.attr("cx", function(d) { return xsc(d.Dark) } )
charts.select(".regress").transition().style("stroke", "black")
titleX.text("Dark Defense x Weight")
});
}) // ends csv(function, data)
</script>
</div><center><font color=white size=4></br>
<span class = "phys">PHYSICAL DEF</span> | <span class = "totaldef">TOTAL DEF</span> | <span class = "poise">POISE </span> | <span class = "dur">DURABILITY</span></br>
<span class = "fire">MAGIC DEF</span> | <span class = "light">LIGHT DEF</span> | <span class = "dark">DARK DEF</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment