-
-
Save cspanring/3491969 to your computer and use it in GitHub Desktop.
t4ma
This file contains hidden or 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
| {"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":677,"height":447,"hide":false},"endpoint":"tributary"} |
This file contains hidden or 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
| // From http://mkweb.bcgsc.ca/circos/guide/tables/ | |
| var chord = d3.layout.chord() | |
| .padding(.05) | |
| .sortSubgroups(d3.descending) | |
| .matrix([ | |
| [0,0,0,40,0], | |
| [0,0,30,30,0], | |
| [0,30,0,0,0], | |
| [40,30,0,0,0], | |
| [0,0,0,0,0] | |
| ]); | |
| var width = 600, | |
| height = 600, | |
| innerRadius = Math.min(width, height) * .41, | |
| outerRadius = innerRadius * 1.1; | |
| var fill = d3.scale.ordinal() | |
| .domain(d3.range(4)) | |
| .range(["#0D2157", "#0868C2", "#8FB8EC", "#BEBDBD"]); | |
| var svg = d3.select("svg") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| svg.append("g") | |
| .selectAll("path") | |
| .data(chord.groups) | |
| .enter().append("path") | |
| .style("fill", function(d) { return fill(d.index); }) | |
| .style("stroke", "#000") | |
| .style("stroke-width", .5) | |
| .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)) | |
| .on("mouseover", fade(.1)) | |
| .on("mouseout", fade(1)) | |
| .append("title") | |
| .text("my label"); | |
| var ticks = svg.append("g") | |
| .selectAll("g") | |
| .data(chord.groups) | |
| .enter().append("g") | |
| .selectAll("g") | |
| .data(groupTicks) | |
| .enter().append("g") | |
| .attr("transform", function(d) { | |
| return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" | |
| + "translate(" + outerRadius + ",0)"; | |
| }); | |
| ticks.append("line") | |
| .attr("x1", 1) | |
| .attr("y1", 0) | |
| .attr("x2", 5) | |
| .attr("y2", 0) | |
| .style("stroke", "#000000"); | |
| ticks.append("text") | |
| .attr("x", 8) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", function(d) { | |
| return d.angle > Math.PI ? "end" : null; | |
| }) | |
| .attr("transform", function(d) { | |
| return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; | |
| }) | |
| .text(function(d) { return d.label; }); | |
| svg.append("g") | |
| .attr("class", "chord") | |
| .selectAll("path") | |
| .data(chord.chords) | |
| .enter().append("path") | |
| .style("fill", function(d) { return fill(d.source.index); }) | |
| .style("stroke", "#000000") | |
| .style("stroke-width", .5) | |
| .attr("d", d3.svg.chord().radius(innerRadius)) | |
| .style("opacity", 1) | |
| .append("svg:title") | |
| .text("my label"); | |
| /** Returns an array of tick angles and labels, given a group. */ | |
| function groupTicks(d) { | |
| var k = (d.endAngle - d.startAngle) / d.value; | |
| return d3.range(0, d.value, 10).map(function(v, i) { | |
| return { | |
| angle: v * k + d.startAngle, | |
| label: i % 5 ? null : v / 10 | |
| }; | |
| }); | |
| } | |
| /** Returns an event handler for fading a given chord group. */ | |
| function fade(opacity) { | |
| return function(g, i) { | |
| svg.selectAll("g.chord path") | |
| .filter(function(d) { | |
| return d.source.index != i && d.target.index != i; | |
| }) | |
| .transition() | |
| .style("opacity", opacity); | |
| }; | |
| } |
This file contains hidden or 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
| <svg class="tributary_svg" width="1375" height="900"><svg width="600" height="600"><g transform="translate(300,300)"><g><path style="fill: #0d2157; stroke: #000000; stroke-width: 0.5px; " d="M1.6568923967216762e-14,-270.59999999999997A270.59999999999997,270.59999999999997 0 0,1 252.85500738867614,-96.37792920826068L229.86818853516013,-87.61629928023699A245.99999999999997,245.99999999999997 0 0,0 1.5062658152015237e-14,-245.99999999999997Z"><title>my label</title></path><path style="fill: #0868c2; stroke: #000000; stroke-width: 0.5px; " d="M257.35589330946857,-83.61999867786069A270.59999999999997,270.59999999999997 0 0,1 20.275978788004018,269.8392941811633L18.432707989094563,245.30844925560302A245.99999999999997,245.99999999999997 0 0,0 233.95990300860777,-76.01818061623699Z"><title>my label</title></path><path style="fill: #8fb8ec; stroke: #000000; stroke-width: 0.5px; " d="M6.764295334521149,270.5154419042051A270.59999999999997,270.59999999999997 0 0,1 -208.5581123314505,172.41773047091777L-189.59828393768228,156.74339133719798A245.99999999999997,245.99999999999997 0 0,0 6.149359395019226,245.92312900382282Z"><title>my label</title></path><path style="fill: #bebdbd; stroke: #000000; stroke-width: 0.5px; " d="M-216.914763934991,161.77869200555156A270.59999999999997,270.59999999999997 0 0,1 -27.01492254463165,-269.24812712423375L-24.559020495119682,-244.7710246583943A245.99999999999997,245.99999999999997 0 0,0 -197.1952399409009,147.07153818686507Z"><title>my label</title></path><path style="fill: #0d2157; stroke: #000000; stroke-width: 0.5px; " d="M-13.524363204645557,-270.26182046287784A270.59999999999997,270.59999999999997 0 0,1 -13.524363204645557,-270.26182046287784L-12.29487564058687,-245.6925640571617A245.99999999999997,245.99999999999997 0 0,0 -12.29487564058687,-245.6925640571617Z"><title>my label</title></path></g><g><g><g transform="rotate(-90)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em">0</text></g><g transform="rotate(-72.71619724391353)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(-55.43239448782706)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(-38.14859173174059)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(-20.864788975654122)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g></g><g><g transform="rotate(-17.999999999999986)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em">0</text></g><g transform="rotate(-0.7161972439135127)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(16.56760551217296)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(33.85140826825943)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(51.13521102434589)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em"></text></g><g transform="rotate(68.41901378043235)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em">5</text></g></g><g><g transform="rotate(88.56760551217295)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em">0</text></g><g transform="rotate(105.85140826825943)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g><g transform="rotate(123.13521102434592)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g></g><g><g transform="rotate(143.2838027560865)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)">0</text></g><g transform="rotate(160.56760551217292)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g><g transform="rotate(177.85140826825943)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g><g transform="rotate(195.1352110243459)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g><g transform="rotate(212.41901378043235)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g><g transform="rotate(229.7028165365188)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)">5</text></g><g transform="rotate(246.98661929260527)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g><g transform="rotate(264.2704220486918)translate(270.59999999999997,0)"><line x1="1" y1="0" x2="5" y2="0" style="stroke: #000000; "></line><text x="8" dy=".35em" text-anchor="end" transform="rotate(180)translate(-16)"></text></g></g><g></g></g><g class="chord"><path style="fill: #0d2157; stroke: #000000; stroke-width: 0.5px; opacity: 1; " d="M1.5062658152015237e-14,-245.99999999999997A245.99999999999997,245.99999999999997 0 0,1 229.86818853516013,-87.61629928023699Q 0,0 -197.1952399409009,147.07153818686507A245.99999999999997,245.99999999999997 0 0,1 -207.66091555851395,-131.88231173815439Q 0,0 1.5062658152015237e-14,-245.99999999999997Z"><title>my label</title></path><path style="fill: #0868c2; stroke: #000000; stroke-width: 0.5px; opacity: 1; " d="M233.95990300860777,-76.01818061623699A245.99999999999997,245.99999999999997 0 0,1 204.29931054156296,137.0320827844414Q 0,0 6.149359395019226,245.92312900382282A245.99999999999997,245.99999999999997 0 0,1 -189.59828393768228,156.74339133719798Q 0,0 233.95990300860777,-76.01818061623699Z"><title>my label</title></path><path style="fill: #0868c2; stroke: #000000; stroke-width: 0.5px; opacity: 1; " d="M204.29931054156296,137.0320827844414A245.99999999999997,245.99999999999997 0 0,1 18.432707989094563,245.30844925560302Q 0,0 -207.66091555851395,-131.88231173815439A245.99999999999997,245.99999999999997 0 0,1 -24.559020495119682,-244.7710246583943Q 0,0 204.29931054156296,137.0320827844414Z"><title>my label</title></path></g></g></svg></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment