Skip to content

Instantly share code, notes, and snippets.

@yuta-01

yuta-01/d3.js

Last active January 19, 2016 17:55
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 yuta-01/bba41b1f7ea3c48069a2 to your computer and use it in GitHub Desktop.
Save yuta-01/bba41b1f7ea3c48069a2 to your computer and use it in GitHub Desktop.
Download ZIP
heatmap(2004〜2015得点時間帯)
Raw
d3.js
d3.csv("score.csv",function(errer,csv){
var max = Math.max.apply(null,csv.map(function(d){return d.s }));
var ScolorScale = d3.scale.linear().domain([0, max]).range(["#FFF5F2", "#FF4500"]); //カラースケールを作成
var year = d3.nest().key(function(d){return d.y;}).entries(csv); //CSVから取得したデータをネスト
var time = d3.nest().key(function(d){return d.t;}).entries(csv); //CSVから取得したデータをネスト
var tbody = d3.select('body').append('table').append('tbody');
var tfoot = d3.select('table').append('tfoot');
tfoot.append('th');
tfoot.selectAll('class')
.data(time)
.enter()
.append('th')
.attr("class", "time")
.text(function(d){ return d.key});
var trs = tbody.selectAll('tr')
.data(year)
.enter()
.append('tr');
trs.append('th').text(function(d){return d.key});
trs.selectAll('td')
.data(function(d){return d.values})
.enter()
.append('td')
.style("background-color", function(d){ return ScolorScale(d.s); })
.on('mouseover', function(d){
d3.select(this).text(d.s);
})
.on("mouseout", function(d){
d3.select(this).text("");
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>score</title>
<link rel="stylesheet" href="master.css" type="text/css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script src="d3.js"></script>
</body>
</html>
Raw
master.css
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Exo+2:600);
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Exo 2',sans-serif;
letter-spacing: 1.6px;
background-color: #fdfdfd;
color:#333;
text-align: center;
}
table{
margin: 0 auto;
width: 980px;
padding: 20px;
}
th{
height: 45px;
}
td{
width: 130px;
height: 45px;
font-size:20px;
text-align: center;
}
Raw
score.csv
y t s
2004 0〜15 5
2004 16〜30 6
2004 31〜45+ 3
2004 45〜60 7
2004 61〜75 12
2004 76〜90+ 14
2005 0〜15 2
2005 16〜30 3
2005 31〜45+ 7
2005 45〜60 10
2005 61〜75 9
2005 76〜90+ 16
2006 0〜15 8
2006 16〜30 5
2006 31〜45+ 6
2006 45〜60 7
2006 61〜75 9
2006 76〜90+ 11
2007 0〜15 6
2007 16〜30 5
2007 31〜45+ 6
2007 45〜60 10
2007 61〜75 6
2007 76〜90+ 15
2008 0〜15 5
2008 16〜30 3
2008 31〜45+ 6
2008 45〜60 8
2008 61〜75 5
2008 76〜90+ 5
2009 0〜15 6
2009 16〜30 8
2009 31〜45+ 10
2009 45〜60 4
2009 61〜75 5
2009 76〜90+ 9
2010 0〜15 4
2010 16〜30 4
2010 31〜45+ 14
2010 45〜60 7
2010 61〜75 9
2010 76〜90+ 10
2011 0〜15 6
2011 16〜30 1
2011 31〜45+ 3
2011 45〜60 9
2011 61〜75 12
2011 76〜90+ 7
2012 0〜15 3
2012 16〜30 4
2012 31〜45+ 6
2012 45〜60 2
2012 61〜75 8
2012 76〜90+ 6
2013 0〜15 3
2013 16〜30 6
2013 31〜45+ 3
2013 45〜60 7
2013 61〜75 16
2013 76〜90+ 13
2014 0〜15 2
2014 16〜30 4
2014 31〜45+ 7
2014 45〜60 4
2014 61〜75 6
2014 76〜90+ 7
2015 0〜15 6
2015 16〜30 3
2015 31〜45+ 9
2015 45〜60 3
2015 61〜75 8
2015 76〜90+ 12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment