Skip to content

Instantly share code, notes, and snippets.

@fayimora

fayimora/arda-d3.js

Last active October 7, 2018 02:05
Show Gist options
  • Save fayimora/310f029c585d6ddf50a493962b58eedc to your computer and use it in GitHub Desktop.
Save fayimora/310f029c585d6ddf50a493962b58eedc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fayimora revised this gist Oct 7, 2018. 1 changed file with 9 additions and 17 deletions.
    26 changes: 9 additions & 17 deletions arda-d3.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    // 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)
    @@ -15,26 +15,18 @@
    return [x, y];
    }

    d3.json("likes_on_external_sites.json", function(data) {
    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
    .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] + ")";
    })
    .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
    });
    var cir
  2. fayimora created this gist Oct 7, 2018.
    40 changes: 40 additions & 0 deletions arda-d3.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    // 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
    });