A nakshatra is one of 27 (sometimes also 28) sectors along the ecliptic. This illustration shows nakshatras with their traditional names.
Last active
August 29, 2015 13:56
-
-
Save kunjara/9046028 to your computer and use it in GitHub Desktop.
Nakshatras
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{"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}] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{"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