JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://www.cc.puv.fi/~e1301183/circularHeatChart.js"></script>
	<body>
			<div id="chart4"></div>
			<div id="info"></div>

		<script src="http://d3js.org/d3.v3.min.js"></script>
		<script src="circularHeatChart.js"></script>
		<script src="example.js"></script>
		<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

	</body>

CSS

/* 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;
}

JavaScript

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)}; }

    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')
    ;

    /*   //this should contain some of the information needed for the highlight...
    var paths = g.selectAll("path")
    .data(data) 
    .enter()
    .append("path") 
    .attr("d",d3.svg.arc()
    .innerRadius(ir)
    .outerRadius(or)
    .startAngle(sa)
    .endAngle(ea));
    */

    d3.selectAll("#chart4 path").on('mouseover', function() {
    var d = d3.select(this).data()[0];
    d3.select("#info").text(d.title + ' has value ' + d.value);
        //should find a way to connect this witht the highlight one
        
    });

    /*  //this function should make the highlight work, sadly I seem to be missing code
    d3.selectAll("#chart4 path").on('mouseover', function() {
    paths
    .filter(function (d) { return d.pathNumber === thisData.pathNumber; })
    .attr('fill', 'black'); });
    */

    d3.selectAll("#chart4 svg").on('mouseout', function() {
    d3.select("#info").text(''); });