Sokrates86/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }

body {
    background-color: #1B1F2A;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.widget {
    margin: 0 auto;
    width:350px;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;

}

.header{
    background-color: #29384D;
    height:40px;
    color:#929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
}

.chart-container{
    padding:25px;
}

.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
}
  </style>
</head>

<body>

  <div class="widget">
    <div class="header">Progress Status</div>
    <div id="chart" class="chart-container">

    </div>
</div>
  <script>
var createGradient=function(svg,id,color1,color2){

	var defs = svg.append("svg:defs");

	var red_gradient = defs.append("svg:linearGradient")
        .attr("id", id)
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "50%")
        .attr("y2", "100%")
        .attr("spreadMethod", "pad");

	red_gradient.append("svg:stop")
        .attr("offset", "50%")
        .attr("stop-color", color1)
        .attr("stop-opacity", 1);

	red_gradient.append("svg:stop")
        .attr("offset", "100%")
        .attr("stop-color", color2)
        .attr("stop-opacity", 1);
};

var percent = 65;

var ratio=percent/100;

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

var w=300,h=300;

var outerRadius=(w/2)-10;
var innerRadius=110;

var color = ['#f2503f','#ea0859','#404F70'];

var svg=d3.select("#chart")
    .append("svg")
    .attr({
        width:w,
        height:h,
        class:'shadow'
    }).append('g')
    .attr({
        transform:'translate('+w/2+','+h/2+')'
    });

createGradient(svg,'gradient',color[0],color[1]);

var arc=d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(0)
    .endAngle(2*Math.PI);

var arcLine=d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(0);


var pathBackground=svg.append('path')

    .attr({
        d:arc
    })
    .style({
        fill:color[2]
    });


var pathChart=svg.append('path')
    .datum({endAngle:0})
    .attr({
        d:arcLine
    })
    .style({
        fill:'url(#gradient)'
    });

var middleCount=svg.append('text')
    .text(function(d){
        return d;
    })

    .attr({
        class:'middleText',
        'text-anchor':'middle',
        dy:30,
        dx:-15
    })
    .style({
        fill:color[1],
        'font-size':'90px'

    });
svg.append('text')
    .text('%')
    .attr({
        class:'percent',
        'text-anchor':'middle',
        dx:50,
        dy:-5

    })
    .style({
        fill:color[1],
        'font-size':'40px'

    });


var arcTween=function(transition, newAngle) {
    transition.attrTween("d", function (d) {
        var interpolate = d3.interpolate(d.endAngle, newAngle);
        var interpolateCount = d3.interpolate(0, percent);
        return function (t) {
            d.endAngle = interpolate(t);
            middleCount.text(Math.floor(interpolateCount(t)));
            return arcLine(d);
        };
    });
};


var animate=function(){
    pathChart.transition()
            .duration(750)
            .ease('cubic')
            .call(arcTween,((2*Math.PI))*ratio);


};


setTimeout(animate,0);
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }

	body {
	background-color: #1B1F2A;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	height: 100%;
	}

	.widget {
	margin: 0 auto;
	width:350px;
	margin-top:50px;
	background-color: #222D3A;
	border-radius: 5px;
	box-shadow: 0px 0px 1px 0px #06060d;

	}

	.header{
	background-color: #29384D;
	height:40px;
	color:#929DAF;
	text-align: center;
	line-height: 40px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	font-weight: 400;
	font-size: 1.5em;
	text-shadow: 1px 1px #06060d;
	}

	.chart-container{
	padding:25px;
	}

	.shadow {
	-webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
	filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
	}
	</style>
	</head>

	<body>

	<div class="widget">
	<div class="header">Progress Status</div>
	<div id="chart" class="chart-container">

	</div>
	</div>
	<script>
	var createGradient=function(svg,id,color1,color2){

	var defs = svg.append("svg:defs");

	var red_gradient = defs.append("svg:linearGradient")
	.attr("id", id)
	.attr("x1", "0%")
	.attr("y1", "0%")
	.attr("x2", "50%")
	.attr("y2", "100%")
	.attr("spreadMethod", "pad");

	red_gradient.append("svg:stop")
	.attr("offset", "50%")
	.attr("stop-color", color1)
	.attr("stop-opacity", 1);

	red_gradient.append("svg:stop")
	.attr("offset", "100%")
	.attr("stop-color", color2)
	.attr("stop-opacity", 1);
	};

	var percent = 65;

	var ratio=percent/100;

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

	var w=300,h=300;

	var outerRadius=(w/2)-10;
	var innerRadius=110;

	var color = ['#f2503f','#ea0859','#404F70'];

	var svg=d3.select("#chart")
	.append("svg")
	.attr({
	width:w,
	height:h,
	class:'shadow'
	}).append('g')
	.attr({
	transform:'translate('+w/2+','+h/2+')'
	});

	createGradient(svg,'gradient',color[0],color[1]);

	var arc=d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius)
	.startAngle(0)
	.endAngle(2*Math.PI);

	var arcLine=d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius)
	.startAngle(0);


	var pathBackground=svg.append('path')

	.attr({
	d:arc
	})
	.style({
	fill:color[2]
	});


	var pathChart=svg.append('path')
	.datum({endAngle:0})
	.attr({
	d:arcLine
	})
	.style({
	fill:'url(#gradient)'
	});

	var middleCount=svg.append('text')
	.text(function(d){
	return d;
	})

	.attr({
	class:'middleText',
	'text-anchor':'middle',
	dy:30,
	dx:-15
	})
	.style({
	fill:color[1],
	'font-size':'90px'

	});
	svg.append('text')
	.text('%')
	.attr({
	class:'percent',
	'text-anchor':'middle',
	dx:50,
	dy:-5

	})
	.style({
	fill:color[1],
	'font-size':'40px'

	});


	var arcTween=function(transition, newAngle) {
	transition.attrTween("d", function (d) {
	var interpolate = d3.interpolate(d.endAngle, newAngle);
	var interpolateCount = d3.interpolate(0, percent);
	return function (t) {
	d.endAngle = interpolate(t);
	middleCount.text(Math.floor(interpolateCount(t)));
	return arcLine(d);
	};
	});
	};


	var animate=function(){
	pathChart.transition()
	.duration(750)
	.ease('cubic')
	.call(arcTween,((2Math.PI))ratio);


	};


	setTimeout(animate,0);
	</script>
	</body>