Skip to content

Instantly share code, notes, and snippets.

@Lulkafe

Lulkafe/d3Star.js

Created April 30, 2016 15:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Lulkafe/77fbdf8bfdb443218121bcaf44609425 to your computer and use it in GitHub Desktop.
Save Lulkafe/77fbdf8bfdb443218121bcaf44609425 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Star
Raw
d3Star.js
function d3Star () {
var size = 20,
x = 0,
y = 0,
value = 1.0, //Range is 0.0 - 1.0
borderWidth = 3,
borderColor = "black",
starColor = "#FFB500",
backgroundColor = "white";
function star (selection) {
var line = d3.svg.line().x(function(d){ return d.x; }).y(function(d){ return d.y; })
.interpolate("linear-closed"),
rad = function (deg) { return deg * Math.PI/180;},
cos = function (deg) { return Math.cos(rad(deg)); },
sin = function (deg) { return Math.sin(rad(deg)); },
tan = function (deg) { return Math.tan(rad(deg));},
n = size,
m = n / 2,
h = m * tan(36),
k = h / sin(72),
//(x, y) points at the leftmost point of the star, not the center
coordinates = [
{x: x, y: y},
{x: x + k, y: y},
{x: x + m, y: y - h},
{x: x + n - k, y: y},
{x: x + n, y: y},
{x: x + n - k * cos(36), y: y + k * sin(36)},
{x: x + n * cos(36), y: y + n * sin(36)},
{x: x + m, y: y + h},
{x: x + n - n * cos(36),y: y + n * sin(36)},
{x: x + k * cos(36), y: y + k * sin(36)},
];
//inside star
selection.append("path").attr("d", line(coordinates)).style({ "stroke-width": 0, "fill": starColor});
//Rect for clipping
//In order to avoid potential ID duplicates for clipping, clip-path is not used here
selection.append("rect").attr("x", x + (size * value)).attr("y", y - h)
.attr("width", size - size * value).attr("height", size).style("fill", backgroundColor);
//border of the star
selection.append("path").attr("d", line(coordinates))
.style({ "stroke-width": borderWidth, "fill": "none", "stroke": borderColor});
}
star.x = function (val) {
x = val;
return star;
}
star.y = function (val) {
y = val;
return star;
}
star.size = function (val) {
size = val;
return star;
}
//Range is 0.0 - 1.0. 0.0 shows, for example, an empty star
star.value = function (val) {
value = val;
return star;
}
star.backgroundColor = function (val) {
backgroundColor = val;
return star;
}
star.borderWidth = function (val) {
borderWidth = val;
return star;
}
star.borderColor = function (val) {
borderColor = val;
return star;
}
star.starColor = function (val) {
starColor = val;
return star;
}
star.isBorderRounded = function (val) {
isBorderRounded = val;
return star;
}
return star;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="d3Star.js"></script>
<title>Title</title>
</head>
<body>
<div id="vis"></div>
<script>
var h = 300,
w = 800,
l = 50,
svg = d3.select("#vis").append("svg").attr("height", h).attr("width", w),
star1 = new d3Star(),
star2 = new d3Star(),
star3 = new d3Star();
star1.x(100).y(100).size(l).value(0.0).borderColor("#CAAA6F");
star2.x(170).y(100).size(l).value(0.4).borderColor("#CAAA6F").borderWidth(1);
star3.x(240).y(100).size(l).value(1.0).starColor("#67AED3").borderWidth(0);
svg.call(star1);
svg.call(star2);
svg.call(star3);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment