jalapic/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!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>
	<!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>