Scatterplots with Tooltips

_.md

[ Launch: Tributary inlet ] 12ec2fed2ff00ec32f07 by ramnathv

app.css

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

.axis text {
    font-family: sans-serif;
    font-size: 12px;
    fill: #494949;
}

.d3-tip {
  line-height: 1.4;
  font-weight: normal;
  font-size: 14px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none !important;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -3px 0 0 0;
  top: 100%;
  left: 0;
}
.legend text {
   font-size: 13px; 
}

config.json

{"description":"Scatterplots with Tooltips","endpoint":"","display":"svg","public":true,"require":[{"name":"d3tip","url":"https://rawgit.com/Caged/d3-tip/master/index.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"legend.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/UEDK6Uc.png"}

data.json

[{"total_bill":16.99,"tip":1.01,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":10.34,"tip":1.66,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":21.01,"tip":3.5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":23.68,"tip":3.31,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":24.59,"tip":3.61,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":25.29,"tip":4.71,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":8.77,"tip":2,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":26.88,"tip":3.12,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":15.04,"tip":1.96,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":14.78,"tip":3.23,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":10.27,"tip":1.71,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":35.26,"tip":5,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":15.42,"tip":1.57,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":18.43,"tip":3,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":14.83,"tip":3.02,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":21.58,"tip":3.92,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":10.33,"tip":1.67,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":16.29,"tip":3.71,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":16.97,"tip":3.5,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":20.65,"tip":3.35,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":17.92,"tip":4.08,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":20.29,"tip":2.75,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":15.77,"tip":2.23,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":39.42,"tip":7.58,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":19.82,"tip":3.18,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":17.81,"tip":2.34,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":13.37,"tip":2,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":12.69,"tip":2,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":21.7,"tip":4.3,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":19.65,"tip":3,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":9.55,"tip":1.45,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":18.35,"tip":2.5,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":15.06,"tip":3,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":20.69,"tip":2.45,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":17.78,"tip":3.27,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":24.06,"tip":3.6,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":16.31,"tip":2,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":16.93,"tip":3.07,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":18.69,"tip":2.31,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":31.27,"tip":5,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":16.04,"tip":2.24,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":17.46,"tip":2.54,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":13.94,"tip":3.06,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":9.68,"tip":1.32,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":30.4,"tip":5.6,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":18.29,"tip":3,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":22.23,"tip":5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":32.4,"tip":6,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":28.55,"tip":2.05,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":18.04,"tip":3,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":12.54,"tip":2.5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":10.29,"tip":2.6,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":34.81,"tip":5.2,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":9.94,"tip":1.56,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":25.56,"tip":4.34,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":19.49,"tip":3.51,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":38.01,"tip":3,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":4},{"total_bill":26.41,"tip":1.5,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":11.24,"tip":1.76,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":48.27,"tip":6.73,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":20.29,"tip":3.21,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":13.81,"tip":2,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":11.02,"tip":1.98,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":18.29,"tip":3.76,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":4},{"total_bill":17.59,"tip":2.64,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":20.08,"tip":3.15,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":16.45,"tip":2.47,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":3.07,"tip":1,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":1},{"total_bill":20.23,"tip":2.01,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":15.01,"tip":2.09,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":12.02,"tip":1.97,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":17.07,"tip":3,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":26.86,"tip":3.14,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":25.28,"tip":5,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":14.73,"tip":2.2,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":10.51,"tip":1.25,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":17.92,"tip":3.08,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":27.2,"tip":4,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":4},{"total_bill":22.76,"tip":3,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":17.29,"tip":2.71,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":19.44,"tip":3,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":16.66,"tip":3.4,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":10.07,"tip":1.83,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":1},{"total_bill":32.68,"tip":5,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":15.98,"tip":2.03,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":34.83,"tip":5.17,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":4},{"total_bill":13.03,"tip":2,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":18.28,"tip":4,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":24.71,"tip":5.85,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":21.16,"tip":3,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":28.97,"tip":3,"sex":"Male","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":22.49,"tip":3.5,"sex":"Male","smoker":"No","day":"Fri","time":"Dinner","size":2},{"total_bill":5.75,"tip":1,"sex":"Female","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":16.32,"tip":4.3,"sex":"Female","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":22.75,"tip":3.25,"sex":"Female","smoker":"No","day":"Fri","time":"Dinner","size":2},{"total_bill":40.17,"tip":4.73,"sex":"Male","smoker":"Yes","day":"Fri","time":"Dinner","size":4},{"total_bill":27.28,"tip":4,"sex":"Male","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":12.03,"tip":1.5,"sex":"Male","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":21.01,"tip":3,"sex":"Male","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":12.46,"tip":1.5,"sex":"Male","smoker":"No","day":"Fri","time":"Dinner","size":2},{"total_bill":11.35,"tip":2.5,"sex":"Female","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":15.38,"tip":3,"sex":"Female","smoker":"Yes","day":"Fri","time":"Dinner","size":2},{"total_bill":44.3,"tip":2.5,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":3},{"total_bill":22.42,"tip":3.48,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":20.92,"tip":4.08,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":15.36,"tip":1.64,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":20.49,"tip":4.06,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":25.21,"tip":4.29,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":18.24,"tip":3.76,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":14.31,"tip":4,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":14,"tip":3,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":7.25,"tip":1,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":1},{"total_bill":38.07,"tip":4,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":23.95,"tip":2.55,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":25.71,"tip":4,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":17.31,"tip":3.5,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":29.93,"tip":5.07,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":10.65,"tip":1.5,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":12.43,"tip":1.8,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":24.08,"tip":2.92,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":4},{"total_bill":11.69,"tip":2.31,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":13.42,"tip":1.68,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":14.26,"tip":2.5,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":15.95,"tip":2,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":12.48,"tip":2.52,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":29.8,"tip":4.2,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":6},{"total_bill":8.52,"tip":1.48,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":14.52,"tip":2,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":11.38,"tip":2,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":22.82,"tip":2.18,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":3},{"total_bill":19.08,"tip":1.5,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":20.27,"tip":2.83,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":11.17,"tip":1.5,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":12.26,"tip":2,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":18.26,"tip":3.25,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":8.51,"tip":1.25,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":10.33,"tip":2,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":14.15,"tip":2,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":16,"tip":2,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":13.16,"tip":2.75,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":17.47,"tip":3.5,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":34.3,"tip":6.7,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":6},{"total_bill":41.19,"tip":5,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":5},{"total_bill":27.05,"tip":5,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":6},{"total_bill":16.43,"tip":2.3,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":8.35,"tip":1.5,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":18.64,"tip":1.36,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":3},{"total_bill":11.87,"tip":1.63,"sex":"Female","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":9.78,"tip":1.73,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":7.51,"tip":2,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":14.07,"tip":2.5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":13.13,"tip":2,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":17.26,"tip":2.74,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":24.55,"tip":2,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":19.77,"tip":2,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":29.85,"tip":5.14,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":5},{"total_bill":48.17,"tip":5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":6},{"total_bill":25,"tip":3.75,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":13.39,"tip":2.61,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":16.49,"tip":2,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":21.5,"tip":3.5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":12.66,"tip":2.5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":16.21,"tip":2,"sex":"Female","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":13.81,"tip":2,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":17.51,"tip":3,"sex":"Female","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":24.52,"tip":3.48,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":3},{"total_bill":20.76,"tip":2.24,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":2},{"total_bill":31.71,"tip":4.5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":4},{"total_bill":10.59,"tip":1.61,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":10.63,"tip":2,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":50.81,"tip":10,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":3},{"total_bill":15.81,"tip":3.16,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":7.25,"tip":5.15,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":31.85,"tip":3.18,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":16.82,"tip":4,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":32.9,"tip":3.11,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":17.89,"tip":2,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":14.48,"tip":2,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":9.6,"tip":4,"sex":"Female","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":34.63,"tip":3.55,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":34.65,"tip":3.68,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":4},{"total_bill":23.33,"tip":5.65,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":45.35,"tip":3.5,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":3},{"total_bill":23.17,"tip":6.5,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":4},{"total_bill":40.55,"tip":3,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":20.69,"tip":5,"sex":"Male","smoker":"No","day":"Sun","time":"Dinner","size":5},{"total_bill":20.9,"tip":3.5,"sex":"Female","smoker":"Yes","day":"Sun","time":"Dinner","size":3},{"total_bill":30.46,"tip":2,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":5},{"total_bill":18.15,"tip":3.5,"sex":"Female","smoker":"Yes","day":"Sun","time":"Dinner","size":3},{"total_bill":23.1,"tip":4,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":3},{"total_bill":15.69,"tip":1.5,"sex":"Male","smoker":"Yes","day":"Sun","time":"Dinner","size":2},{"total_bill":19.81,"tip":4.19,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":28.44,"tip":2.56,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":15.48,"tip":2.02,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":16.58,"tip":4,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":7.56,"tip":1.44,"sex":"Male","smoker":"No","day":"Thur","time":"Lunch","size":2},{"total_bill":10.34,"tip":2,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":43.11,"tip":5,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":4},{"total_bill":13,"tip":2,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":13.51,"tip":2,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":18.71,"tip":4,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":3},{"total_bill":12.74,"tip":2.01,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":13,"tip":2,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":16.4,"tip":2.5,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":2},{"total_bill":20.53,"tip":4,"sex":"Male","smoker":"Yes","day":"Thur","time":"Lunch","size":4},{"total_bill":16.47,"tip":3.23,"sex":"Female","smoker":"Yes","day":"Thur","time":"Lunch","size":3},{"total_bill":26.59,"tip":3.41,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":3},{"total_bill":38.73,"tip":3,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":4},{"total_bill":24.27,"tip":2.03,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":12.76,"tip":2.23,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":30.06,"tip":2,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":3},{"total_bill":25.89,"tip":5.16,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":4},{"total_bill":48.33,"tip":9,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":13.27,"tip":2.5,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":28.17,"tip":6.5,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":3},{"total_bill":12.9,"tip":1.1,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":28.15,"tip":3,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":5},{"total_bill":11.59,"tip":1.5,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":7.74,"tip":1.44,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":30.14,"tip":3.09,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":4},{"total_bill":12.16,"tip":2.2,"sex":"Male","smoker":"Yes","day":"Fri","time":"Lunch","size":2},{"total_bill":13.42,"tip":3.48,"sex":"Female","smoker":"Yes","day":"Fri","time":"Lunch","size":2},{"total_bill":8.58,"tip":1.92,"sex":"Male","smoker":"Yes","day":"Fri","time":"Lunch","size":1},{"total_bill":15.98,"tip":3,"sex":"Female","smoker":"No","day":"Fri","time":"Lunch","size":3},{"total_bill":13.42,"tip":1.58,"sex":"Male","smoker":"Yes","day":"Fri","time":"Lunch","size":2},{"total_bill":16.27,"tip":2.5,"sex":"Female","smoker":"Yes","day":"Fri","time":"Lunch","size":2},{"total_bill":10.09,"tip":2,"sex":"Female","smoker":"Yes","day":"Fri","time":"Lunch","size":2},{"total_bill":20.45,"tip":3,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":4},{"total_bill":13.28,"tip":2.72,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":22.12,"tip":2.88,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":24.01,"tip":2,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":4},{"total_bill":15.69,"tip":3,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":3},{"total_bill":11.61,"tip":3.39,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":10.77,"tip":1.47,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":15.53,"tip":3,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":10.07,"tip":1.25,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":12.6,"tip":1,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":32.83,"tip":1.17,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":35.83,"tip":4.67,"sex":"Female","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":29.03,"tip":5.92,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":3},{"total_bill":27.18,"tip":2,"sex":"Female","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":22.67,"tip":2,"sex":"Male","smoker":"Yes","day":"Sat","time":"Dinner","size":2},{"total_bill":17.82,"tip":1.75,"sex":"Male","smoker":"No","day":"Sat","time":"Dinner","size":2},{"total_bill":18.78,"tip":3,"sex":"Female","smoker":"No","day":"Thur","time":"Dinner","size":2}]

inlet.coffee

data = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}]

data = tributary.data
                        

W = 631
H = 400
margin = {left: 82, right: 20, top: 56, bottom: 40}
width = W - margin.left - margin.right
height = H - margin.top - margin.bottom

xS = d3.scale.linear().range([0, width])
yS = d3.scale.linear().range([height, 0])
cS = d3.scale.category10()

xS.domain([0, d3.max(data, (d) -> d.tip*1.01)]).nice()
yS.domain([1, d3.max(data, (d) -> d.total_bill*1.01)]).nice()

zoomed = ->
  svg.select(".x.axis").call(xAxis)
  svg.select(".y.axis").call(yAxis)
  circles
    .attr("cx", (d) -> xS(d.tip))
    .attr("cy", (d) -> yS(d.total_bill))
  
zoom = d3.behavior.zoom()
  .x(xS)
  .y(yS)
  .scaleExtent([1, 10])
  .on("zoom", zoomed)


svg = d3.select("svg")
    .attr("width", W)
    .attr("height", H)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(zoom)
  
# add clip path
svg.append("clipPath")
  .attr("id", "chart-area")
  .append("rect")
  .attr("width", width)
  .attr("height", height)
  
svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .attr("fill", "white")
  .attr("fill-opacity", )
    
tooltip = d3.tip().attr("class", "d3-tip")
  .offset([-10, 0])
  .html (d) -> 
    """
     <table>
       <tr>
         <td>Tip</td>
         <td>#{d.tip}</td>
       </tr>
       <tr>
         <td>Total</td>
         <td>#{d.total_bill}</td>
       </tr>
     </table>
    """



svg.call(tooltip)


xAxis = d3.svg.axis()
  .scale(xS)
  .orient("bottom")
  .tickSize(-height)
  
yAxis = d3.svg.axis()
  .scale(yS)
  .orient("left")
  .tickSize(-width)
  .ticks(5)

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)


circles = svg.append("g")
  .attr("class", "circles")
  .attr("clip-path", "url(#chart-area)")
  .selectAll('circle')
  .data(data)
  
circles.enter()
  .append("circle")
  .attr("cx", (d) -> xS(d.tip))
  .attr("cy", (d) -> yS(d.total_bill))
  .attr("r", 3)
  .attr("fill", (d, i) -> cS(d.sex))
  .attr("fill-opacity", 1.18)
  
circles.on("mouseover", tooltip.show)
circles.on("mouseout", tooltip.hide)

###
legend = svg.append("g")
  .selectAll("circle")
  .data([0, 1])
  
legend.enter()
  .append("circle")
  .attr("cx", width/2)
  .attr("cy", -20)
  .attr("r", 2)
###

sampleCategoricalData = ["Male", "Female"]
sampleOrdinal = d3.scale.category10()
  .domain(sampleCategoricalData);

verticalLegend = d3.svg.legend()
  .labelFormat("none")
  .cellPadding(6)
  .orientation("vertical")
  .units("")
  .cellWidth(19)
  .cellHeight(18)
  .inputScale(sampleOrdinal)
  .cellStepping(7);

d3.select("svg")
  .append("g")
  .attr("transform", "translate(100,80)")
  .attr("class", "legend")
  .call(verticalLegend);

  
  
  

legend.js

d3.svg.legend = function() {

    var legendValues=[{color: "red", stop: [0,1]},{color: "blue", stop: [1,2]},{color: "purple", stop: [2,3]},{color: "yellow", stop: [3,4]},{color: "Aquamarine", stop: [4,5]}];
    var legendScale;
    var cellWidth = 30;
    var cellHeight = 20;
    var adjustable = false;
    var labelFormat = d3.format(".01f");
    var coordinates = {x:0, y:0};
    var labelUnits = "units";
    var lastValue = 6;
    var changeValue = 1;
    var orientation = "horizontal";
    var cellPadding = 0;


    function legend(svg) {

        updateBGSize = function(legend){

            var margin = 10;
            dim = legend.target.node().getBBox();
            dim.height += margin * 2;
            dim.width += margin * 2;
            dim.y -= margin;
            dim.x -= margin;

            legend.parentGroup.select(".mutLegendBG")
                .attr(dim)
        };

        drag = d3.behavior.drag()
            .on("drag", function(d,i) {
                console.log(this);
                d.x += d3.event.dx;
                d.y += d3.event.dy;
                d3.select(this).attr("transform", function(d,i){
                    return "translate(" + [ d.x,d.y ] + ")"
                })
            })
            .on("dragstart", function() {
                d3.event.sourceEvent.stopPropagation(); // silence other listeners
            });

        function init() {
            var mutLegendGroup = svg.append("g")
                .attr("class", "mutLegendGroup")
                .data([ coordinates ])
                .attr("transform", "translate(" + coordinates.x + "," + coordinates.y + ")");
            var target = mutLegendGroup
                .insert("g")
                .attr("class", "mutLegendGroupText");


            // set legend background
            var mutLegendBG = mutLegendGroup
                .insert("rect", ":first-child")
                .attr("class", "mutLegendBG")
                .attr("fill", "white")
                .attr("stroke", "black")
                .attr("stroke-width", "1px");


            return {
                parentGroup: mutLegendGroup,
                target: target
            }
        };



        function cellRange(valuePosition, changeVal) {
            legendValues[valuePosition].stop[0] += changeVal;
            legendValues[valuePosition - 1].stop[1] += changeVal;
            redraw();
        }

        function redraw() {


            legend.target.selectAll("g.legendCells").data(legendValues).exit().remove();
            legend.target.selectAll("g.legendCells").select("rect").style("fill", function(d) {return d.color});
            if (orientation == "vertical") {
                legend.target.selectAll("g.legendCells").select("text.breakLabels").style("display", "block").style("text-anchor", "start").attr("x", cellWidth + cellPadding).attr("y", 5 + (cellHeight / 2)).text(function(d) {return labelFormat(d.stop[0]) + (d.stop[1].length > 0 ? " - " + labelFormat(d.stop[1]) : "")})
                legend.target.selectAll("g.legendCells").attr("transform", function(d,i) {return "translate(0," + (i * (cellHeight + cellPadding)) + ")" });
            }
            else {
                legend.target.selectAll("g.legendCells").attr("transform", function(d,i) {return "translate(" + (i * cellWidth) + ",0)" });
                legend.target.selectAll("text.breakLabels").style("text-anchor", "middle").attr("x", 0).attr("y", -7).style("display", function(d,i) {return i == 0 ? "none" : "block"}).text(function(d) {return labelFormat(d.stop[0])});
            }
        }

        // init
        if (!legend.initDone) {
            var initObj = init();
            legend.target = initObj.target;
            legend.parentGroup = initObj.parentGroup;
            legend.parentGroup.call(drag);
            legend.initDone = true;
        }


        // remove previously painted rect and text
        legend.target.selectAll("g.legendCells").select("text.breakLabels").remove();
        legend.target.selectAll("g.legendCells").select("rect").remove();
        legend.target.selectAll(".legendTitle").remove();


        legend.target.selectAll("g.legendCells")
            .data(legendValues)
            .enter()
            .append("g")
            .attr("class", "legendCells")
            .attr("transform", function(d,i) {return "translate(" + (i * (cellWidth + cellPadding)) + ",0)" })

        legend.target.selectAll("g.legendCells")
            .append("rect")
            .attr("class", "breakRect")
            .attr("height", cellHeight)
            .attr("width", cellWidth)
            .style("fill", function(d) {return d.color})
            .style("stroke", function(d) {return d3.rgb(d.color).darker();});

        legend.target.selectAll("g.legendCells")
            .append("text")
            .attr("class", "breakLabels")
            .style("pointer-events", "none");

        legend.target.append("text")
            .text(labelUnits)
            .attr("y", -7)
            .attr("class", "legendTitle");

        redraw();
        updateBGSize(legend);
    }

    legend.initDone = false;
    legend.target;

    legend.inputScale = function(newScale) {
        if (!arguments.length) return scale;
        scale = newScale;
        legendValues = [];
        if (scale.invertExtent) {
            //Is a quantile scale
            scale.range().forEach(function(el) {
                var cellObject = {color: el, stop: scale.invertExtent(el)}
                legendValues.push(cellObject)
            })
        }
        else {
            scale.domain().forEach(function (el) {
                var cellObject = {color: scale(el), stop: [el,""]}
                legendValues.push(cellObject)
            })
        }
        return this;
    }

    legend.scale = function(testValue) {
        var foundColor = legendValues[legendValues.length - 1].color;
        for (el in legendValues) {
            if(testValue < legendValues[el].stop[1]) {
                foundColor = legendValues[el].color;
                break;
            }
        }
        return foundColor;
    }

    legend.cellWidth = function(newCellSize) {
        if (!arguments.length) return cellWidth;
        cellWidth = newCellSize;
        return this;
    }

    legend.cellHeight = function(newCellSize) {
        if (!arguments.length) return cellHeight;
        cellHeight = newCellSize;
        return this;
    }

    legend.cellPadding = function(newCellPadding) {
        if (!arguments.length) return cellPadding;
        cellPadding = newCellPadding;
        return this;
    }

    legend.cellExtent = function(incColor,newExtent) {
        var selectedStop = legendValues.filter(function(el) {return el.color == incColor})[0].stop;
        if (arguments.length == 1) return selectedStop;
        legendValues.filter(function(el) {return el.color == incColor})[0].stop = newExtent;
        return this;
    }

    legend.cellStepping = function(incStep) {
        if (!arguments.length) return changeValue;
        changeValue = incStep;
        return this;
    }

    legend.units = function(incUnits) {
        if (!arguments.length) return labelUnits;
        labelUnits = incUnits;
        return this;
    }

    legend.orientation = function(incOrient) {
        if (!arguments.length) return orientation;
        orientation = incOrient;
        return this;
    }

    legend.labelFormat = function(incFormat) {
        if (!arguments.length) return labelFormat;
        labelFormat = incFormat;
        if (incFormat == "none") {
            labelFormat = function(inc) {return inc};
        }
        return this;
    }

    legend.place = function(incCoordinates) {
        if (!arguments.length) return incCoordinates;
        coordinates = incCoordinates;
        return this;
    }

    return legend;

}