tafsiri · February 26, 2017 01:12
diff --git a/.block b/.block
 license: mit
 height: 720
 border: no
diff --git a/.gitignore b/.gitignore
 hs-img
diff --git a/README.md b/README.md
diff --git a/dist.css b/dist.css
 body{font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:300;font-size:12px;width:720px}.d3-tip{width:300px;height:340px;padding:10px;background-color:rgba(255,255,255,.1)}.d3-tip img{width:250px;margin:-15px 0 0 15px;padding:0}svg circle.mark{fill:#bdb2a4}svg circle.mark:hover{fill:tomato}svg path{stroke-width:1px;stroke:#000;fill:none}svg .axis line,svg .axis path{fill:none;stroke:#efefef;shape-rendering:crispEdges}.chartTitle{text-align:center;font-size:1.2em}
diff --git a/dist.js b/dist.js
 function plotData(t,a,r){var e=t.filter(function(t){return t.cost==a}),n=d3.extent(e,function(t){return t.trade_score}),i=d3.scaleLinear().domain(n).range([0,width]).nice(),o=5,s=d3.beeswarm(),l=s.data(e).distributeOn(function(t){return i(t.trade_score)}).radius(o+1).orientation("horizontal").side("symetric").arrange(),d=r.select("g.main").selectAll("circle").data(l),c=d.enter().append("circle").attr("title",function(t){return t.datum.name}).attr("class","mark").on("mouseover",tip.show).on("mouseout",tip.hide);c.merge(d).attr("cx",function(t){return t.x}).attr("cy",function(t){return t.y}).attr("r",o),d.exit().remove();var m=getAnnotations(l,a),u=d3.swoopyDrag().x(function(t){return t.x}).y(function(t){return t.y}).annotations(m),h=r.select("g.annotations").call(u);h.selectAll("path").attr("marker-end","url(#arrowhead)"),r.select("g.axis--x").call(d3.axisBottom(i).tickSize(4))}function insertChart(t){var a=d3.select("body").append("div"),r=a.append("svg").attr("width",width+margin.left+margin.right).attr("height",height+margin.top+margin.bottom);r.append("defs").append("marker").attr("id","arrowhead").attr("viewBox","-10 -10 20 20").attr("refX",0).attr("refY",0).attr("markerWidth",12).attr("markerHeight",12).attr("stroke-width",1).attr("orient","auto").append("polyline").attr("stroke-linejoin","bevel").attr("points","-6.75,-6.75 0,0 -6.75,6.75");var e=r.append("g").attr("transform","translate("+margin.left+", "+margin.top+")");return e.append("g").attr("class","axis axis--x").attr("transform","translate(0,"+height+")"),e.append("g").attr("class","main").attr("transform","translate(0, "+(height/2-margin.top/2)+")"),e.append("g").attr("class","annotations").attr("transform","translate(0, "+(height/2-margin.top/2)+")"),a.append("p").attr("class","chartTitle").text(t+" Cost Neutral Minions"),tip=d3.tip().attr("class","d3-tip").direction("s").offset([10,0]).html(function(t){var a=t.datum.image_url.split("/"),r=a[a.length-1];return"\n        <div>\n          <img src='./hs-img/"+r+"' width='250px'></img>\n        </div>\n\n      "}),r.call(tip),r}function getAnnotations(t,a){if(4==a){var r=(t.find(function(t){return"Chillwind Yeti"==t.datum.name}),t.find(function(t){return"Eerie Statue"==t.datum.name}),t.find(function(t){return"Worgen Greaser"==t.datum.name}),[{trade_score:538.2666666666667,y:0,path:"M548,-49C528,-43,524,-19,509,-5",text:"Chillwind Yeti",textOffset:[553,-44]},{trade_score:635.0666666666666,y:0,path:"M606,41C607,19,620,3,639,0",text:"Eerie Statue",textOffset:[577,60]},{trade_score:470.06666666666666,y:0,path:"M414,58C445,50,418,2,457,0",text:"Worgen Greaser",textOffset:[368,71]}]);return r}return[]}function loadData(t){function a(t){return{name:t.name,cost:+t.cost,attack:+t.attack,health:+t.health,trade_score:+t.trade_score,text:t.text,set:t.set,image_name:t.image_name,image_url:t.image_url}}d3.csv("standard_all_updown.csv",a,t)}var margin={top:10,right:30,bottom:30,left:30},width=720-margin.left-margin.right,height=215-margin.top-margin.bottom,tip,showAll=window.location.search.match("showAll");loadData(function(t){if(showAll)for(var a=1;a<=7;a++){var r=insertChart(a);plotData(t,a,r)}else{var e=insertChart(4);plotData(t,4,e)}});
 //# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNjcmlwdC5qcyJdLCJuYW1lcyI6WyJwbG90RGF0YSIsImRhdGEiLCJtYW5hIiwic3ZnIiwiY29uc3QiLCJmaWx0ZXIiLCJkIiwiY29zdCIsImRvbWFpbiIsImQzIiwiZXh0ZW50IiwidHJhZGVfc2NvcmUiLCJ4U2NhbGUiLCJzY2FsZUxpbmVhciIsInJhbmdlIiwid2lkdGgiLCJuaWNlIiwiZG90UmFkaXVzIiwic3dhcm1MYXlvdXQiLCJiZWVzd2FybSIsInN3YXJtIiwiZGlzdHJpYnV0ZU9uIiwicmFkaXVzIiwib3JpZW50YXRpb24iLCJzaWRlIiwiYXJyYW5nZSIsIm1hcmtzIiwic2VsZWN0Iiwic2VsZWN0QWxsIiwibWFya3NFbnRlciIsImVudGVyIiwiYXBwZW5kIiwiYXR0ciIsImRhdHVtIiwibmFtZSIsIm9uIiwidGlwIiwic2hvdyIsImhpZGUiLCJtZXJnZSIsIngiLCJ5IiwiZXhpdCIsInJlbW92ZSIsImFubm90YXRpb25zIiwiZ2V0QW5ub3RhdGlvbnMiLCJzd29vcHkiLCJzd29vcHlEcmFnIiwic3dvb3B5U2VsIiwiY2FsbCIsImF4aXNCb3R0b20iLCJ0aWNrU2l6ZSIsImluc2VydENoYXJ0IiwiY29udGFpbmVyRGl2IiwibWFyZ2luIiwibGVmdCIsInJpZ2h0IiwiaGVpZ2h0IiwidG9wIiwiYm90dG9tIiwiZyIsInRleHQiLCJkaXJlY3Rpb24iLCJvZmZzZXQiLCJodG1sIiwicGFydHMiLCJpbWFnZV91cmwiLCJzcGxpdCIsImxlbmd0aCIsImZpbmQiLCJwYXRoIiwidGV4dE9mZnNldCIsImxvYWREYXRhIiwiY2IiLCJjb252ZXJ0Um93Iiwicm93IiwiYXR0YWNrIiwiaGVhbHRoIiwic2V0IiwiaW1hZ2VfbmFtZSIsImNzdiIsInNob3dBbGwiLCJ3aW5kb3ciLCJsb2NhdGlvbiIsInNlYXJjaCIsIm1hdGNoIiwiaSJdLCJtYXBwaW5ncyI6IkFBT0EsUUFBU0EsVUFBU0MsRUFBTUMsRUFBTUMsR0FDNUJDLEdBQU1KLEdBQVdDLEVBQUtJLE9B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QU9LLE9BR3JDdkIsSUE0TEE2QyxRQUtVQyxPQUFPQyxTQUFRQyxPQUFBQyxNQUFBLFVBSjdCYixVQUtLLFNBQUF2RSxHQUpILEdBS0NnRixRQUNDN0UsSUFBTUQsR0FBR21GLEdBQUEsRUFBR0EsR0FBQSxFQUFBQSxJQUFlLENBQzNCbEYsR0FBUUQsR0FBS2lELFlBQVVrQyxFQUN4QnRGLFVBQUFDLEVBQUFxRixFQUFBbkYsT0FITSxDQU1OQyxHQUFBRCxHQUFBaUQsWUFBQSxFQUpDcEQsVUFBU0MsRUFBTSxFQUFHRSIsImZpbGUiOiJzY3JpcHQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBtYXJnaW4gPSB7IHRvcDogMTAsIHJpZ2h0OiAzMCwgYm90dG9tOiAzMCwgbGVmdDogMzAgfTtcbmNvbnN0IHdpZHRoID0gNzIwIC0gbWFyZ2luLmxlZnQgLSBtYXJnaW4ucmlnaHQ7XG5jb25zdCBoZWlnaHQgPSAyMTUgLSBtYXJnaW4udG9wIC0gbWFyZ2luLmJvdHRvbTtcblxuLy8gbGV0IGFubm90YXRpb25zO1xubGV0IHRpcDtcblxuZnVuY3Rpb24gcGxvdERhdGEoZGF0YSwgbWFuYSwgc3ZnKSB7XG4gIGNvbnN0IHBsb3REYXRhID0gZGF0YS5maWx0ZXIoKGQpID0+IGQuY29zdCA9PSBtYW5hKTtcbiAgY29uc3QgZG9tYWluID0gZDMuZXh0ZW50KHBsb3REYXRhLCAoZCkgPT4gZC50cmFkZV9zY29yZSlcbiAgY29uc3QgeFNjYWxlID0gZDMuc2NhbGVMaW5lYXIoKVxuICAgIC5kb21haW4oZG9tYWluKVxuICAgIC5yYW5nZShbMCwgd2lkdGhdKVxuICAgIC5uaWNlKCk7XG5cbiAgY29uc3QgZG90UmFkaXVzID0gNTtcbiAgY29uc3Qgc3dhcm1MYXlvdXQgPSBkMy5iZWVzd2FybSgpO1xuXG4gIGNvbnN0IHN3YXJtID0gc3dhcm1MYXlvdXRcbiAgICAuZGF0YShwbG90RGF0YSlcbiAgICAuZGlzdHJpYnV0ZU9uKChkKSA9PiB4U2NhbGUoZC50cmFkZV9zY29yZSkpXG4gICAgLnJhZGl1cyhkb3RSYWRpdXMgKyAxKVxuICAgIC5vcmllbnRhdGlvbignaG9yaXpvbnRhbCcpXG4gICAgLnNpZGUoJ3N5bWV0cmljJylcbiAgICAuYXJyYW5nZSgpO1xuXG4gIGNvbnN0IG1hcmtzID0gc3ZnLnNlbGVjdCgnZy5tYWluJykuc2VsZWN0QWxsKCdjaXJjbGUnKVxuICAgIC5kYXRhKHN3YXJtKTtcblxuICBjb25zdCBtYXJrc0VudGVyID0gbWFya3MuZW50ZXIoKVxuICAgIC5hcHBlbmQoJ2NpcmNsZScpXG4gICAgICAuYXR0cigndGl0bGUnLCAoZCkgPT4gZC5kYXR1bS5uYW1lKVxuICAgICAgLmF0dHIoJ2NsYXNzJywgJ21hcmsnKVxuICAgICAgLm9uKCdtb3VzZW92ZXInLCB0aXAuc2hvdylcbiAgICAgIC5vbignbW91c2VvdXQnLCB0aXAuaGlkZSk7XG5cbiAgbWFya3NFbnRlci5tZXJnZShtYXJrcylcbiAgICAuYXR0cignY3gnLCAoZCkgPT4gZC54KVxuICAgIC5hdHRyKCdjeScsIChkKSA9PiBkLnkpXG4gICAgLmF0dHIoJ3InLCBkb3RSYWRpdXMpXG4gICAgLy8gLnN0eWxlKCdmaWxsJywgKGQpID0+ICcjMDA2NkNDJyk7XG5cbiAgbWFya3MuZXhpdCgpLnJlbW92ZSgpO1xuXG4gIC8vXG4gIC8vIEFubm90YXRpb25zXG4gIC8vXG4gIGNvbnN0IGFubm90YXRpb25zID0gZ2V0QW5ub3RhdGlvbnMoc3dhcm0sIG1hbmEpO1xuXG4gIHZhciBzd29vcHkgPSBkMy5zd29vcHlEcmFnKClcbiAgICAueCgoZCkgPT4gZC54KVxuICAgIC55KChkKSA9PiBkLnkpXG4gICAgLy8gLmRyYWdnYWJsZSh0cnVlKVxuICAgIC5hbm5vdGF0aW9ucyhhbm5vdGF0aW9ucylcblxuICBjb25zdCBzd29vcHlTZWwgPSBzdmcuc2VsZWN0KCdnLmFubm90YXRpb25zJykuY2FsbChzd29vcHkpXG4gIHN3b29weVNlbC5zZWxlY3RBbGwoJ3BhdGgnKS5hdHRyKCdtYXJrZXItZW5kJywgJ3VybCgjYXJyb3doZWFkKScpXG5cblxuICAvL1xuICAvLyBBeGVzXG4gIC8vXG4gIHN2Zy5zZWxlY3QoJ2cuYXhpcy0teCcpXG4gICAgLmNhbGwoZDMuYXhpc0JvdHRvbSh4U2NhbGUpLnRpY2tTaXplKDQpKVxufVxuXG5cbmZ1bmN0aW9uIGluc2VydENoYXJ0KG1hbmEpIHtcbiAgY29uc3QgY29udGFpbmVyRGl2ID0gZDMuc2VsZWN0KCdib2R5JykuYXBwZW5kKCdkaXYnKTtcbiAgY29uc3Qgc3ZnID0gY29udGFpbmVyRGl2LmFwcGVuZCgnc3ZnJylcbiAgICAuYXR0cignd2lkdGgnLCB3aWR0aCArIG1hcmdpbi5sZWZ0ICsgbWFyZ2luLnJpZ2h0KVxuICAgIC5hdHRyKCdoZWlnaHQnLCBoZWlnaHQgKyBtYXJnaW4udG9wICsgbWFyZ2luLmJvdHRvbSk7XG5cbiAgLy8gRGVmaW5lIHNpbXBsZSBhcnJvd2hlYWQgbWFya2VyXG4gIC8vIHZpYSBzd29vcHlhcnJvd3NcbiAgc3ZnLmFwcGVuZCgnZGVmcycpXG4gICAgLmFwcGVuZChcIm1hcmtlclwiKVxuICAgICAgLmF0dHIoXCJpZFwiLCBcImFycm93aGVhZFwiKVxuICAgICAgLmF0dHIoXCJ2aWV3Qm94XCIsIFwiLTEwIC0xMCAyMCAyMFwiKVxuICAgICAgLmF0dHIoXCJyZWZYXCIsIDApXG4gICAgICAuYXR0cihcInJlZllcIiwgMClcbiAgICAgIC5hdHRyKFwibWFya2VyV2lkdGhcIiwgMTIpXG4gICAgICAuYXR0cihcIm1hcmtlckhlaWdodFwiLCAxMilcbiAgICAgIC5hdHRyKFwic3Ryb2tlLXdpZHRoXCIsIDEpXG4gICAgICAuYXR0cihcIm9yaWVudFwiLCBcImF1dG9cIilcbiAgICAuYXBwZW5kKFwicG9seWxpbmVcIilcbiAgICAgIC5hdHRyKFwic3Ryb2tlLWxpbmVqb2luXCIsIFwiYmV2ZWxcIilcbiAgICAgIC5hdHRyKFwicG9pbnRzXCIsIFwiLTYuNzUsLTYuNzUgMCwwIC02Ljc1LDYuNzVcIik7XG5cbiAgY29uc3QgZyA9IHN2Zy5hcHBlbmQoJ2cnKVxuICAgIC5hdHRyKCd0cmFuc2Zvcm0nLCBgdHJhbnNsYXRlKCR7bWFyZ2luLmxlZnR9LCAke21hcmdpbi50b3B9KWApO1xuXG4gIGcuYXBwZW5kKCdnJylcbiAgICAuYXR0cignY2xhc3MnLCAnYXhpcyBheGlzLS14JylcbiAgICAvLyAuYXR0cigndHJhbnNmb3JtJywgYHRyYW5zbGF0ZSgkezB9LCAkeyhoZWlnaHQgLyAyKSAtIChtYXJnaW4udG9wIC8gMil9KWApO1xuICAgIC5hdHRyKCd0cmFuc2Zvcm0nLCAndHJhbnNsYXRlKDAsJyArIGhlaWdodCArICcpJyk7XG4gICAgLy8gLmF0dHIoJ3RyYW5zZm9ybScsIGB0cmFuc2xhdGUoJHttYXJnaW4udG9wfSwgJHswfSlgKTtcblxuICBnLmFwcGVuZCgnZycpXG4gICAgLmF0dHIoJ2NsYXNzJywgJ21haW4nKVxuICAgIC5hdHRyKCd0cmFuc2Zvcm0nLCBgdHJhbnNsYXRlKCR7MH0sICR7KGhlaWdodCAvIDIpIC0gKG1hcmdpbi50b3AgLyAyKX0pYCk7XG5cbiAgZy5hcHBlbmQoJ2cnKVxuICAgIC5hdHRyKCdjbGFzcycsICdhbm5vdGF0aW9ucycpXG4gICAgLmF0dHIoJ3RyYW5zZm9ybScsIGB0cmFuc2xhdGUoJHswfSwgJHsoaGVpZ2h0IC8gMikgLSAobWFyZ2luLnRvcCAvIDIpfSlgKTtcblxuXG4gIGNvbnRhaW5lckRpdi5hcHBlbmQoJ3AnKVxuICAgIC5hdHRyKCdjbGFzcycsICdjaGFydFRpdGxlJylcbiAgICAudGV4dChgJHttYW5hfSBDb3N0IE5ldXRyYWwgTWluaW9uc2ApXG5cbiAgLy8gaW5pdCB0b29sdGlwXG4gIHRpcCA9IGQzLnRpcCgpXG4gICAgIC5hdHRyKCdjbGFzcycsICdkMy10aXAnKVxuICAgICAuZGlyZWN0aW9uKCdzJylcbiAgICAgLm9mZnNldChbMTAsIDBdKVxuICAgICAuaHRtbCgoZCkgPT4ge1xuICAgICAgIGNvbnN0IHBhcnRzID0gZC5kYXR1bS5pbWFnZV91cmwuc3BsaXQoJ1xcLycpXG4gICAgICAgY29uc3QgbmFtZSA9IHBhcnRzW3BhcnRzLmxlbmd0aCAtIDFdO1xuICAgICAgIHJldHVybiBgXG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPGltZyBzcmM9Jy4vaHMtaW1nLyR7bmFtZX0nIHdpZHRoPScyNTBweCc+PC9pbWc+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICBgO1xuICAgIH0pO1xuICBzdmcuY2FsbCh0aXApXG5cbiAgcmV0dXJuIHN2Z1xufVxuXG5mdW5jdGlvbiBnZXRBbm5vdGF0aW9ucyhzd2FybSwgbWFuYSkge1xuICBpZiAobWFuYSA9PSA0KSB7XG4gICAgY29uc3QgY3cgPSBzd2FybS5maW5kKChkKSA9PiBkLmRhdHVtLm5hbWUgPT0gJ0NoaWxsd2luZCBZZXRpJyk7XG4gICAgY29uc3QgZXMgPSBzd2FybS5maW5kKChkKSA9PiBkLmRhdHVtLm5hbWUgPT0gJ0VlcmllIFN0YXR1ZScpO1xuICAgIGNvbnN0IHdnID0gc3dhcm0uZmluZCgoZCkgPT4gZC5kYXR1bS5uYW1lID09ICdXb3JnZW4gR3JlYXNlcicpO1xuXG4gICAgY29uc3QgYW5ub3RhdGlvbnMgPSBbXG4gICAgICB7XG4gICAgICAgIFwidHJhZGVfc2NvcmVcIjogNTM4LjI2NjY2NjY2NjY2NjcsXG4gICAgICAgIFwieVwiOiAwLFxuICAgICAgICBcInBhdGhcIjogXCJNNTQ4LC00OUM1MjgsLTQzLDUyNCwtMTksNTA5LC01XCIsXG4gICAgICAgIFwidGV4dFwiOiBcIkNoaWxsd2luZCBZZXRpXCIsXG4gICAgICAgIFwidGV4dE9mZnNldFwiOiBbXG4gICAgICAgICAgNTUzLFxuICAgICAgICAgIC00NFxuICAgICAgICBdXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBcInRyYWRlX3Njb3JlXCI6IDYzNS4wNjY2NjY2NjY2NjY2LFxuICAgICAgICBcInlcIjogMCxcbiAgICAgICAgXCJwYXRoXCI6IFwiTTYwNiw0MUM2MDcsMTksNjIwLDMsNjM5LDBcIixcbiAgICAgICAgXCJ0ZXh0XCI6IFwiRWVyaWUgU3RhdHVlXCIsXG4gICAgICAgIFwidGV4dE9mZnNldFwiOiBbXG4gICAgICAgICAgNTc3LFxuICAgICAgICAgIDYwXG4gICAgICAgIF1cbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIFwidHJhZGVfc2NvcmVcIjogNDcwLjA2NjY2NjY2NjY2NjY2LFxuICAgICAgICBcInlcIjogMCxcbiAgICAgICAgXCJwYXRoXCI6IFwiTTQxNCw1OEM0NDUsNTAsNDE4LDIsNDU3LDBcIixcbiAgICAgICAgXCJ0ZXh0XCI6IFwiV29yZ2VuIEdyZWFzZXJcIixcbiAgICAgICAgXCJ0ZXh0T2Zmc2V0XCI6IFtcbiAgICAgICAgICAzNjgsXG4gICAgICAgICAgNzFcbiAgICAgICAgXVxuICAgICAgfSxcbiAgICBdO1xuICAgIHJldHVybiBhbm5vdGF0aW9ucztcbiAgfVxuICByZXR1cm4gW107XG59XG5cbmZ1bmN0aW9uIGxvYWREYXRhKGNiKSB7XG4gIGZ1bmN0aW9uIGNvbnZlcnRSb3cocm93KSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG5hbWU6IHJvdy5uYW1lLFxuICAgICAgY29zdDogK3Jvdy5jb3N0LFxuICAgICAgYXR0YWNrOiArcm93LmF0dGFjayxcbiAgICAgIGhlYWx0aDogK3Jvdy5oZWFsdGgsXG4gICAgICB0cmFkZV9zY29yZTogK3Jvdy50cmFkZV9zY29yZSxcbiAgICAgIHRleHQ6IHJvdy50ZXh0LFxuICAgICAgc2V0OiByb3cuc2V0LFxuICAgICAgaW1hZ2VfbmFtZTogcm93LmltYWdlX25hbWUsXG4gICAgICBpbWFnZV91cmw6IHJvdy5pbWFnZV91cmwsXG4gICAgfVxuICB9XG5cbiAgLy8gZDMuY3N2KCdzdGFuZGFyZF9hbGxfcmVsYXRpdmUuY3N2JywgY29udmVydFJvdywgY2IpXG4gIGQzLmNzdignc3RhbmRhcmRfYWxsX3VwZG93bi5jc3YnLCBjb252ZXJ0Um93LCBjYilcbn1cblxudmFyIHNob3dBbGwgPSB3aW5kb3cubG9jYXRpb24uc2VhcmNoLm1hdGNoKCdzaG93QWxsJylcbmxvYWREYXRhKChkYXRhKSA9PiB7XG4gIGlmIChzaG93QWxsKSB7XG4gICAgZm9yIChsZXQgaT0xOyBpIDw9IDc7IGkrKykge1xuICAgICAgY29uc3Qgc3ZnID0gaW5zZXJ0Q2hhcnQoaSk7XG4gICAgICBwbG90RGF0YShkYXRhLCBpLCBzdmcpO1xuICAgIH1cbiAgfSBlbHNlIHtcbiAgICBjb25zdCBzdmcgPSBpbnNlcnRDaGFydCg0KTtcbiAgICBwbG90RGF0YShkYXRhLCA0LCBzdmcpO1xuICB9XG5cblxufSk7XG4iXX0=
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <title>Hearthstone Minion Efficiency: 4 drops</title>
 <link href='dist.css' rel='stylesheet' />
 <!-- <link href='https://cdn.rawgit.com/Caged/d3-tip/4ba5338d/examples/example-styles.css' rel='stylesheet' /> -->

 <body>
 	<script src='https://d3js.org/d3.v4.min.js'></script>
 	<script src='https://cdn.rawgit.com/Kcnarf/d3-beeswarm/master/build/d3-beeswarm.js'></script>
 	<script src='https://cdn.rawgit.com/1wheel/swoopy-drag/gh-pages/swoopy-drag.js'></script>
 	<script src='https://cdn.rawgit.com/Caged/d3-tip/4ba5338d/index.js'></script>


 	<script src='dist.js'></script>
 </body>
diff --git a/script.js b/script.js
 const margin = { top: 10, right: 30, bottom: 30, left: 30 };
 const width = 720 - margin.left - margin.right;
 const height = 215 - margin.top - margin.bottom;

 // let annotations;
 let tip;

 function plotData(data, mana, svg) {
  const plotData = data.filter((d) => d.cost == mana);
  const domain = d3.extent(plotData, (d) => d.trade_score)
  const xScale = d3.scaleLinear()
    .domain(domain)
    .range([0, width])
    .nice();

  const dotRadius = 5;
  const swarmLayout = d3.beeswarm();

  const swarm = swarmLayout
    .data(plotData)
    .distributeOn((d) => xScale(d.trade_score))
    .radius(dotRadius + 1)
    .orientation('horizontal')
    .side('symetric')
    .arrange();

  const marks = svg.select('g.main').selectAll('circle')
    .data(swarm);

  const marksEnter = marks.enter()
    .append('circle')
      .attr('title', (d) => d.datum.name)
      .attr('class', 'mark')
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

  marksEnter.merge(marks)
    .attr('cx', (d) => d.x)
    .attr('cy', (d) => d.y)
    .attr('r', dotRadius)
    // .style('fill', (d) => '#0066CC');

  marks.exit().remove();

  //
  // Annotations
  //
  const annotations = getAnnotations(swarm, mana);

  var swoopy = d3.swoopyDrag()
    .x((d) => d.x)
    .y((d) => d.y)
    // .draggable(true)
    .annotations(annotations)

  const swoopySel = svg.select('g.annotations').call(swoopy)
  swoopySel.selectAll('path').attr('marker-end', 'url(#arrowhead)')


  //
  // Axes
  //
  svg.select('g.axis--x')
    .call(d3.axisBottom(xScale).tickSize(4))
 }


 function insertChart(mana) {
  const containerDiv = d3.select('body').append('div');
  const svg = containerDiv.append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom);

  // Define simple arrowhead marker
  // via swoopyarrows
  svg.append('defs')
    .append("marker")
      .attr("id", "arrowhead")
      .attr("viewBox", "-10 -10 20 20")
      .attr("refX", 0)
      .attr("refY", 0)
      .attr("markerWidth", 12)
      .attr("markerHeight", 12)
      .attr("stroke-width", 1)
      .attr("orient", "auto")
    .append("polyline")
      .attr("stroke-linejoin", "bevel")
      .attr("points", "-6.75,-6.75 0,0 -6.75,6.75");

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

  g.append('g')
    .attr('class', 'axis axis--x')
    // .attr('transform', `translate(${0}, ${(height / 2) - (margin.top / 2)})`);
    .attr('transform', 'translate(0,' + height + ')');
    // .attr('transform', `translate(${margin.top}, ${0})`);

  g.append('g')
    .attr('class', 'main')
    .attr('transform', `translate(${0}, ${(height / 2) - (margin.top / 2)})`);

  g.append('g')
    .attr('class', 'annotations')
    .attr('transform', `translate(${0}, ${(height / 2) - (margin.top / 2)})`);


  containerDiv.append('p')
    .attr('class', 'chartTitle')
    .text(`${mana} Cost Neutral Minions`)

  // init tooltip
  tip = d3.tip()
     .attr('class', 'd3-tip')
     .direction('s')
     .offset([10, 0])
     .html((d) => {
       const parts = d.datum.image_url.split('\/')
       const name = parts[parts.length - 1];
       return `
        <div>
          <img src='./hs-img/${name}' width='250px'></img>
        </div>

      `;
    });
  svg.call(tip)

  return svg
 }

 function getAnnotations(swarm, mana) {
  if (mana == 4) {
    const cw = swarm.find((d) => d.datum.name == 'Chillwind Yeti');
    const es = swarm.find((d) => d.datum.name == 'Eerie Statue');
    const wg = swarm.find((d) => d.datum.name == 'Worgen Greaser');

    const annotations = [
      {
        "trade_score": 538.2666666666667,
        "y": 0,
        "path": "M548,-49C528,-43,524,-19,509,-5",
        "text": "Chillwind Yeti",
        "textOffset": [
          553,
          -44
        ]
      },
      {
        "trade_score": 635.0666666666666,
        "y": 0,
        "path": "M606,41C607,19,620,3,639,0",
        "text": "Eerie Statue",
        "textOffset": [
          577,
          60
        ]
      },
      {
        "trade_score": 470.06666666666666,
        "y": 0,
        "path": "M414,58C445,50,418,2,457,0",
        "text": "Worgen Greaser",
        "textOffset": [
          368,
          71
        ]
      },
    ];
    return annotations;
  }
  return [];
 }

 function loadData(cb) {
  function convertRow(row) {
    return {
      name: row.name,
      cost: +row.cost,
      attack: +row.attack,
      health: +row.health,
      trade_score: +row.trade_score,
      text: row.text,
      set: row.set,
      image_name: row.image_name,
      image_url: row.image_url,
    }
  }

  // d3.csv('standard_all_relative.csv', convertRow, cb)
  d3.csv('standard_all_updown.csv', convertRow, cb)
 }

 var showAll = window.location.search.match('showAll')
 loadData((data) => {
  if (showAll) {
    for (let i=1; i <= 7; i++) {
      const svg = insertChart(i);
      plotData(data, i, svg);
    }
  } else {
    const svg = insertChart(4);
    plotData(data, 4, svg);
  }


 });
diff --git a/standard_all_relative.csv b/standard_all_relative.csv
diff --git a/standard_all_updown.csv b/standard_all_updown.csv
diff --git a/style.styl b/style.styl
 body {
 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 	// font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 	font-weight: 300;
 	font-size: 12px;
 	width: 720px;
 }

 .d3-tip {
  width: 300px
 	height: 340px;
 	padding: 10px;

 	background-color: rgba(255, 255, 255, 0.1);
 	img {
 		width: 250px;
 		margin: -15px 0 0 15px;
 		padding: 0;
 	}
 }


 svg {

 	circle.mark {
 		fill: #BDB2A4;
 	}

 	circle.mark:hover {
 		fill: tomato;
 	}

 	path {
 		stroke-width: 1px;
 		stroke: black;
 		fill:none
 	}

 	.axis path,
 	.axis line {
 	  fill: none;
 	  stroke: #efefef;
 	  shape-rendering: crispEdges;
 	}
 }

 .chartTitle {
 	text-align: center;
 	font-size: 1.2em;
 	// font-weight:bold;
 }
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<title>Hearthstone Minion Efficiency: 4 drops</title>
	<link href='dist.css' rel='stylesheet' />
	<!-- <link href='https://cdn.rawgit.com/Caged/d3-tip/4ba5338d/examples/example-styles.css' rel='stylesheet' /> -->

	<body>
	<script src='https://d3js.org/d3.v4.min.js'></script>
	<script src='https://cdn.rawgit.com/Kcnarf/d3-beeswarm/master/build/d3-beeswarm.js'></script>
	<script src='https://cdn.rawgit.com/1wheel/swoopy-drag/gh-pages/swoopy-drag.js'></script>
	<script src='https://cdn.rawgit.com/Caged/d3-tip/4ba5338d/index.js'></script>


	<script src='dist.js'></script>
	</body>
	const margin = { top: 10, right: 30, bottom: 30, left: 30 };
	const width = 720 - margin.left - margin.right;
	const height = 215 - margin.top - margin.bottom;

	// let annotations;
	let tip;

	function plotData(data, mana, svg) {
	const plotData = data.filter((d) => d.cost == mana);
	const domain = d3.extent(plotData, (d) => d.trade_score)
	const xScale = d3.scaleLinear()
	.domain(domain)
	.range([0, width])
	.nice();

	const dotRadius = 5;
	const swarmLayout = d3.beeswarm();

	const swarm = swarmLayout
	.data(plotData)
	.distributeOn((d) => xScale(d.trade_score))
	.radius(dotRadius + 1)
	.orientation('horizontal')
	.side('symetric')
	.arrange();

	const marks = svg.select('g.main').selectAll('circle')
	.data(swarm);

	const marksEnter = marks.enter()
	.append('circle')
	.attr('title', (d) => d.datum.name)
	.attr('class', 'mark')
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);

	marksEnter.merge(marks)
	.attr('cx', (d) => d.x)
	.attr('cy', (d) => d.y)
	.attr('r', dotRadius)
	// .style('fill', (d) => '#0066CC');

	marks.exit().remove();

	//
	// Annotations
	//
	const annotations = getAnnotations(swarm, mana);

	var swoopy = d3.swoopyDrag()
	.x((d) => d.x)
	.y((d) => d.y)
	// .draggable(true)
	.annotations(annotations)

	const swoopySel = svg.select('g.annotations').call(swoopy)
	swoopySel.selectAll('path').attr('marker-end', 'url(#arrowhead)')


	//
	// Axes
	//
	svg.select('g.axis--x')
	.call(d3.axisBottom(xScale).tickSize(4))
	}


	function insertChart(mana) {
	const containerDiv = d3.select('body').append('div');
	const svg = containerDiv.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom);

	// Define simple arrowhead marker
	// via swoopyarrows
	svg.append('defs')
	.append("marker")
	.attr("id", "arrowhead")
	.attr("viewBox", "-10 -10 20 20")
	.attr("refX", 0)
	.attr("refY", 0)
	.attr("markerWidth", 12)
	.attr("markerHeight", 12)
	.attr("stroke-width", 1)
	.attr("orient", "auto")
	.append("polyline")
	.attr("stroke-linejoin", "bevel")
	.attr("points", "-6.75,-6.75 0,0 -6.75,6.75");

	const g = svg.append('g')
	.attr('transform', `translate(${margin.left}, ${margin.top})`);

	g.append('g')
	.attr('class', 'axis axis--x')
	// .attr('transform', `translate(${0}, ${(height / 2) - (margin.top / 2)})`);
	.attr('transform', 'translate(0,' + height + ')');
	// .attr('transform', `translate(${margin.top}, ${0})`);

	g.append('g')
	.attr('class', 'main')
	.attr('transform', `translate(${0}, ${(height / 2) - (margin.top / 2)})`);

	g.append('g')
	.attr('class', 'annotations')
	.attr('transform', `translate(${0}, ${(height / 2) - (margin.top / 2)})`);


	containerDiv.append('p')
	.attr('class', 'chartTitle')
	.text(`${mana} Cost Neutral Minions`)

	// init tooltip
	tip = d3.tip()
	.attr('class', 'd3-tip')
	.direction('s')
	.offset([10, 0])
	.html((d) => {
	const parts = d.datum.image_url.split('\/')
	const name = parts[parts.length - 1];
	return `
	<div>
	<img src='./hs-img/${name}' width='250px'></img>
	</div>

	`;
	});
	svg.call(tip)

	return svg
	}

	function getAnnotations(swarm, mana) {
	if (mana == 4) {
	const cw = swarm.find((d) => d.datum.name == 'Chillwind Yeti');
	const es = swarm.find((d) => d.datum.name == 'Eerie Statue');
	const wg = swarm.find((d) => d.datum.name == 'Worgen Greaser');

	const annotations = [
	{
	"trade_score": 538.2666666666667,
	"y": 0,
	"path": "M548,-49C528,-43,524,-19,509,-5",
	"text": "Chillwind Yeti",
	"textOffset": [
	553,
	-44
	]
	},
	{
	"trade_score": 635.0666666666666,
	"y": 0,
	"path": "M606,41C607,19,620,3,639,0",
	"text": "Eerie Statue",
	"textOffset": [
	577,
	60
	]
	},
	{
	"trade_score": 470.06666666666666,
	"y": 0,
	"path": "M414,58C445,50,418,2,457,0",
	"text": "Worgen Greaser",
	"textOffset": [
	368,
	71
	]
	},
	];
	return annotations;
	}
	return [];
	}

	function loadData(cb) {
	function convertRow(row) {
	return {
	name: row.name,
	cost: +row.cost,
	attack: +row.attack,
	health: +row.health,
	trade_score: +row.trade_score,
	text: row.text,
	set: row.set,
	image_name: row.image_name,
	image_url: row.image_url,
	}
	}

	// d3.csv('standard_all_relative.csv', convertRow, cb)
	d3.csv('standard_all_updown.csv', convertRow, cb)
	}

	var showAll = window.location.search.match('showAll')
	loadData((data) => {
	if (showAll) {
	for (let i=1; i <= 7; i++) {
	const svg = insertChart(i);
	plotData(data, i, svg);
	}
	} else {
	const svg = insertChart(4);
	plotData(data, 4, svg);
	}


	});
	body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	// font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 12px;
	width: 720px;
	}

	.d3-tip {
	width: 300px
	height: 340px;
	padding: 10px;

	background-color: rgba(255, 255, 255, 0.1);
	img {
	width: 250px;
	margin: -15px 0 0 15px;
	padding: 0;
	}
	}


	svg {

	circle.mark {
	fill: #BDB2A4;
	}

	circle.mark:hover {
	fill: tomato;
	}

	path {
	stroke-width: 1px;
	stroke: black;
	fill:none
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #efefef;
	shape-rendering: crispEdges;
	}
	}

	.chartTitle {
	text-align: center;
	font-size: 1.2em;
	// font-weight:bold;
	}