ScatterPlot

_.md

[ Launch: ScatterPlot ] fa2ff9b360b66301fd92 by DaveWelling

config.json

{"description":"ScatterPlot","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"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},"inlet.css":{"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/0jRtOqO.png"}

data.json

{
  "coordinates": [
    {"x":50, "y":50, "bagName": "Bag A"},
    {"x":50, "y":300, "bagName": "Bag B"},
    {"x":10, "y": 20, "bagName": "Bag C"}
    ],
  "viewSize": {"height": 500, "width": 500},
  "imageSize" : {"height": 500, "width": 500}
}

inlet.css

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 18px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

inlet.js

var svg = d3.select("svg")
var coordinates = tributary.data.coordinates;
var viewSize = tributary.data.viewSize;
var imageSize = tributary.data.imageSize;
//console.log(coordinates); 
var bagIconSize = 15;
var radiusOffset = bagIconSize /2;
svg.attr("width", viewSize.width);
svg.attr("height", viewSize.height);

svg.append('defs').
append("pattern")
.attr('id', 'background')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width',imageSize.width)
.attr('height', imageSize.height)
.append("image")
.attr("xlink:href", "http://acceptance.crewfacingluggage.rccl.com/img/default-image.png")
.attr('width', viewSize.width)
.attr('height',viewSize.height);

svg.append('defs').
append("pattern")
.attr('id', 'bagOnMap')
.attr('width',bagIconSize)
.attr('height', bagIconSize)
.append("image")
.attr("xlink:href", "http://acceptance.crewfacingluggage.rccl.com/img/bag-on-map.png")
.attr('width', bagIconSize)
.attr('height',bagIconSize);

svg.append("rect")
.attr("fill", "url(#background)") 
.attr("width", imageSize.width)
.attr("height", imageSize.height)

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

svg.selectAll("g")
.data(coordinates)
.enter()
.append("g")
.append("rect")
.attr("x", function(d) {
      return (d.x - radiusOffset);
})
.attr("y", function(d) {
      return (d.y - radiusOffset);
})
.attr("height", bagIconSize)
.attr("width", bagIconSize)
.attr("fill", "url(#bagOnMap)").on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", 0.9);      
            div .html(d.bagName)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });