How to draw a scatterplot with superimposed pics?

Question

I'm not a web programmer, but forced to deliver some kind of presentation. The task is as follows: I have a .csv with 2D points in each row, and these points have one-to-one mapping to some pictures by URL or integer index.

I need to draw a scatter plot these point in browser so that I plot associated pictures instead of plain points.

Very complex example is shown here just to get the idea of what I mean: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html

Again, all I want is to draw a scatterplot, in which there are rectangular pictures instead of plain points. Interactive zooming is preferred.

My candidates so far are D3 and Bokeh ( because I'm primarily Pythoniac man )

However, the better would be to take some existing solution as a template and then hack it to make suitable.

UPD: If it seems that I will hardly find something like that, it's okay to draw a plain points, but being able to hover over them with a mouse and displaying associated pictures for a point under mouse.

Again, thanks in advance!

Answer 1

I used D3 Here is an example of scatter chart with images: http://plnkr.co/edit/A60Pv8I7tqSVGKU64bgr?p=preview

src code:

// Code goes here
var h = 500;
var w = 750;
var padding = 50;
//set your images and data here
var monthlySales = [{
  'stock': 'GOOG',
  'count': 500,
  'img': "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTccGK4ZWQcI3WB--hytI1DFaeZ8ii-6euDWrm-baUtAxR7w9OrWg"
}, {
  'stock': 'MSFT',
  'count': 250,
  'img': "http://tr1.cbsistatic.com/fly/171-fly/bundles/techrepubliccore/images/icons/standard/icon-user-default.png"

}, {
  'stock': 'FB',
  'count': 50,
  'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"

}, {
  'stock': 'AAPL',
  'count': 100,
  'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"

}, {
  'stock': 'EBAY',
  'count': 5,
  'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"

}, {
  'stock': 'BABA',
  'count': 37,
  'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"
}];


var xScale = d3.scale.linear().domain([65, 450]).range([0, w]).nice();
var yScale = d3.scale.linear().domain([0, d3.max(monthlySales, function(d) {
  return d.count;
})]).range([h, 0 + padding]).nice();
var radiusScale = d3.scale.linear().domain([0, d3.max(monthlySales, function(d) {
  return d.count;
})]).range([10, 100]).nice();
var opacityScale = d3.scale.linear().domain([0, d3.max(monthlySales, function(d) {
  return d.count;
})]).range([1, 0.1]).nice();

function ordinalValue(item) {
  var strLen = item.length;
  var total = 0;
  for (var i = 0; i < strLen; i++) {
    total += item.charCodeAt(i);
  }
  console.log(total);
  return total;
}


var svg = d3.select('body').append('svg').attr({
  width: w,
  height: h,
  style: "outline: thin solid blue"
});

var dots = svg.selectAll('g')
  .data(monthlySales)
  .enter()
  .append("g");

  dots.append('circle')
  .attr({
    cx: function(d) {
      var ordValue = ordinalValue(d.stock);
      return xScale(ordValue);
    },
    cy: function(d) {
      return yScale(d.count);
    },
    r: function(d) {
      return radiusScale(d.count);
    },
    fill: function(d) {
      return '#' + Math.random().toString(16).substr(-6);
    }
  }).style({
    "fill-opacity": function(d) {
      return opacityScale(d.count);
    },
    "stroke": function(d) {
      return '#' + Math.random().toString(16).substr(-6);
    }
  });
//adding an image to the group
dots.append("svg:image")
    .attr("xlink:href",function(d) {return d.img})
    .attr("height", "20")
    .attr("width", "20")
    .attr({
    x: function(d) {
      var ordValue = ordinalValue(d.stock);
      return xScale(ordValue)-10;
    },
    y: function(d) {
      return yScale(d.count)-10;
    },
  });