HS Neutral 4 Drops

.block

license: mit
height: 720
border: no

.gitignore

hs-img

README.md

HS Neutral 4 drop swarm plot.

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}

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=

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>

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);
  }


});

standard_all_relative.csv

standard_all_updown.csv

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;
}

thumbnail.png