Skip to content

Instantly share code, notes, and snippets.

@kunjara

kunjara/README.md

Last active August 29, 2015 13:56
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 kunjara/8818141 to your computer and use it in GitHub Desktop.
Save kunjara/8818141 to your computer and use it in GitHub Desktop.
Download ZIP
Zodiac
Raw
README.md

This illustration shows the sequence of the 12 equal segments of the Signs, with their Latin names.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: Arial;
font-size: 13px;
}
.svgTooltip {
position: absolute;
display: none;
pointer-events: none;
background: #fff;
padding: 3px;
text-align: left;
border: solid DarkKhaki 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.arc text {
cursor: default;
}
.arc .rashiSign {
font-size: 18px;
opacity: 0;
}
.arc path {
fill: LightYellow;
stroke: DarkKhaki;
}
.arc:hover path {
fill: LemonChiffon;
}
.info .rashiEnd {
opacity: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var rashiJson = 'rashi.json';
var width = 700,
height = 400,
radius = Math.min(width, height) / 2 - 20;
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return 30; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var tooltip = d3.select("body")
.append("div")
.attr("class", "svgTooltip");
d3.json(rashiJson, function(error, data) {
var gArc = svg.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
.on("mouseover", function(d) {
d3.select(this)
var t = tooltip.html("")
.style("display", "block")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
t.append("span")
.attr("class", "svgLabel")
.text(d.data.name);
})
.on("mouseout", function(d) {
tooltip
.style("display", "none");
})
.on("mousemove", function(d) {
tooltip
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
});
var gInfo = svg.selectAll(".info")
.data(pie(data))
.enter()
.append("g")
.attr("class", "info");
gArc.append("path")
.attr("d", arc)
.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie)
// Rashi sign
gArc.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("class", "rashiSign")
.attr("dy", ".5em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.unicode;
})
.transition()
.delay(2000)
.duration(1000)
.style("opacity", 1)
// Rashi end
gInfo.append("text")
.attr("transform", function(d) {
x = (radius + 5) * Math.sin(d.data.end * Math.PI / 180);
y = (radius + 5) * -Math.cos(d.data.end * Math.PI / 180);
return "translate(" + x + "," + y + ")";
})
.attr("class", "rashiEnd")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.end + "\u00B0";
})
.transition()
.delay(2500)
.duration(1000)
.style("opacity", 1)
function tweenPie(b) {
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t)); };
}
});
</script>
Raw
rashi.json
[{"name":"Aries","unicode":"\u2648","end":30},{"name":"Taurus","unicode":"\u2649","end":60},{"name":"Gemini","unicode":"\u264a","end":90},{"name":"Cancer","unicode":"\u264b","end":120},{"name":"Leo","unicode":"\u264c","end":150},{"name":"Virgo","unicode":"\u264d","end":180},{"name":"Libra","unicode":"\u264e","end":210},{"name":"Scorpio","unicode":"\u264f","end":240},{"name":"Sagittarius","unicode":"\u2650","end":270},{"name":"Capricorn","unicode":"\u2651","end":300},{"name":"Aquarius","unicode":"\u2652","end":330},{"name":"Pisces","unicode":"\u2653","end":360}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment