Skip to content

Instantly share code, notes, and snippets.

@philippeluickx

philippeluickx/.block

Last active May 4, 2018 15:17
Show Gist options
  • Save philippeluickx/47564fd4792e43ebd50ca21ae593821d to your computer and use it in GitHub Desktop.
Save philippeluickx/47564fd4792e43ebd50ca21ae593821d to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.setup-stop-left {
stop-color: #97019c; /* red */
}
.setup-stop-right {
stop-color: #e78484; /* pink */
}
.setup-filled {
fill: url(#setupMainGradient);
}
.tasks-stop-left {
stop-color: #3f51b5; /* Indigo */
}
.tasks-stop-right {
stop-color: #009688; /* Teal */
}
.tasks-filled {
fill: url(#tasksMainGradient);
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
// http://jsfiddle.net/cyril123/3Ly934g0/
// https://codepen.io/zakariachowdhury/pen/EZeGJy
// http://jsfiddle.net/Lxnymj28/1/
// https://stackoverflow.com/questions/29755338/is-there-any-way-to-create-rounded-corners-for-svg-arc
var svg = d3.select('#chart')
.append("svg:svg")
.attr('width', 300)
.attr('height', 300)
.append("g")
.attr("transform", "translate(" + 300 / 2 + "," + 300 / 2 + ")");
// Gradients
// http://bl.ocks.org/pnavarrc/20950640812489f13246
// Create the svg:defs element and the main gradient definition.
var svgDefs = svg.append('defs');
var setupMainGradient = svgDefs.append('linearGradient')
.attr('id', 'setupMainGradient');
var tasksMainGradient = svgDefs.append('linearGradient')
.attr('id', 'tasksMainGradient');
// Create the stops of the main gradient. Each stop will be assigned
// a class to style the stop using CSS.
setupMainGradient.append('stop')
.attr('class', 'setup-stop-left')
.attr('offset', '0');
setupMainGradient.append('stop')
.attr('class', 'setup-stop-right')
.attr('offset', '1');
tasksMainGradient.append('stop')
.attr('class', 'tasks-stop-left')
.attr('offset', '0');
tasksMainGradient.append('stop')
.attr('class', 'tasks-stop-right')
.attr('offset', '1');
var background_arc = d3.arc()
.cornerRadius(20)
.innerRadius(120)
.outerRadius(128)
.startAngle(0)
.endAngle(2 * (Math.PI))
var setup_arc = d3.arc()
.cornerRadius(20)
.innerRadius(116)
.outerRadius(132)
.startAngle(0)
.endAngle(2 * (50 / 100) * (Math.PI))
var tasks_arc = d3.arc()
.cornerRadius(20)
.innerRadius(115)
.outerRadius(133)
.startAngle(0)
.endAngle(2 * (20 / 100) * (Math.PI))
svg.append("path")
.attr('d', background_arc)
.attr('fill', '#e9e9e9')
svg.append("path")
.attr('d', setup_arc)
.classed('setup-filled', true)
//.attr('fill', '#4444ee')
svg.append("path")
.attr('d', tasks_arc)
.classed('tasks-filled', true)
//.attr('fill', '#ee4444')
svg.append("text")
.attr("text-anchor", "middle")
.attr('font-size', '5em')
.attr('y', 14)
.text('50%');
svg.append("text")
.attr("text-anchor", "middle")
.attr('fill', '#999999')
.attr('font-size', '2em')
.attr('y', 50)
.attr('letter-spacing', '50px')
.text('DONE');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment