Skip to content

Instantly share code, notes, and snippets.

@miyu80

miyu80/README.md

Last active August 29, 2015 14:08
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 miyu80/8b43968f786292ae0658 to your computer and use it in GitHub Desktop.
Save miyu80/8b43968f786292ae0658 to your computer and use it in GitHub Desktop.
Download ZIP
月別菓子支出金額
Raw
README.md
Raw
graph.js
//var gDataset;
d3.csv("sweet.csv", function(error, dataset) {
var w = 600;
var h = 400;
var barPadding = 5;
var container = d3.select('.container');
var svg = container.append('svg')
.attr('width', w)
.attr('height', h);
// background fill
svg.append('rect')
.attr('class', 'background')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'hsl(306, 81%,98%)');
svg.append('rect')
.attr('class','bgtext')
.attr('width','100%')
.attr('height','8%')
.attr('fill','hsl(306,81%,89%)')
console.log(dataset);
//gDataset = dataset;
// set category label
//var categoryLabels = ['biscuit', 'chocolate'];
var categoryLabels = Object.keys(dataset[0]);
categoryLabels.some(function(v, i){
if (v === 'month') { categoryLabels.splice(i, 1);}
});
//console.log(categoryLabels);
svg.selectAll('text.categoryLabel')
.data(categoryLabels)
.enter()
.append('text')
.attr('class', 'categoryLabel')
.attr('x', function(d, i){return (i + 0.5) * w / categoryLabels.length;})
.attr('y', 20)
.attr('text-anchor', 'middle')
.attr('font-size', 9)
.attr('font-family', 'Helvetica')
//.attr('font-weight', 'bold')
.attr('value', function(d){return d;})
.style('cursor', 'pointer')
//.attr('onclick', function(d){return "updateBar('" + d + "')";})
.text(function(d){return d;});
d3.selectAll('text.categoryLabel').on('click', function(){
d3.selectAll('text.categoryLabel.on')
.attr('class','categoryLabel');
d3.select(this)
.attr('class','categoryLabel on');
updateBar(this.getAttribute('value'));
});
// set month text
svg.selectAll('text.month')
.data(dataset)
.enter()
.append('text')
.attr('class', 'month')
.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;})
.attr('y', h - 5)
.attr('text-anchor', 'middle')
.text(function(d){return d.month + '月';});
//３桁コンマ
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
//updateBar('chocolate');
var updateBar = function(category) {
var svg = d3.select('svg');
//var dataset = gDataset; //svg.selectAll('rect.bar').data;
var chartHeight = h - 20;
var maxvalue = d3.max(dataset, function(d){return +d[category];});
console.log(maxvalue);
var scaleheight = d3.scale.linear()
//.domain([0, maxvalue])
.domain([0, 2500])
.range([0, chartHeight - 40]);
var scaleSaturation = d3.scale.linear()
//.domain([0, maxvalue])
.domain([0, 2500])
.range([20, 80]);
var bar = svg.selectAll('rect.bar')
.data(dataset);
//グラデーション設定
gradient = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "grade")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%")
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "hsl(306, 90%, 70%)")
.attr("stop-opacity", 1)
gradient.append("svg:stop")
.attr("offset", "90%")
.attr("stop-color", "hsl(306, 90%, 90%)")
.attr("stop-opacity", 1)
//つやつや
lighting = svg.append("defs").append("filter")
.attr("id", "lighting")
lighting.append("feGaussianBlur")//ガウスぼかし
.attr("stdDeviation", 4)//ぼかし演算による標準偏差
.attr("in", "SourceAlpha")
.attr("result", "blur")
lighting.append("feSpecularLighting")
.attr("in", "blur")
.attr("surfaceScale", 20)
.attr("specularConstant", 1)//鏡面反射係数
.attr("specularExponent", 25)//鏡面指数
.attr("lighting-color", "white")//色
.attr("result", "d")
.append("fePointLight")
.attr("x",-300)
.attr("y", 50)
.attr("z", 100)
lighting.append("feComposite")
.attr("operator", "arithmetic")
.attr("in", "d")
.attr("in2", "SourceGraphic")
.attr("k1", 0)
.attr("k2", 1)
.attr("k3", 1)
.attr("k4", 0)
.attr("result" ,"r")
lighting.append("feComposite")
.attr("operator", "in")
.attr("in", "r")
.attr("in2", "SourceGraphic")
// 作成
bar.enter()
.append('rect')
.attr('class', 'bar')
.attr('fill', function(d) { return 'url(#grade)' })
.attr('x', function(d, i) {
return i * w / dataset.length;
})
.attr('width', w/dataset.length-barPadding)
.attr('height', 0)
.attr('y', chartHeight)
.attr("rx","10")
.attr("ry","10")
.style("filter", "url(#lighting)")
.on('mouseover', function(){
d3.select(this)
.attr('fill', "hsl(306, 95%, 87%)")
})
.on('mouseout', function(){
d3.select(this)
.transition()
.duration(200)
.attr('fill', function(d) { return 'url(#grade)'; })
})
// 削除
bar.exit().remove();
//更新
bar.transition()
.delay(function(d,i){return i*50;})
.duration(300)
.attr('fill', function(d) { return 'url(#grade)'; })
.attr('height', function(d){return scaleheight(d[category]);})
.attr('y', function(d){return chartHeight - scaleheight(d[category]);})
.attr("rx","10")
.attr("ry","10")
//テキスト作成
svg.selectAll('text.atai')
.data(dataset)
.enter()
.append('text')
.attr('class', 'atai')
.attr('x', function(d, i) {
return i * w / dataset.length+22;
})
.attr('y', h-40)
.attr('text-anchor', 'middle')
.attr('font-size', 10)
.attr('font-family', 'Helvetica')
.attr('font-weight', 'bold')
.style('cursor', 'pointer')
.text(function(d){return addFigure(d[category]) + '円';});
//テキストの更新
svg.selectAll('text.atai')
.transition()
.delay(function(d,i){return i*50;})
.duration(300)
.attr('fill', function(d) { return 'black'; })
.attr('height', function(d){return scaleheight(d[category]);})
.attr('y', function(d){return chartHeight - scaleheight(d[category])-4;})
.text(function(d){return addFigure(d[category]) + '円';});
};
d3.select(self.frameElement).style("height",h + "px");
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <!--ライブラリd3.jsを読み込み-->
<title>sweets graph</title>
<style type="text/css">
.categoryLabel.on {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
</div>
<script src="graph.js" charset="utf-8"></script> <!--これからプログラミングするjsファイルパス-->
</body>
</html>
Raw
sweet.csv
month ビスケット キャンディ せんべい スナック チョコレート 和生菓子 洋生菓子 アイス その他
1 227 169 438 331 600 826 1397 363 1728
2 279 184 396 333 1366 739 1302 322 1539
3 391 202 501 366 567 1180 1674 438 1868
4 302 181 442 376 426 964 1412 525 1662
5 273 185 437 365 374 1031 1540 761 1638
6 241 167 402 325 300 804 1433 878 1449
7 266 169 390 321 248 847 1501 1234 1535
8 322 156 498 341 245 1085 1632 1437 2071
9 256 150 389 331 327 919 1331 794 1466
10 243 183 419 333 446 816 1283 549 1471
11 286 198 422 342 510 875 1400 370 1631
12 335 196 587 386 715 1087 2405 445 2236
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment