VeryMade with D3

by bejnar

CSS

body{
    padding:30px;
}

JavaScript

// Utility functions

function randomInt(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Initial values

var colors = ['yellow', 'orange', '#E8453D',  'cyan', 'lightgray', 'darkblue', '#04389C', '#4EE83D', 'yellow'];

function randomGoodColors() {
   return colors[Math.floor(Math.random() * colors.length)];
}


// Initialize

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 500);

var lineTopL = svg.append("svg:line")
    .attr("x1", 150)
    .attr("y1", 150)
    .attr("x2", 150)
    .attr("y2", 150)
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-linecap", "round");

lineTopL.style("stroke-width", 24);

var lineTopR = svg.append("svg:line")
    .attr("x1", 150)
    .attr("y1", 150)
    .attr("x2", 150)
    .attr("y2", 150)
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-linecap", "round");

lineTopR.style("stroke-width", 24);

var lineCrossFirst = svg.append("svg:line")
    .attr("x1", 130)
    .attr("y1", 130)
    .attr("x2", 130)
    .attr("y2", 130)
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-linecap", "round");

lineCrossFirst.style("stroke-width", 24);

var lineCrossSecond = svg.append("svg:line")
    .attr("x1", 180)
    .attr("y1", 180)
    .attr("x2", 180)
    .attr("y2", 180)
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-linecap", "round");

lineCrossSecond.style("stroke-width", 24);

var lineBottom = svg.append("svg:line")
    .attr("x1", 150)
    .attr("y1", 150)
    .attr("x2", 150)
    .attr("y2", 150)
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-linecap", "round");

lineBottom.style("stroke-width", 24);

var lineLeftFirst = svg.append("svg:line")
    .attr("x1", 150)
    .attr("y1", 150)
    .attr("x2", 150)
    .attr("y2", 150)
   ...