circular heatmap

Built with blockbuilder.org , adapted from this http://jsfiddle.net/yH75y/2/

<!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="https://www.cc.puv.fi/~e1301183/circularheatchart.js"></script>
		<script src="https://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>

Modified http://www.cc.puv.fi/~e1301183/circularHeatChart.js to a secure url

Modified http://yandex.st/highlightjs/7.3/highlight.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://www.cc.puv.fi/~e1301183/circularHeatChart.js

https://yandex.st/highlightjs/7.3/highlight.min.js