python - 如何绘制带有叠加图片的散点图？

Question

我不是网络程序员，但被迫进行某种演示。任务如下:我有一个 .csv，每一行都有 2D 点，这些点通过 URL 或整数索引与一些图片一对一映射。

我需要在浏览器中绘制这些点的散点图，以便绘制相关图片而不是普通点。

这里显示了一个非常复杂的示例，只是为了让您明白我的意思: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html

同样，我只想画一个散点图，其中有矩形图片而不是普通点。首选交互式缩放。

到目前为止，我的候选人是 D3 和 Bokeh(因为我主要是 Pythoniac 人)

但是，更好的办法是将一些现有的解决方案作为模板，然后对其进行修改以使其适用。

UPD:如果我似乎很难找到类似的东西，可以绘制一个普通的点，但是能够用鼠标悬停在它们上面并显示鼠标下的点的相关图片。

再次感谢您!

Answer 1

我用的是D3这是带有图像的散点图示例: http://plnkr.co/edit/A60Pv8I7tqSVGKU64bgr?p=preview

源代码:

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