Skip to content

Instantly share code, notes, and snippets.

@jpmarindiaz
Last active September 21, 2015 19:58
Show Gist options
  • Save jpmarindiaz/24effa73749d37af39d6 to your computer and use it in GitHub Desktop.
Save jpmarindiaz/24effa73749d37af39d6 to your computer and use it in GitHub Desktop.
scatterimg
{"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}
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)
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment