Skip to content

Instantly share code, notes, and snippets.

@sugi2000

sugi2000/README.md

Last active October 27, 2016 08:47
Show Gist options
  • Save sugi2000/979d21d6993f45aec99211b2f14065bd to your computer and use it in GitHub Desktop.
Save sugi2000/979d21d6993f45aec99211b2f14065bd to your computer and use it in GitHub Desktop.
Download ZIP
Hometown Tax to Ogi, Saga
Raw
README.md
Raw
gifts.csv
rank item title count amount
1 (D-2)絶品！超高級銘柄A5「佐賀牛」（ステーキ800g）ロース 牛肉 8054 30000
2 (B-2)しゃぶしゃぶ・すきやき用佐賀和牛 牛肉 4602 10000
3 (D-13)特選！佐賀牛しゃぶしゃぶ・すき焼き用900g 牛肉 2606 30000
4 (A-14)蛍の郷の天然水（炭酸水） 天然水 2310 5000
5 (F-1)贅沢！超高級銘柄A5「佐賀牛」セット（1.7kg） 牛肉 1978 50000
6 (B-16)焼肉屋特選！佐賀和牛カルビー５００ｇ 牛肉 1692 10000
7 (D-12)極選佐賀牛ブロック肉1kg 牛肉 1567 30000
8 (B-31)九州牛津ラーメン（とんこつ・醤油・みそ）２食×１８お得セット ラーメン 1441 10000
9 (B-26)【期間限定】さがほのか4パック入り 米 1437 10000
10 (B-22)「佐賀産和牛」しゃぶしゃぶ・すき焼き用肉 牛肉 1310 10000
11 (B-25)特A評価！特別栽培米さがびより 7kg 米 1290 10000
12 (B-7)スタミナジューシー焼肉用佐賀和牛 牛肉 1216 10000
13 (B-46)【期間限定】大粒いちご「かおり野」4パック入り いちご 1147 10000
14 (B-27)【期間限定】デコポン（５ｋｇ） デコポン 1118 10000
15 (G-1)I ❤ＯＧＩセット（あいらぶおぎせっと） セット 930 100000
16 (B-33)地元海苔漁師の手作り芦刈海苔セット（Ａ） 海苔 771 10000
17 (B-23)さがブランド米「夢しずく」10kg 米 743 10000
18 (A-15)キムチ得々盛り合わせ キムチ 714 5000
19 (G-3)豪快！「佐賀牛」贅沢盛りセット（4.4kg） 牛肉 660 100000
20 (G-4)満腹！超高級銘柄A5「佐賀牛」贅沢三昧セット（4kg超） 牛肉 658 100000
21 (B-15)本生ハンバーグと肥前さくらポークベーコン・ソーセージ 加工肉 600 10000
22 (B-24)佐賀有明海苔（板のり）５０枚と佐賀丸(焼・味・塩）セット 海苔 580 10000
23 (D-7)リッチ！佐賀牛ハンバーグ＆ステーキ 牛肉 557 30000
24 (B-4)小城羊羹5本入セット 羊羹 533 10000
25 (A-8)いかしゅうまい４パックセット 焼売 501 5000
26 (A-7)すりごまギフト用６袋セット ごま 486 5000
27 (D-10)特A評価！特別栽培米さがびより 27kg 米 483 30000
28 (B-50)佐賀芦刈海苔（板のり付）セット 海苔 452 10000
29 (A-5)ブラックモンブラン10本セット アイス 452 5000
30 (B-3)いかしゅうまい（８粒入り）３箱セット 焼売 434 10000
31 (B-43)古賀農園　減農薬ぶどう　巨峰　2ｋｇ ぶどう 431 10000
32 (A-12)小城のりセット（小） 海苔 408 5000
33 (B-8)小城のりセット（大） 海苔 406 10000
34 (A-11)佐賀和牛カレー３パックセット カレー 394 5000
35 (D-20)【早得】絶品！超高級銘柄「佐賀牛」（ステーキ1kg） 牛肉 393 30000
36 (B-37)竹下製菓アイスお徳用バラエティ８箱セット アイス 369 10000
37 (A-10)昔そのまま切り羊羹（小）５本詰 羊羹 362 5000
38 (A-25)【今が旬！】爽やかな甘さの柑橘「はるか」5kg みかん 360 5000
39 (A-2)竹下製菓アイスバラエティ10セット アイス 346 5000
40 (B-18)佐賀一番海苔１００枚セット 海苔 342 10000
41 (D-11)特A評価！特別栽培米さがびより 30kg 米 334 30000
42 (B-34)地元海苔漁師の手作り芦刈海苔セット（B） 海苔 327 10000
43 (D-22)【早得】特選！佐賀牛しゃぶしゃぶ・すき焼き用1.3kｇ 牛肉 312 30000
44 (B-29)佐賀県産豚肉＆鶏肉の麹漬けセット 豚肉・鶏肉 311 10000
45 (A-19)自然派食堂陽だまり　三色米 米 303 5000
46 (A-31)【いま旬】朝摘み小城の桃！（1kg） 桃 295 5000
47 (A-20)ちびっこ専用！こどもびぃる12本セット ジュース 291 5000
48 (D-9)豚しゃぶしゃぶ・麹漬け豚肉＆鶏肉のボリューム3.5kgセット 豚肉・鶏肉 281 30000
49 (B-48)小城の銘酒３本セット(新酒しぼりたて入り） 酒 236 10000
50 (A-6)ブラックモンブラン５本・ミルクック５本 アイス 211 5000
50 (D-8)高級のり（紫香燦燦）と佐賀有明海苔セット 海苔 211 30000
52 (B-1)小城羊羹ねりようかん５本セット 羊羹 204 10000
53 (A-23)期間限定！ご家庭用 早生みかん5kg みかん 201 5000
53 (C-5)森山牧場産 黒毛和牛　ボリュームの肉厚ステーキ （250g×2） 牛肉 201 20000
55 (B-49)コタツでみかん！ご家庭用10kg（大津４号） みかん 191 10000
56 (D-4)華麗！「胡蝶蘭」３本立て 花 188 30000
57 (B-6)高級小城羊羹2本セット 羊羹 187 10000
58 (G-8)【早得】豪快！「佐賀牛」贅沢盛りセット（6.2kg) 牛肉 178 100000
59 (H-1)フォーシーズン小城 セット 166 300000
60 (B-32)スカッと爽やか！103（テンザン）サイダー24本 ジュース 160 10000
61 (A-9)佐賀銘菓詰合せ 菓子 152 5000
62 (F-8)大家族応援！さがびより５４ｋｇ（白米） 米 149 50000
63 (B-52)特別栽培米 小城のお米　3種類×2kg　食べ比べ 米 143 10000
63 (D-21)【早得】極選佐賀牛ブロック肉1.24kg 牛肉 143 30000
65 (C-3)幻の酒 天山純米大吟醸 愛山34（桐箱入り） 酒 140 20000
66 (B-5)棚田米と小城のりセット 米・海苔 137 10000
67 (F-14)【早得】贅沢！超高級銘柄「佐賀牛」セット（2kg） 米 131 50000
68 (B-61)【いま旬】ぶどうの王様「巨峰」（2kg） ぶどう 129 10000
69 (F-4)豪華！「胡蝶蘭」５本立て 花 128 50000
70 (B-17)小城の銘酒３本セット（７２０ｍｌｘ２、９００ｍｌｘ１） 酒 127 10000
71 (F-9)大家族応援！さがびより６０ｋｇ（玄米） 米 116 50000
72 (G-9)【早得】満腹！超高級銘柄「佐賀牛」贅沢三昧セット（4.7kg超） 牛肉 112 100000
73 (A-21)元気いっぱい！水耕にんにく４パックセット にんにく 111 5000
74 (J-1)No Meat, No Life（佐賀牛シャトーブリアン含む）プレミア定期便 牛肉 107 1000000
75 (A-13)小城の美味しいおにぎり作りセット 米・海苔 103 5000
76 (A-17)小城の美味しい漬物５品セット 漬物 102 5000
77 (A-26) 味比べ！スィートスプリング＆はるみ みかん 100 5000
78 (D-23)【早得】佐賀牛ステーキ（200g×3）・ハンバーグ（150g×5） 牛肉 87 30000
79 (B-44)合六果樹園　親子３代農家の梨シリーズ　5kg 梨 83 10000
80 (C-2)九州限定品！竹下製菓のメガ盛りセット８２本入り アイス 82 20000
81 (B-12)小城羊羹小箱入り16個セット 羊羹 77 10000
81 (B-53)パリッとした食感！酸味と甘味の調和　ハッサク（9kg） みかん 77 10000
83 (B-36)来い恋！鯉コラーゲンクリーム 化粧品 74 10000
84 (B-45)自然派！古代玄米入り＆五穀米あま酒4本セット 酒 67 10000
85 (D-16)特別栽培米　小城のお米 3種類×9kg　食べ比べ 米 66 30000
85 (D-19)小城の麦を使用！一番搾り 佐賀づくり 酒 66 30000
87 (B-56)やさしくて軽い！リネンギャザースカート 衣服 61 10000
88 (A-1)小城の麺セット 麺 59 5000
88 (B-47)【季節限定】石地みかん10kg みかん 59 10000
90 (B-28)自然派食堂　陽だまり　ふるさとセット セット 58 10000
90 (C-4)天山酒造３本セット（トートバック・フェイシャルマスク付き） 酒 58 20000
90 (F-6)食べ盛り応援！夢しずく５４ｋｇ（白米） 米 58 50000
93 (B-42)藤田農園　自然派の梨シリーズ　5kg 梨 57 10000
94 (B-39)むつごろう畑のお漬物７点セット 漬物 47 10000
94 (B-60)【いま旬】皮ごと、どうぞ！ロザリオ・ビアンコ（2kg） ぶどう 47 10000
96 (C-1)小城の銘酒3本プラス（帆前掛、配達袋付き） 酒 44 20000
97 (B-51)採れたて！小城の野菜セット 野菜 42 10000
97 (C-6)ゆったりタイムのリネンコーディネートセット 衣服 42 20000
99 (D-15)佐賀芦刈海苔（板のり付）と有明海の恵セット 海苔 39 30000
100 (B-38)手作り草木染めストール（藍色ジョーゼット） 衣服 37 10000
100 (B-55)肌触りが心地よい、リネンワンピース 衣服 37 10000
102 (B-20)手作り草木染めストール（格子柄シフォン）ｋ59 衣服 36 10000
103 (E-1)村岡総本舗　史上最高級羊羹「小城櫻（おぎざくら）」 羊羹 35 40000
103 (F-12)高級佐賀芦刈海苔（板のり付）と有明海の幸セット 海苔 35 50000
105 (A-3)昔懐かし駄菓子屋セット 菓子 34 5000
105 (F-7)食べ盛り応援！夢しずく６０ｋｇ（玄米） 米 34 50000
107 (A-22)数量限定！激レア！エイリアンにそっくり？！【ワラスボ】 珍味 33 5000
108 (B-10)豆乳麺と専用めんつゆ＆ソースセット 麺 32 10000
108 (B-19)手作り草木染めストール（ボーダー柄シフォン）ｋ58 衣服 32 10000
110 (B-13)棚田米2kgと小城漬4kg 米・漬物 31 10000
111 (A-24)季節限定！ポンカン5kg みかん 30 5000
112 (D-17)特別栽培米　佐賀ブランド米　夢しずく　27kg（白米） 米 28 30000
113 (D-18)特別栽培米　ひのひかり　27kg（白米） 米 26 30000
114 (B-40)職人手作り！あのアニメキャラの麦わら帽子(親子セット) 衣服 25 10000
115 (B-35)クールSAKE 小城の銘酒３本セット 酒 21 10000
116 (B-54)手作り草木染めストール（ナイアガラ） 衣服 19 10000
117 (B-41)手作り草木染めストール茜（あかね）・桜 衣服 17 10000
118 (B-57)小京都「祭」小城の日本酒3本セット 酒 10 10000
119 (A-16)数量限定！復刻版グリーンモンブラン入り5種類セット アイス 8 5000
120 (A-30)名物「鯉の味噌汁（鯉こく）」１箱（5袋入り）プラス+2袋 味噌汁 7 5000
121 (A-27)【秘伝の自家製】だいだいポン酢と酢みそ 調味料 5 5000
121 (D-14)柔らかい風でひらり～草木染め「のれん」 ファブリック 5 30000
121 (F-11)本格手染め旗！オリジナルトートバッグ ファブリック 5 50000
124 (A-28)【創業明治43年】名物鯉の田舎昆布巻 昆布巻 4 5000
125 (B-58)【郷土料理】ムツゴロウ昆布巻＆「口底」煮付け 昆布巻 2 10000
126 (A-29)小城のB級グルメ「マジェンバのタレ」２本入り タレ 1 5000
126 (D-6)優雅！胡蝶蘭５本立 花 1 30000
126 (K-1)三百有余年の伝統　鍋島緞通（蟹牡丹） 緞通 1 1300000
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#tooltip {
position: absolute;
text-align: center;
width: 280px;
height: 80px;
padding: 2px;
border-radius: 2px;
background: #fff;
border: 1px solid #ddd;
pointer-events: none;
border-radius: 4px;
}
#tooltip:after, #tooltip:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#tooltip:before {
border-color: rgba(221,221,221,0);
border-top-color: #ddd;
border-width: 6px;
margin-left: -6px;
}
#tooltip:after {
border-color: rgba(255,255,255,0);
border-top-color: #fff;
border-width: 5px;
margin-left: -5px;
}
#tooltip #tooltip-content {
padding: 3px 0;
font-size: 80%;
display: table;
text-align: center;
margin: 0 auto;
}
.node {
color: white;
border: solid 1px white;
text-align: right;
vertical-align: top;
position: absolute;
overflow: hidden;
cursor: pointer;
}
.item {
opacity: 0;
margin: 0 auto;
font-size: 10px;
font-family: "YuGothic";
font-weight: bold;
/*writing-mode: vertical-lr;*/
/*text-indent: 2px;*/
transform: translate(6px,4px) rotate(-45deg);
letter-spacing: -0.05em;
line-height: 1em;
fill: #888;
}
text {
font-weight: bold;
font-size: 12px;
/*pointer-events: none;*/
}
.node--hover circle {
stroke: red;
}
.node--hover .item {
fill: #800;
}
.node--leaf.node--hover circle {
fill: #800;
}
.selecting circle {
fill: #800;
fill-opacity: 1.0;
}
.selecting .item {
opacity: 1;
}
.legend-item-g {
cursor: pointer;
}
.legend-item-g text {
fill: #888;
}
.legend-item-g.node--hover text {
fill: #000;
}
</style>
<body>
<form>
<label><input type="radio" name="mode" value="amount" checked>寄附単価</label>
<label><input type="radio" name="mode" value="count">寄附件数</label>
<label><input type="radio" name="mode" value="totalAmount">寄附総額</label>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
<script src="//d3js.org/d3-selection-multi.v1.min.js"></script>
<script src="//d3js.org/d3-ease.v1.min.js"></script>
<!-- <script src="lib/d3.min.js"></script>
<script src="lib/d3-selection-multi.v1.min.js"></script> -->
<script>
var csvpath = 'gifts.csv';
var totalItem = '総計';
var mode = d3.select('input').attr('value');//'amount';
var tooltip = d3.select("body").append("div").attr("id", "tooltip").style("opacity", 0);
d3.selectAll("input").on("change", change);
function change() {
mode = this.value;
// renderTable();
updateTable();
}
var margin = {top: 75, right: 75, bottom: 75, left: 75},
width = 1024 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// var svg = d3.select('body').append('svg')
// .styles({
// width: width + 'px',
// height: height + 'px'
// });
// svg.append('g')
// .attr('transform', 'translate(1,1)');
var format = d3.format(",d");
var formatAmount = function(num) {
var keta = ['', '万', '億'];
var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse();
var data = '';
for (var i=0;i<nums.length;i++){
if(!nums[i].match(/^[0]+$/)){
data = nums[i].replace(/^[0]+/g, "") + keta[i] + data;
}
}
return data;
};
var countFormat = function(d) {
var unit = '';
switch (mode) {
case 'count':
unit = '件';
break;
case 'amount':
case 'totalAmount':
unit = '円';
break;
default:
break;
}
return d3.format(",d")(d) + unit;
};
var pack = d3.pack()
.size([width, height])
.padding(3);
var data;
var xScaleOfRow = function(d, row, value) {
xScale.domain(d3.range(d[i].values.length));
return xScale(value);
}
var xScale = d3.scalePoint()
.padding(0.5)
.range([0, width])
.round(true);
var yScale = d3.scalePoint()
.padding(1.5)
.range([0, height])
.round(true);
var rScale = d3.scaleSqrt()
.range([0, 75]);
function updateTable() {
rScale.domain([0, d3.max(data, function(d) { return d[mode]; })]);
// d3.selectAll('.row-g').selectAll('.node')
// .transition()
// .duration(1000)
// .ease(d3.easeBounce)
// .attrs({
// transform: function(d,i){
// var r = rScale(d[mode]);
// // yScale.domain(d3.range(r))
// yScale.domain(d3.range(rScale.range()[1])+1)
// .range([0,-75]);
// var posScale = d3.scaleLinear()
// .domain([0, d3.max(data, function(d) { return d[mode]; })])
// .range([100, -100]);
// // return 'translate('+ xScale(i) +','+ posScale(d[mode]) +')';
// // return 'translate('+ xScale(i) +','+ yScale(r) +')';
// // return 'translate('+ xScale(i) +',0)';
// },
// });
d3.selectAll('.node circle')
.transition()
.duration(1000)
.ease(d3.easeBounce)
.attrs({
r: function(d){return rScale(d[mode]);},
});
d3.selectAll('.node .item')
.transition()
.duration(1000)
.ease(d3.easeBounce)
.attrs({
x: function(d){return rScale(d[mode]);},
})
.text(function(d){return format(d[mode]);});
}
function renderTable() {
var nestedData = d3.nest()
.key(function(d){return d.amount;}).sortKeys(function(a,b){return b-a;})
// .key(function(d){return d.count;}).sortKeys(function(a,b){return b-a;})
.sortValues(function (a, b) { return d3.descending(a.count, b.count); })
.entries(data);
console.log(nestedData);
var rAmountScale = d3.scaleSqrt()
// .domain([0, d3.max(data, function(d) { return d.amount; })])
.domain([0, 1300000])
.range([1, 50]);
var rTotalScale = d3.scaleSqrt()
// .domain([0, d3.max(data, function(d) { return d.totalAmount; })])
.domain([0, 241620000])
.range([1, 50]);
var g = svg.select('g').selectAll('g')
.data(nestedData);
xScale.domain(d3.range(d3.max(nestedData, function(d){return d.values.length;})));
console.log(xScale.domain());
yScale.domain(nestedData.map(function(d){return d.key;}));
var rowg = g.enter()
.append('g')
.attr('class', 'row-g')
.attr("transform", function(d,i) { return "translate(" + (i%2)* 100 + "," + yScale(d.key) + ")"; })
// console.log(rowg.node());
g.exit()
.remove();
// rowg.append('text')
// .attr('x', '60px')
// .attr('y', '18px')
// .text(function(d){return format(d.key) + '円';});
var node = rowg.selectAll('g')
.data(function(d){
return d.values;
})
.enter()
.append('g')
.attr('class', 'node')
.attr('title', function(d){return d.title;})
.attr("transform", function(d,i) {
return "translate(" + xScale(i) + ",0)";
});
var caption = function(d) {
var caption = '<div id="tooltip-content">' +
'<strong>' + d.item.replace(/^\([^\)]+\)/,'') + "</strong><br />";
switch (mode) {
case 'amount':
caption += formatAmount(d.amount) + '円';
break;
case 'count':
caption += formatAmount(d.amount) + '円' + " x " + format(d.count) + '件';
break;
case 'totalAmount':
caption += formatAmount(d.amount) + '円' + " x " + format(d.count) + '件' + "<br />" +
'総額　' + formatAmount(d.totalAmount) + '円';
break;
default:
}
caption += '</div>';
return caption;
};
node
.on('mouseover', function(d){
d3.select(this).classed("node--hover", true);
tooltip.html(caption(d))
.style('left', Math.max(0, (d3.event.pageX - parseInt(tooltip.style('width'))/2)) + 'px')
.style('top', Math.max(0, (d3.event.pageY - parseInt(tooltip.style('height')) - 12)) + 'px')
.style('opacity', 1);
})
.on('mousemove', function(d){
tooltip
.style('left', Math.max(0, (d3.event.pageX - parseInt(tooltip.style('width'))/2)) + 'px')
.style('top', Math.max(0, (d3.event.pageY - parseInt(tooltip.style('height')) - 12)) + 'px')
})
.on('mouseout', function(d){
d3.select(this).classed("node--hover", false);
tooltip
.style('opacity', 0);
});
var color = d3.scaleOrdinal(d3.schemeCategory20c);
rScale.domain([0, d3.max(data, function(d) { return d[mode]; })]);
node.append('circle')
.attrs({
cx: 6,
cy: 6,
r: function(d){return rScale(d[mode]);},
fill: function(d){return color(d.amount);},
stroke: function(d){return color(d.amount);},
'fill-opacity': 0.33,
'stroke-opacity': 0.9,
});
node.append('text')
.attrs({
class: 'item',
x: function(d){return rScale(d[mode]);},
y: 0,
})
.text(function(d){return format(d[mode]);});
renderLegend();
};
function renderLegend() {
var nestedData = d3.nest()
.key(function(d){return d.title;})
.sortValues(function (a, b) { return d3.descending(a.count, b.count); })
.rollup(function(v) { return d3.sum(v, function(d) { return +d.count; }); })
// .map(data);
.entries(data);
console.log(nestedData);
var g = svg.select('g')
.append('g')
.attrs({
class: 'legend-g',
transform: 'translate(500, 0)',
});
var item = g.selectAll('g')
.data(nestedData)
.enter()
.append('g')
.attrs({
class: 'legend-item-g',
transform: function(d,i){ return 'translate('+ Math.floor(i / 10) * 100 +', '+ ((i % 10) * 20) +')'; },
});
item.append('text')
.text(function(d){return d.key;})
item.on('mouseover', function(d){
var title = d3.select(this).text();
d3.select(this).classed("node--hover", true);
d3.selectAll('.node[title='+title+']').classed('selecting', true);
})
.on('mouseout', function(d){
var title = d3.select(this).text();
d3.select(this).classed("node--hover", false);
d3.selectAll('.node[title='+title+']').classed('selecting', false);
});
}
var updatePack = function(){
};
var renderPack = function(){
// remove
d3.selectAll('svg > g > g').remove();
var benchmark = function(d) {
return d[mode];
};
var maxBM = d3.max(data, function(d) { return benchmark(d); });
var minBM = d3.min(data, function(d) { return benchmark(d); });
// var color = d3.scaleSequential(d3.interpolateWarm)
var color = d3.scaleLog()
.base(Math.E)
.range(['#f44', '#eee'])
.domain([minBM, maxBM]);
var root = d3.stratify()
.id(function(d) { return d.item; })
.parentId(function(d) {
if (d.item === totalItem) { return ''; }
else { return totalItem; }
})
(data)
.sum(function(d) { return benchmark(d); })
.sort(function(a, b) { return benchmark(b) - benchmark(a); });
console.log(root);
pack(root);
var node = svg.select("g")
.selectAll("g")
.data(root.descendants())
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("class", function(d) { return "node" + (!d.children ? " node--leaf" : d.depth ? "" : " node--root"); })
.each(function(d) { d.node = this; })
.on("mouseover", hovered(true))
.on("mouseout", hovered(false));
node.append("circle")
.attr("id", function(d) { return "node-" + d.id; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(benchmark(d.data)); });
var leaf = node.filter(function(d) { return !d.children; });
leaf.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#node-" + d.id + ""; });
leaf.append("text")
// .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
// .selectAll("tspan")
.text(function(d) { return d.data.title; })
.attr("x", 0)
.attr("y", 0);
// .enter().append("tspan")
// .attr("x", 0)
// .attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
// .text(function(d) { return d; });
node.append("title")
.text(function(d) { return d.id + "\n" + countFormat(benchmark(d.data)); });
svg.selectAll('.node--root').on('click', function(e) {
mode = 'totalAmount';
// alert('click');
// pack.value(function(d) {
// return d.totalAmount;
// })
pack(root);
node.selectAll('g').data(pack.nodes);
node.transition()
.duration(4500)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
});
};
d3.csv(csvpath, function(error, d){
if (error) { throw error; }
data = d;
// add totalAmount property
data.forEach(function(d) {
d.rank = +d.rank;
d.amount = +d.amount;
d.count = +d.count;
d.totalAmount = d.amount * d.count;
})
// sum total
var totalCount = d3.sum(data, function(d) { return d.count; });
var totalAmount = d3.sum(data, function(d) { return d.amount; });
var totalTotalAmount = d3.sum(data, function(d) { return d.totalAmount; });
// add parent node
// data.push({item: totalItem, count: totalCount, amount:totalAmount, totalAmount:totalTotalAmount});
console.log(data);
renderTable();
});
function hovered(hover) {
return function(d) {
d3.selectAll(d.ancestors().map(function(d) { return d.node; }))
.classed("node--hover", hover);
};
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment