scatterimg

_.md

[ Launch: test ] 24effa73749d37af39d6 by jpmarindiaz
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"scatterimg","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")


var translateAxis = 40;
var padding = 35;

var cx = 100;
var radius = 30;

height = 400;

var d = [{
    id: "a",
    label: "Carlos",
    cy: 9,
    cx: cx,
    radius: radius,
    imageUrl: "http://www.randommonkey.io/img/monkey-face-purple.png"
}, {
    id: "b",
    label: "Juan",
    cy: 60,
    cx: cx,
    radius: radius,
    imageUrl: "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_spiderman.png"
}, {
    id: "c",
    label: "Yo",
    cy: 79,
    cx: cx,
    radius: radius,
    imageUrl: "http://www.randommonkey.io/img/monkey-face-purple.png"
}, {
    id: "d",
    label: "Todos",
    cy: 100,
    cx: cx,
    radius: radius,
    imageUrl: "http://www.randommonkey.io/img/monkey-face-purple.png"
}];




var min = d3.min(d, function(d) { return d.cy; });
var max = d3.max(d, function(d) { return d.cy; });

var yScale = d3.scale.linear().domain([min, max])
    .range([padding, height - padding]);




var circleGroup = svg.append("g");


circleGroup.selectAll("circle")
    .data(d)
    .enter()
    .append('defs')
    .append('pattern')
    .attr('id', function(d) {
        return (d.id);
    })
    .attr('width', 1)
    .attr('height', 1)
    .attr('patternContentUnits', 'objectBoundingBox')
    .append("svg:image")
    .attr("xlink:xlink:href", function(d) {
        return (d.imageUrl);
    })
    .attr("height", 1)
    .attr("width", 1)
    .attr("preserveAspectRatio", "slice")


var circles = circleGroup.selectAll("circle")
    .data(d)
    .enter()
    .append("circle");

var circleAttributes = circles
    .attr("cx", function(d) {
        return d.cx;
    })
    .attr("cy", function(d) {
        return yScale(d.cy);
    })
    .attr("r", function(d) {
        return d.radius;
    })
    .style("fill", function(d) {
        return "url(#" + d.id + ")"
    });


var labels = svg.selectAll("text")
    .data(d)
    .enter()
    .append("text")
    .text(function(d) {
        return d.label;
    })
    .attr("x", function(d) {
        return d.cx + d.radius + 10;
    })
    .attr("y", function(d) {
        return yScale(d.cy);
    })
    .attr("class", "labels");


var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + translateAxis + ",0)")





    .call(yAxis)

styles.css

.axis path,
.axis line {
    fill: none;
    stroke: #4bb1b9;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
    display: none;
}

.labels {
    font-family: sans-serif;
    font-size: 18px;
    fill: #225458;
}