Как нарисовать диаграмму рассеяния с наложенными фото?

Question

Я не программист, но вынужден предоставить какую-то презентацию. Задача следующая: у меня есть .csv с двумерными точками в каждой строке, и эти точки имеют взаимно однозначное отображение на некоторые изображения по URL-адресу или индексу integer.

Мне нужно нарисовать участок разброса по этим точкам в браузере, чтобы я построил связанные изображения вместо простых точек.

Очень сложный пример показан здесь как раз, чтобы получить представление о том, что я имею в виду: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html

Опять же, все, что я хочу сделать, в диаграмму рассеяния которой есть прямоугольные картинки вместо простых точек. Предпочтительным является интерактивное масштабирование.

Мои кандидаты до сих пор, D3 и боке (потому что я в первую очередь 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; 
    }, 
    });