D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
ds
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <meta charset="utf-8"> <title>Data Science books</title> <style> body { font: 10px sans-serif; } .axis path,.axis line { fill: none; stroke: #ccc; } /* clip-path by https://bennettfeely.com/clippy/ */ image.out { -webkit-clip-path: circle(25% at 50% 50%); clip-path: circle(25% at 50% 50%); } image.over { -webkit-clip-path: circle(100% at 50% 50%); clip-path: circle(100% at 50% 50%); } </style> </head> <body> <script> var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 400 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; var x = d3.scale.linear().range([0, width]); var y = d3.scale.linear().range([height, 0]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("https://gist.githubusercontent.com/aaizemberg/b683ef1f1f153bc2b260/raw/03e98b8c8d718f5a5a4acef48964258f09a01f49/ds.tsv", function(error, data) { if (error) throw error; data.forEach(function(d) { d.x = +d.year; d.y = +d.pages; }); x.domain([2012.5,2015.5]); y.domain([0,500]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg.axis().ticks(3).scale(x).orient("bottom")); svg.append("g") .attr("class", "y axis") .call(d3.svg.axis() .ticks(5) .scale(y) .orient("left")); svg.selectAll(".point") .data(data) .enter() .append("image") .attr("class","out") .attr("x", function(d) { return x(d.x)-(75/2); }) .attr("width","75px") .attr("y", function(d) { return y(d.y)-(100/2); }) .attr("height","100px") .attr("xlink:href", function(d) { return d.img;} ) .on("mouseover", function() { d3.select(this).attr("class", "over"); }) .on("mouseout" , function() { d3.select(this).attr("class", "out"); }) .append("title") .html(function(d) {return d.title + "<br>" + d.subtitle;} ); }); svg.append("text") .attr("text-anchor", "middle") .attr("transform", "translate(-20,13)" ) .text("pages"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", "translate("+ (width-10) +","+(height+16)+")") .text("year"); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js