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/9046028 to your computer and use it in GitHub Desktop.
Save kunjara/9046028 to your computer and use it in GitHub Desktop.
Download ZIP
Nakshatras
Raw
README.md

A nakshatra is one of 27 (sometimes also 28) sectors along the ecliptic. This illustration shows nakshatras with their traditional names.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: Arial;
font-size: 13px;
}
label {
display: block;
}
#svgArea {}
#svgManager {
position: relative;
}
.svgTooltip {
position: absolute;
display: none;
pointer-events: none;
background: #fff;
padding: 3px;
text-align: left;
border: solid DarkKhaki 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
g#n28{
opacity: 0;
visibility: hidden;
}
.arc text {
cursor: default;
}
.arc text.rSign {
font-size: 18px;
}
.arc text.nSign {
font-size: 10px;
}
.arc path {
fill: LightYellow;
stroke: DarkKhaki;
}
.arc:hover path {
fill: LemonChiffon;
}
form.switchN {
left: 320px;
position: absolute;
top: -290px;
}
</style>
<body>
<div id="svgArea"></div>
<div id="svgManager">
<form class="switchN"></form>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var jsonN = 'nakshatra.json';
var josnR = 'rashi.json';
var width = 800,
height = 500,
radiusN = Math.min(width, height) / 2 - 20;
var arcN = d3.svg.arc()
.outerRadius(radiusN - 10)
.innerRadius(radiusN - 50);
var arcR = d3.svg.arc()
.outerRadius(radiusN - 52)
.innerRadius(radiusN - 110);
var pieR = d3.layout.pie()
.sort(null)
.value(function(d) { return 30; });
var svg = d3.select("#svgArea").append("svg")
.attr("width", width)
.attr("height", height)
var translate = "translate(" + width / 2 + "," + (height / 2 + 10) + ")";
var gN = svg.append("g")
.attr("id", "nakshatra")
.attr("transform", translate)
var gR = svg.append("g")
.attr("id", "rashi")
.attr("transform", translate)
var tooltip = d3.select("#svgArea").append("div")
.attr("class", "svgTooltip");
var label = d3.select("form.switchN")
.selectAll("label")
.data([27, 28])
.enter().append("label");
function clone(obj){
if(obj == null || typeof(obj) != 'object'){
return obj;
}
var temp = {};
for(var key in obj){
temp[key] = clone(obj[key]);
}
return temp;
}
d3.json(josnR, function(data) {
var arcRg = gR.selectAll(".arc")
.data(pieR(data))
.enter()
.append("g")
.attr("class", "arc")
// Rashi arc
arcRg.append("path")
.data(pieR(data))
.attr("d", arcR);
// Rashi sign
arcRg.append("text")
.data(pieR(data))
.attr("transform", function(d) {
return "translate(" + arcR.centroid(d) + ")";
})
.attr("class", "rSign")
.attr("dy", ".5em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.unicode;
})
})
d3.json(jsonN, function(data) {
var nTween = [21, 22, 28];
var n21Data27 = data[20],
n22Data27 = data[21],
n28Data27 = data[27],
n28Data28 = clone(data[27]);
//data.splice(27, 1);
n28Data27.startAngle = n28Data27.endAngle = n21Data27.endAngle;
var n21Data28 = clone(n21Data27);
n21Data28.endAngle = n28Data28.startAngle;
var n22Data28 = clone(n22Data27);
n22Data28.startAngle = n28Data28.endAngle;
var arcNg = gN.selectAll(".arc")
.data(data)
.enter()
.append("g")
.attr("class", "arc")
.attr("id", function(d) {
return "n" + d.num;
})
.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.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");
});
// Nakshatra arc
arcNg.append("path")
.data(data)
.attr("d", arcN);
// Nakshatra sign
arcNg.append("text")
.data(data)
.attr("transform", function(d) {
return "translate(" + arcN.centroid(d) + ")";
})
.attr("class", "nSign")
.attr("dy", ".5em")
.style("text-anchor", "middle")
.text(function(d) {
return d.num;
})
label.append("input")
.attr("type", "radio")
.attr("name", "switchN")
.attr("value", function(d) { return d; })
.on("change", change)
.filter(function(d, i) { return !i; })
.each(change)
.property("checked", true);
label.append("span")
.text(function(d) {
return d;
});
function change(amount){
var duration = 300;
nTween.forEach(function(d) {
var nData = eval("n"+d+"Data"+amount);
d3.select("#n"+d+" path")
.each(function(d) {
this.currentData = d
})
.datum(nData)
.transition()
.duration(duration)
.attrTween("d", tweenArc)
d3.select("#n"+d+" text")
.each(function(d) {
this.currentData = d
})
.datum(nData)
.transition()
.duration(duration)
.attrTween("transform", tweenCentroid)
})
if(amount == 27) {
opacity = 0, visibility = "hidden";
}else{
opacity = 1, visibility = "visible";
}
d3.select("#n28")
.style("visibility", visibility)
.transition()
.delay(duration)
.style("opacity", opacity)
}
function tweenArc(d) {
var i = d3.interpolate(this.currentData, d);
return function(t) {
return arcN(i(t));
};
}
function tweenCentroid(d) {
var i = d3.interpolate(arcN.centroid(this.currentData), arcN.centroid(d));
return function(t) {
return "translate(" + i(t) + ")";
};
}
});
</script>
Raw
nakshatra.json
[{"num":1,"name":"Ashwini","startAngle":0,"endAngle":0.23271056693258},{"num":2,"name":"Bharani","startAngle":0.23271056693258,"endAngle":0.46542113386515},{"num":3,"name":"Krittika","startAngle":0.46542113386515,"endAngle":0.69813170079773},{"num":4,"name":"Rohini","startAngle":0.69813170079773,"endAngle":0.93084226773031},{"num":5,"name":"Mrigashirsha","startAngle":0.93084226773031,"endAngle":1.1635528346629},{"num":6,"name":"Ardra","startAngle":1.1635528346629,"endAngle":1.3962634015955},{"num":7,"name":"Punarvasu","startAngle":1.3962634015955,"endAngle":1.628973968528},{"num":8,"name":"Pushya","startAngle":1.628973968528,"endAngle":1.8616845354606},{"num":9,"name":"Ashlesha","startAngle":1.8616845354606,"endAngle":2.0943951023932},{"num":10,"name":"Magha","startAngle":2.0943951023932,"endAngle":2.3271056693258},{"num":11,"name":"Poorva Phalguni","startAngle":2.3271056693258,"endAngle":2.5598162362583},{"num":12,"name":"Uttara Phalguni","startAngle":2.5598162362583,"endAngle":2.7925268031909},{"num":13,"name":"Hasta","startAngle":2.7925268031909,"endAngle":3.0252373701235},{"num":14,"name":"Chitra","startAngle":3.0252373701235,"endAngle":3.2579479370561},{"num":15,"name":"Swati","startAngle":3.2579479370561,"endAngle":3.4906585039887},{"num":16,"name":"Vishakha","startAngle":3.4906585039887,"endAngle":3.7233690709212},{"num":17,"name":"Anuradha","startAngle":3.7233690709212,"endAngle":3.9560796378538},{"num":18,"name":"Jyeshtha","startAngle":3.9560796378538,"endAngle":4.1887902047864},{"num":19,"name":"Moola","startAngle":4.1887902047864,"endAngle":4.421500771719},{"num":20,"name":"Purva Ashadha","startAngle":4.421500771719,"endAngle":4.6542113386515},{"num":21,"name":"Uttara Ashadha","startAngle":4.6542113386515,"endAngle":4.8869219055841},{"num":22,"name":"Shravana","startAngle":4.8869219055841,"endAngle":5.1196324725167},{"num":23,"name":"Dhanishta","startAngle":5.1196324725167,"endAngle":5.3523430394493},{"num":24,"name":"Shatabhisha","startAngle":5.3523430394493,"endAngle":5.5850536063819},{"num":25,"name":"Purva Bhadrapada","startAngle":5.5850536063819,"endAngle":5.8177641733144},{"num":26,"name":"Uttara Bhadrapada","startAngle":5.8177641733144,"endAngle":6.050474740247},{"num":27,"name":"Revati","startAngle":6.050474740247,"endAngle":6.2831853071796},{"num":28,"name":"Abhijit","startAngle":4.828744263851,"endAngle":4.9024359433796}]
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