|
<html> |
|
<style> |
|
.bar1 {fill: steelblue;} |
|
.bar2 {fill: red;} |
|
text {font-family: sans-serif;} |
|
</style> |
|
<div id="chart_cont"> |
|
<script src="http://d3js.org/d3.v4.min.js"></script> |
|
<!-- <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script> --> |
|
<script type="text/javascript"> |
|
var margin = {left: 50, top: 100, bottom: 50}; |
|
var width = 800 - margin.left, |
|
height = 600 - margin.top - margin.bottom; |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", 800) |
|
.attr("height", 600); |
|
// .append('g') //groups svg into a single element; like div |
|
// .attr('class','chart'); |
|
|
|
svg.append("text") |
|
.text("Mind in the Eyes Scores Under Cognitive Load") |
|
.attr("y",margin.top/4) |
|
.attr("x",margin.left/2) |
|
.style("font-size","30px"); |
|
|
|
var legend = svg.append("g") |
|
.attr("class","legend") |
|
.attr("transform","translate("+margin.left+','+margin.top/2+")"); |
|
|
|
legend.append("rect") |
|
.attr("width",15) |
|
.attr("height",15) |
|
.attr("fill","steelblue") |
|
.attr("opacity",0.5); |
|
|
|
legend.append("rect") |
|
.attr("width",15) |
|
.attr("height",15) |
|
.attr("fill","red") |
|
.attr("transform","translate(150,0)") |
|
.attr("opacity",0.5); |
|
|
|
legend.append("text") |
|
.text("No load") |
|
.attr("transform","translate(20,13)"); |
|
|
|
legend.append("text") |
|
.text("Load") |
|
.attr("transform","translate(170,13)") |
|
|
|
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), |
|
y = d3.scaleLinear().rangeRound([height, 0]); |
|
|
|
var g = svg.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
d3.csv("./mindeyes_scores.csv",function(data) { |
|
x.domain(data.map(function(d) { return d.subject_id; })); |
|
y.domain([0, 6]); |
|
|
|
g.append("g") |
|
.attr("class", "axis axis--x") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x)); |
|
|
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y)); |
|
|
|
svg.append("text") |
|
.attr("text-anchor","middle") |
|
.attr("transform","translate(" + (margin.left/3) + "," + (margin.top + height/2) + ")rotate(-90)") |
|
.text("Mean Score"); |
|
|
|
svg.append("text") |
|
.attr("text-anchor","middle") |
|
.attr("transform","translate(" + (margin.left + width/2) + "," + (height + margin.top + margin.bottom/1.5) + ")") |
|
.text("Subject ID"); |
|
|
|
svg.append("line") |
|
.attr("x1",""+margin.left) |
|
.attr("y1",margin.top+(height-y(6-4.3))) |
|
.attr("x2","800") |
|
.attr("y2",margin.top+(height-y(6-4.3))) |
|
.attr("stroke","red"); |
|
|
|
svg.append("line") |
|
.attr("x1",""+margin.left) |
|
.attr("y1",margin.top+(height-y(6-4.17))) |
|
.attr("x2","800") |
|
.attr("y2",margin.top+(height-y(6-4.17))) |
|
.attr("stroke","steelblue"); |
|
|
|
var barg = g.selectAll(".bar") |
|
.data(data) |
|
.enter().append("g") |
|
|
|
barg.append("rect") |
|
.attr("class", "bar1") |
|
.attr("x", function(d) { return x(d.subject_id); }) |
|
.attr("y", function(d) { return y(+d.mean_noload); }) |
|
.attr("width", x.bandwidth()) |
|
.attr("height", function(d) { return height - y(+d.mean_noload); }) |
|
.attr("opacity",0.5); |
|
|
|
barg.append("rect") |
|
.attr("class", "bar2") |
|
.attr("x", function(d) { return x(d.subject_id); }) |
|
.attr("y", function(d) { return y(+d.mean_load); }) |
|
.attr("width", x.bandwidth()) |
|
.attr("height", function(d) { return height - y(+d.mean_load); }) |
|
.attr("opacity",0.5); |
|
|
|
|
|
|
|
}); |
|
</script> |
|
</div> |
|
</html> |
