ScatterPlot

_.md

[ Launch: ScatterPlot ] eb35ddc02d32b9633071 by DaveWelling
[ 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":0, "y":0, "bagName": "Bag A"},
    {"x":250, "y":125, "bagName": "Bag B"},
    {"x":500, "y": 250, "bagName": "Bag C"}
    ],
  "roomSize": {"height": 100, "width": 100},
  "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 maxSvgWidth = 250;
var maxSvgHeight = 500
var bagIconSize = 15;
var radiusOffset = bagIconSize /2;

var svg = d3.select("svg")
var coordinates = tributary.data.coordinates;
var roomSize = tributary.data.roomSize;
var imageSize = tributary.data.imageSize;


//console.log(coordinates); 
//svg.attr("width", roomSize.width);
//svg.attr("height", roomSize.height);

var xScale = d3.scale.linear().domain([0,roomSize.width]).range([0,imageSize.width]);
var yScale = d3.scale.linear().domain([0,roomSize.height]).range([0,imageSize.height]);
console.log("x: " + xScale(50) + ", y: " + yScale(100));  
            
svg.append('defs').
append("pattern")
.attr('id', 'background')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width',roomSize.width)
.attr('height', roomSize.height)
.append("image")
.attr("xlink:href", "http://acceptance.crewfacingluggage.rccl.com/img/default-image.png")
.attr('width', imageSize.width)
.attr('height',imageSize.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 (xScale(d.x) - radiusOffset);
})
.attr("y", function(d) {
      return (yScale(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);   
        });