Last active
October 7, 2018 02:05
-
-
Save fayimora/310f029c585d6ddf50a493962b58eedc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Define the size of the canvas above so we can re-use it later to generate co-ordinates | |
| var width = 1000; | |
| var height = 1000; | |
| // create our canvas | |
| var canvas = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Helper function to help generate coords. | |
| // It generates random x,y coords used to draw circles | |
| function generateCoords() { | |
| var x = Math.floor(Math.random() * width) + 1; | |
| var y = Math.floor(Math.random() * height) + 1; | |
| return [x, y]; | |
| } | |
| d3.json("likes_on_external_sites.json", function(data) { | |
| // Some specs for the circles | |
| var elem = canvas | |
| .selectAll("g title") | |
| .data(data.other_likes.splice(0, 30)); // use the first 30 datapoints | |
| // Create a container for each circle | |
| var container = elem.enter() | |
| .append("g") | |
| .attr("transform", function(d) { | |
| return "translate(" + generateCoords()[0] + "," + generateCoords()[1] + ")"; | |
| }) | |
| // Create and add a circle | |
| var circle = container.append("circle") | |
| .attr("r", function(d){ return 50 }) // specify the radius of the circle | |
| .attr("stroke", "black") | |
| .attr("fill", "steelblue") | |
| container.append("text") | |
| .attr("dx", function(d) { return -30 }) | |
| .text(function(d) { return d.title.split(" ").slice(-1)[0] }) // use the last part of the text | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment