Built with blockbuilder.org , adapted from this http://jsfiddle.net/yH75y/2/
Last active
November 11, 2015 02:52
-
-
Save jalapic/94eb4cb5afee0dfb6cbe to your computer and use it in GitHub Desktop.
circular heatmap
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
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="http://www.cc.puv.fi/~e1301183/circularHeatChart.js"></script> | |
| <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script> | |
| <style> | |
| /* SVG styling */ | |
| svg { | |
| width: 960px; | |
| height: 300px; | |
| } | |
| #energychart svg, #chart3 svg { | |
| height: 360px; | |
| } | |
| #chart4 svg { | |
| height: 500px; | |
| } | |
| path { | |
| stroke: #777; | |
| stroke-width: 0.1px; | |
| } | |
| .labels { | |
| fill: #aaa; | |
| font-weight: 200; | |
| letter-spacing: -1px; | |
| } | |
| .labels.segment { | |
| font-size: 10px; | |
| } | |
| #chart3 .labels { | |
| fill: #555; | |
| } | |
| /* Document styling */ | |
| body { | |
| width: 960px; | |
| margin: 0 auto; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 15px; | |
| line-height: 20px; | |
| } | |
| section { | |
| margin-bottom: 40px; | |
| } | |
| h1 { | |
| font-size: 40px; | |
| font-weight: 300; | |
| letter-spacing: -2px; | |
| margin: 1em 0 0.5em 0; | |
| } | |
| h2 { | |
| font-weight: 300; | |
| } | |
| a { | |
| color: #0088cc; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #005580; | |
| text-decoration: underline; | |
| } | |
| #info { | |
| height: 20px; | |
| } | |
| footer { | |
| margin: 50px 0 30px 0; | |
| } | |
| footer p { | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart4"></div> | |
| <div id="info"></div> | |
| <script> | |
| var chart = circularHeatChart() | |
| chart.innerRadius(40) | |
| .segmentHeight(19) | |
| .range(["purple", "cyan"]) | |
| data = []; for(var i=0; i<216; i++) { | |
| data[i] = {title: "Segment "+i, value: Math.round(Math.random()*100)}; } | |
| console.log(data); | |
| chart.accessor(function(d) {return d.value;}) .radialLabels(null) .segmentLabels(null) ; | |
| d3.select('#chart4') | |
| .selectAll('svg') | |
| .data([data]) | |
| .enter() | |
| .append('svg') | |
| .call(chart) | |
| .selectAll('path') | |
| ; | |
| d3.selectAll("#chart4 path").on('mouseover', function(d, i) { | |
| d3.select("#info").text(d.title + ' has value ' + d.value); | |
| //should find a way to connect this witht the highlight one | |
| d3.selectAll("#chart4 path") | |
| .style("stroke-width", 3) | |
| .style("stroke", function(e, j) { | |
| return (Math.floor(i / 24) == Math.floor(j / 24)) ? "white" : "none"; | |
| }); | |
| }); | |
| d3.selectAll("#chart4 svg").on('mouseout', function() { | |
| d3.select("#info").text(''); }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment