IT系企業の年収、従業員数、平均年齢
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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]; | |
}); | |
} | |
// |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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