Skip to content

Instantly share code, notes, and snippets.

@yasuda0404
Last active August 29, 2015 14:04
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save yasuda0404/2c1e1d623841cb06cbdc to your computer and use it in GitHub Desktop.
IT系企業の年収、従業員数、平均年齢
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://yui.yahooapis.com/3.17.2/build/cssreset/cssreset-min.css" rel="stylesheet" type="text/css">
<link href="./css/itsalary.css" rel="stylesheet" type="text/css">
<title>IT業界の平均年収</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
</head>
<body>
<div id="container">
<div id="note">1. 各プロットにマウスオーバーして企業情報をチェック!<br>
2. クリックすれば企業の採用ページヘジャンプ!<br>
3. 凡例マーカーをクリックして業種をスクリーニング!</div>
<div id="main">
<div id="gui"></div>
<div id="chart"></div>
<div id="caption"></div>
</div>
<div id="footer">データソース:<a href='http://www.publickey1.jp/blog/14/it_2014_1.html' target='_blank'>IT系企業の平均給与を業種別にみてみた 2014年版 ~ ネットベンチャー、ソーシャル、ゲーム編</a></div>
</div>
<script type="text/javascript" src="./js/itsalary.js"></script>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/* Color scheme is taken from 'FLAT UI' http://designmodo.github.io/Flat-UI/ */
body {
margin: 0;
width:960px;
height:500px;
font-family: Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight:lighter;
padding: 0;
margin: 0;
background-color: #ffffff;
color:#34495e;
}
h1 {
display: block;
font-size: 2em;
margin: 0.67em auto;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
#container {
margin:0 auto;
width:100%;
height:100%;
min-height:100%;
}
#container h1#title {
position:absolute;
top:5px;
font-size:1.2em;
text-align:center;
display:block;
width:500px;
margin-left:200px;
color:#ffffff;
background-color:#415b76;
border-color:#415b76;
padding:10px 19px;
border-radius:6px;
font-weight:bold;
}
#note {
position:absolute;
top:10px;
width:450px;
background-color:#ecf0f1;
background-color:#ffffff;
border-radius:6px;
padding:10px 19px;
margin-left:200px;
line-height:1.2em;
font-size:0.9em;
}
#main {
margin-top: 0px;
}
#chart .background {
fill:#eeeeee;
}
#footer {
position:absolute;
top:920px;
margin-left:150px;
font-size: 0.8em;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
circle {
fill-opacity:0.7;
cursor:pointer;
}
.legend{
font-size:0.8em;
cursor:pointer;
}
#tooltip {
position: absolute;
display:inherit;
top:920px;
height:auto;
font-size: 12px;
padding:10px;
color: #ffffff;
background-color:#34495e;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display:none;
}
#tooltip p {
font-size: 12px;
line-height:18px;
margin: 2px 4px 2px 4px;
}
#tooltip .arrow {
/*CSSのみで三角形を作る http://ideahacker.net/2013/07/26/5962/*/
content:"";
position: absolute;
bottom: -24px;
left 0%;
border: 12px solid transparent;
border-top: 12px solid #000;
}
// JavaScript Document
//HTMLブロックの取得
var idContainer = d3.select("#container");
var idGui = d3.select("#gui");
var idChart = d3.select("#chart");
var idCaption = d3.select("#caption");
//グローバル変数の設定
var margin = {top:100, right: 60, bottom: 50, left: 150},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//ブラウザレベルのインターフェース、レスポンシブ設定
//setBrowserInterface();
//データセットの読み込み(可視化データ、地図データ、その他)
//例 queue()
// .defer(d3.json, "JSONファイル")
// .defer(d3.csv, "CSVファイル")
// .await(読み込み後実行関数);
queue()
.defer(d3.csv, "dataset/salary_utf8.csv")
.await(prep);
function prep(error, data1) {
//error エラーメッセージ
//data1, data2, ...データセット
//GUIの設定
//ボタン
//スライダ
//その他
//SVG要素の追加
var svgChart = idChart.append("svg")
.attr("width", width+margin.left+margin.right)
.attr("height", height+margin.top+margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
;
//軸とスケールの設定
var xScale = d3.scale.log().range([0,width]).domain([10, 20000]);
var xAxis = d3.svg.axis().scale(xScale)
.orient("bottom")
.ticks(2, ",.1s").tickSize(6, 0);
var yScale = d3.scale.linear().range([height,0]).domain([0, 10000]).nice();
var yAxis = d3.svg.axis().scale(yScale)
.orient("left");
var category = d3.scale.ordinal()
.domain(["NV","SM","MG","SE","OM","AF"])
.range([0,1,2,3,4,5]); //インデックス番号
//var color = ["#51a7f9", "#6fbf40","#b369e1","#999999","#f3901a","c82505"]; //Apple Keynote Color
var color = ["#2980B9","#F39C12", "#27AE60","#7F8C8D","#8E44AD","#C0392B"]; //FLAT UI
//X軸
svgChart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+0+"," + (height) + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width*0.5)
.attr("y", 40)
.style("text-anchor", "middle")
.text("従業員数(人)");
svgChart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("x",-height*0.4)
.attr("y", -90)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("平均年収(千円)")
//マッププロジェクション定義、マップ描画
//ツールチップ
var idTooltip = idChart.append("div")
.attr("id","tooltip")
.classed("hidden", true);
idTooltip.append("div").attr("class", "arrow"); //吹き出し用Arrow
idTooltip.append("p").attr("id","line1"); //tooltip内の表示用にpタグをつくっておく
idTooltip.append("p").attr("id","line2");
idTooltip.append("p").attr("id","line3");
idTooltip.append("p").attr("id","line4");
//データ描画
var plots = svgChart
.selectAll("circle")
.data(data1)
.enter()
.append("circle")
.attr("cx",function(d){
return xScale(d.workers); //横軸 従業員数(人)
})
.attr("cy",function(d){
return yScale(d.salary); //縦軸 平均年収(千円)
})
.attr("r", function(d){
return d.age*0.3; //円の半径は平均年齢(age)に比例
})
.style("fill",function(d){
return color[category(d.id)]; //カテゴリ(id)別に色分け
})
.style("stroke",function(d){
return color[category(d.id)]; //カテゴリ(id)別に色分け
})
.on("mouseover", function(d){
d3.select(this)
.style("stroke-width","4px"); //線を太く
d3.select("#line1").text(d.name); //情報を表示
d3.select("#line2").text("従業員数: "+d.workers+"人");
d3.select("#line3").text("平均年齢: "+d.age+"歳");
d3.select("#line4").text("平均年収: "+d.salary+"千円");
var xp = parseFloat(d3.select(this).attr("cx")) + margin.left -23;
var yp = parseFloat(d3.select(this).attr("cy")) + margin.top -130;
var bgcolor = color[parseInt(category(d.id))];
//ツールチップの表示
d3.select("#tooltip")
.style("left",function(d){
return xp + "px";
})
.style("top",function(d){
return yp + "px";
})
.style("background-color", bgcolor) //背景の色を変える
.classed("hidden",false);
d3.select("#tooltip").select(".arrow")
.style("border-top", "12px solid "+bgcolor); //吹き出し用Arrowの色を変える
})
.on("mouseout", function(){
d3.select(this)
.style("stroke-width","1px"); //線の太さを戻す
d3.select("#tooltip").classed("hidden",true); //ツールチップを消去
})
.on("click", function(d){
var win = window.open(d.url, '_blank');
win.focus();
});
//凡例とフィルタリングUI
var drawFlags = [true,true,true,true,true,true]; //描画フラグ
var legend = svgChart.selectAll(".legend")
.data(category.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + (i * 24 + height*0.6) + ")"; })
.on("click", function(d,i){
drawFlags[i] = !drawFlags[i]; //該当するフラグを反転
//フィルタリング&再描画
if(drawFlags[i]){
d3.select(this).select("circle").style("fill-opacity", 1.0);
}else{
d3.select(this).select("circle").style("fill-opacity", 0.0);
}
plots
.style("display", function(d){
//フィルタリング
if(drawFlags[category(d.id)]){
return "inherit";
}else{
return "none";
}
});
})
.on("mouseover", function(){
d3.select(this).select("circle").style("stroke-width","4px") //線を太く
})
.on("mouseout", function(){
d3.select(this).select("circle").style("stroke-width","1px") //線を細く
});
//凡例マーカー
legend.append("circle")
.attr("cx", width - 10)
.attr("r", 9)
.style("fill",function(d,i){
return color[i];
})
.style("stroke", function(d,i){
return color[i]
})
;
//凡例テキスト
var caption =["ネットベンチャー","ソーシャルメディア","モバイル&ゲーム","SEO/SEM","オンラインメディア","アフィリエイト"];
legend.append("text")
.attr("x", width - 32)
.attr("y", 0)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d,i) {
return caption[i];
});
}
//
id name workers age salary url
NV クックパッド(株) 147 31.3 7180 https://info.cookpad.com/jobs/
NV ヤフー(株) 4607 34.3 6770 http://hr.yahoo.co.jp/
NV (株)サイバーエージェント 1494 30.3 6659 http://www.cyberagent.co.jp/recruit/fresh/
NV (株)カカクコム 491 33.5 6640 http://corporate.kakaku.com/recruit
NV 楽天(株) 3762 32.5 6520 http://corp.rakuten.co.jp/careers/graduates/
NV (株)駅探 73 37.8 6300 http://ekitan.co.jp/corp/recruit.html
NV ネットイヤーグループ(株) 159 35.8 6110 http://www.netyear.net/career/
NV (株)ネクスト 463 33.4 6030 http://www.next-group.jp/recruit/
NV (株)ドワンゴ 438 32.3 5740 http://info.dwango.co.jp/recruit/
NV エキサイト(株) 215 34.0 5710 http://jobs.excite.co.jp/
NV GMOペイメントゲートウェイ(株) 194 34.1 5710 http://corp.gmo-pg.com/recruit
NV (株)リブセンス 91 30.5 5680 http://www.livesense.co.jp/recruit/index.htm
NV (株)一休 111 31.8 5570 http://www.ikyu.co.jp/recruit/
NV (株)デジタルガレージ 244 33.4 5520 http://www.garage.co.jp/ja/career/
NV (株)オウケイウェイヴ 157 34.1 5490 http://www.okwave.co.jp/recruit/
NV (株)メンバーズ 240 33.8 5410 http://www.members.co.jp/recruit/
NV (株)カービュー 161 32.1 5140 https://www.carview.co.jp/company/recruit/
NV (株)アイスタイル 184 29.2 5100 http://recruit.istyle.co.jp/
NV ジョルダン(株) 136 36.0 5090 http://www.jorudan.co.jp/company/data/employment.html
NV トレンダーズ(株) 75 29.6 5010 http://www.trenders.co.jp/rec/
NV (株)ぐるなび 1316 33.9 5000 http://www.gnavi.co.jp/company/recruit/
NV (株)エニグモ 40 31.9 4820 http://www.enigmo.co.jp/recruit/
NV (株)SmartEbook.Com 50 36.0 4790 http://www.smartebook.com/recruit/
NV (株)Eストアー 133 33.0 4700 http://estore.co.jp/recruit/
NV (株)パピレス 58 31.1 4635 http://www.papy.co.jp/info/index.php?page=/recruit.htm
NV 比較.com(株) 36 31.0 4190 http://www.hikaku.com/info/recruit/
SM グリー(株) 1204 31.2 7440 http://corp.gree.net/jp/ja/recruit/
SM (株)ディー・エヌ・エー 1045 32.1 7186 http://dena.com/recruit/
SM (株)ミクシィ 272 31.5 5759 http://mixi.co.jp/recruit/
MG KDDI(株) 10739 41.4 9397 http://www.kddi.com/corporate/recruit/
MG 任天堂(株) 5213 36.8 8680 http://www.nintendo.co.jp/jobs/
MG (株)NTTドコモ 10903 39.2 8160 https://www.nttdocomo.co.jp/corporate/recruit/
MG コナミ(株) 91 37.7 7320 http://www.konami.co.jp/job/
MG ガンホー・オンライン・エンターテイメント(株) 315 35.7 6520 http://www.gungho.co.jp/recruit/
MG (株)コーエーテクモホールディングス 65 37.9 6290 http://www.koeitecmo.co.jp/recruit/
MG (株)フェイス 123 37.5 6200 http://www.faith.co.jp/recruit/
MG (株)コロプラ 340 30.2 6170 http://colopl.co.jp/recruit/
MG (株)enish 154 32.0 5970 http://www.enish.jp/recruit
MG (株)モブキャスト 115 34.6 5800 http://mobcast.co.jp/recruit/
MG (株)ドリコム 227 31.7 5740 http://www.drecom.co.jp/recruit/
MG (株)ユークス 189 33.6 5650 http://www.yukes.co.jp/recruit/
MG (株)ガイアックス 96 31.7 5550 http://recruit.gaiax.co.jp/
MG (株)カプコン 1951 35.8 5550 http://www.capcom.co.jp/recruit_renew/
MG 日本ファルコム(株) 49 33.7 5240 http://www.falcom.co.jp/kaisya/recruit/
MG クルーズ(株) 469 30.9 5170 http://crooz.co.jp/recruit/
MG (株)ネクソン 266 32.4 4990 http://recruit.nexon.co.jp/
MG (株)ボルテージ 262 27.4 4840 http://www.voltage.co.jp/recruit/
MG (株)ケイブ 134 34.8 4830 http://www.cave.co.jp/jobs/
MG KLab(株) 547 30.4 4790 http://www.klab.com/jp/recruit/
MG (株)ザッパラス 182 31.5 4630 http://www.zappallas.com/recruit/
MG サイバーステップ(株) 117 27.7 4580 http://corp.cyberstep.com/recruit/
MG (株)エイチーム 297 30.0 4550 http://www.a-tm.co.jp/recruit/
MG (株)オルトプラス 148 29.7 4400 http://www.altplus.co.jp/recruitment
MG (株)アエリア 29 36.0 4370 http://www.aeria.jp/jpn/recruit/
MG (株)エイティング 223 33.2 4100 http://www.8ing.co.jp/recruit/
MG (株)日本一ソフトウェア 100 30.8 3240 http://www.nippon1.co.jp/recruit/index.html
SE (株)アイレップ 316 31.4 5040 http://www.irep.co.jp/recruit/
SE (株)フルスピード 177 29.8 4850 http://www.fullspeed.co.jp/recruit/
SE アウンコンサルティング(株) 37 31.6 3615 http://www.aun-saiyou.jp/
OM アイティメディア(株) 175 36.9 6540 http://corp.itmedia.co.jp/corp/recruit/
OM (株)イーブックイニシアティブジャパン 48 35.5 5520 https://corp.ebookjapan.jp/recruit/
OM (株)オールアバウト 153 34.7 5220 http://corp.allabout.co.jp/recruit/
OM (株)キャリアデザインセンター 312 28.8 4912 http://cdc.type.jp/recruit/
AF バリューコマース(株) 199 34.9 5920 http://www.valuecommerce.co.jp/recruitment/
AF (株)ファンコミュニケーションズ 204 32.1 5390 http://www.fancs.com/saiyou/
AF (株)インタースペース 234 30.8 5290 http://www.interspace.ne.jp/recruit/
AF (株)アドウェイズ 380 30.6 5110 https://secure.adways.net/recruit/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment