CodePen Embed - template

<button class ="instructions">
This sustainable development model 
<pre>
is based on these
<pre><strong>
10 social foundations:</strong>
<pre>
<pre>
<a href="https://en.wikipedia.org/wiki/Food_security" target="_blank">(i) Food and Security</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Health" target="_blank">(ii) Health and</a>
<a href="https://en.wikipedia.org/wiki/Education" target="_blank">Education</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Income" target="_blank">(iii) Income, Work</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Artificial_intelligence" target="_blank">and AI</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Peace" target="_blank">(iv) Peace & Justice</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Democracy" target="_blank">(v) Political Voice</a> 
<pre> 
<a href="https://en.wikipedia.org/wiki/Flow_network" target="_blank">and Networks</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Social_equity" target="_blank">(vi) Social and</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Gender_equality" target="_blank">Gender Equity</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Environmental_migrant" target="_blank">(vii) Climate Migration</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Capital_in_the_Twenty-First_Century" target="_blank">(viii) Capital in the 21st Centuary</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Energy_poverty" target="_blank">(ix) Energy Poverty</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Water_security" target="_blank">(x) Water Security</a> 
<pre><strong>
and 10 planetary boundaries: </strong>
<pre>
<a href="https://en.wikipedia.org/wiki/Climate_change" target="_blank">(i) Climate Change</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Ocean_acidification" target="_blank">(ii) Acidification</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Planetary_boundaries#Chemical_pollution" target="_blank">(iii) Chemical Pollution</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Fertilizer#Environmental_effects" target="_blank">(iv) Nitrogen & phosphorus loading</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Overdrafting" target="_blank">(v) Freshwater Withdrawals</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Land_use#Environment" target="_blank">(vi) Land Conversion</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Biodiversity_loss" target="_blank">(vii) Genetic Biodiversity Loss</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Biodiversity_loss" target="_blank">(viii) Biodiversity Loss by Distrubance</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Air_pollution" target="_blank">(ix) Air Pollution and </a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Ozone_depletion" target="_blank">Ozone Depletion</a> 
<pre>
<a href="https://en.wikipedia.org/wiki/Emerging_infectious_disease" target="_blank">(x) New Entities such as Emerging Infectious Diseases </a> 

<pre><strong>
Reference:</strong>
<a href="https://www.ecologyandsociety.org/vol14/iss2/art32/" target="_blank">
Planetary Boundaries: Exploring the Safe Operating Space for Humanity</a>
<pre>
</button>



<button class="SF" onclick="newSocialFoundation()">
<small>Generate a new set of:</small> 
<pre>
social foundations</button>
<button class ="PB" onclick="newPlanetaryBoundry()"> 
<small>Generate a new set of:</small> 
<pre>
planetry resources
<pre></button>

* {
    margin: 0;
    padding: 0;
}
body {
    background: black;
    text-align:center;
}
text {
    font: 12px sans-serif;
}
svg {
    width: 100vmin;
    height: 100vmin;
    display:inline-block;
}
path {
    stroke-width: 2px;
}

.instructions{
    position:fixed;
    top: 0;
    left: 0;
    background: black;
    border: 2px solid white;
    padding: 1em;
    color: white;
    margin: 0.24em;
    
}

.SF{
    position:fixed;
    top: 40vh;
    right: 0;
    background: black;
    border: 2px solid white;
    padding: 1em;
    color: white;
    margin: 0.24em;
    
}

.PB{
    position:fixed;
    bottom: 0;
    right: 0;
    background: black;
    border: 2px solid white;
    padding: 1em;
    color: white;
    margin: 0.24em;
    
}

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function newPlanetaryBoundry() {
    var now = Date.now();
    var last = now,
        delta;
    //d3.select('svg').remove();

    var dataset = [];
    var colors = ['#002b80', '#00ff00', '#0033cc', '#cc8800', '#ff00bf', '#3399ff', '#00ffff', '#009933', '#ff9900','#ff0000' ];
    var accent = '#DDDDDD';

    colors.forEach(function (v) {
        var data = {
            color: v,
            amount: 1 + ~~ (Math.random() * 20)
        }

        if (Math.random() > 0.5) {
            dataset.push(data);
        } else {
            dataset.unshift(data);
        }
    });

    var width = 500,
        height = 500,
        radius = Math.min(width, height) / 2;

    var holder = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
    	.attr('viewBox', '0 0 '+ width + ' ' + height)

    var svg = holder.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var pie = d3.layout.pie().value(function (d) {
        return d.amount;
    });

    var offset = 0;
    var time = new Date().getTime();

    /*  Drawing Function  */

    function draw() {
        now = Date.now();
        delta = now - last;
        last = now;

        svg.remove();
        svg = holder.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        offset += delta * 0.0002;
        pie.startAngle(offset).endAngle((Math.PI * 2) + offset)

        var piedata = pie(dataset)
        var arc = d3.svg.arc()
            .innerRadius(radius - 150)
            .outerRadius(radius - 100);

        var path = svg.selectAll("path")
            .data(piedata)
            .enter().append("path")
            .attr("fill", function (d, i) {
            return d.data.color;
        })
            .attr("d", arc);

svg.selectAll("text").data(piedata)
            .enter()
            .append("text")
            .attr("text-anchor", "middle")
            .attr("x", function (d) {
            var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
            d.cx = Math.cos(a) * (radius - 125);
            return d.x = Math.cos(a) * (radius - 50);
        })
            .attr("y", function (d) {
            var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
            d.cy = Math.sin(a) * (radius - 125);
            return d.y = Math.sin(a) * (radius - 30);
        })
            .text(function (d) {
            return 'pb-idx \=' + d.value;
        })
            .attr('fill', accent)
            .each(function (d) {
            var bbox = this.getBBox();
            d.sx = d.x - bbox.width / 2 - 2;
            d.ox = d.x + bbox.width / 2 + 2;
            d.sy = d.oy = d.y + 5;
        });

        svg.append("defs").append("marker")
            .attr("id", "circ")
            .attr("markerWidth", 5)
            .attr("markerHeight", 5)
            .attr("refX", 6)
            .attr("refY", 6)
            .append("circle")
            .attr('fill', 'rgba(255,255,255,0.5)')
            .attr("cx", 6)
            .attr("cy", 6)
            .attr("r", 6);

svg.selectAll("path.pointer").data(piedata).enter()
            .append("path")
            .style("fill", "none")
            .style("stroke", accent)
            .attr("marker-end", "url(#circ)")
            .attr("d", function (d) {

            if (d.cx > d.ox + ((d.ox - d.oy)/2)) {
                return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
            } else {
                return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
            }
        });
        requestAnimFrame(draw);
    }
    requestAnimFrame(draw);
}

newPlanetaryBoundry();

function newSocialFoundation() {
    var now = Date.now();
    var last = now,
        delta;
    //d3.select('svg').remove();

    var dataset = [];
    var colors = ['#002b80', '#00ff00', '#0033cc', '#cc8800', '#ff00bf', '#3399ff', '#00ffff', '#009933', '#ff9900','#ff0000'];
    var accent = '#DDDDDD';

    colors.forEach(function (v) {
        var data = {
            color: v,
            amount: 1 + ~~ (Math.random() * 20)
        }

        if (Math.random() > 0.5) {
            dataset.push(data);
        } else {
            dataset.unshift(data);
        }
    });

    var width = 500,
        height = 500,
        radius = Math.min(width, height) / 2;

    var holder = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
    	.attr('viewBox', '0 0 '+ width + ' ' + height)

    var svg = holder.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var pie = d3.layout.pie().value(function (d) {
        return d.amount;
    });

    var offset = 0;
    var time = new Date().getTime();

    /*  Drawing Function  */

    function draw() {
        now = Date.now();
        delta = now - last;
        last = now;

        svg.remove();
        svg = holder.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        offset += delta * 0.0002;
        pie.startAngle(offset).endAngle((Math.PI * 2) + offset)

        var piedata = pie(dataset)
        var arc = d3.svg.arc()
            .innerRadius(radius - 150)
            .outerRadius(radius - 1000);

        var path = svg.selectAll("path")
            .data(piedata)
            .enter().append("path")
            .attr("fill", function (d, i) {
            return d.data.color;
        })
            .attr("d", arc);

svg.selectAll("text").data(piedata)
            .enter()
            .append("text")
            .attr("text-anchor", "middle")
            .attr("x", function (d) {
            var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
            d.cx = Math.cos(a) * (radius - 125);
            return d.x = Math.cos(a) * (radius - 50);
        })
            .attr("y", function (d) {
            var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
            d.cy = Math.sin(a) * (radius - 125);
            return d.y = Math.sin(a) * (radius - 30);
        })
            .text(function (d) {
            return ' sf-idx \=' + d.value ;
        })
            .attr('fill', accent)
            .each(function (d) {
            var bbox = this.getBBox();
            d.sx = d.x - bbox.width / 2 - 2;
            d.ox = d.x + bbox.width / 2 + 2;
            d.sy = d.oy = d.y + 5;
        });

        svg.append("defs").append("marker")
            .attr("id", "circ")
            .attr("markerWidth", 12)
            .attr("markerHeight", 12)
            .attr("refX", 6)
            .attr("refY", 6)
            .append("circle")
            .attr('fill', 'rgba(255,255,255,0.5)')
            .attr("cx", 6)
            .attr("cy", 6)
            .attr("r", 6);

svg.selectAll("path.pointer").data(piedata).enter()
            .append("path")
            .style("fill", "none")
            .style("stroke", accent)
            .attr("marker-end", "url(#circ)")
            .attr("d", function (d) {

            if (d.cx > d.ox + ((d.ox - d.oy)/2)) {
                return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
            } else {
                return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
            }
        });
        requestAnimFrame(draw);
    }
    requestAnimFrame(draw);
}

newSocialFoundation();

This Pen is owned by LINDA ANGULO LOPEZ on CodePen.

See more by @lindangulopez on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js