0

I want to create a d3 heat wheel. The code is on the below link http://prcweb.co.uk/lab/circularheat/. I am having a dashboard(banana) where the user is prompt to select a chart and add it. Simply what I want is to add the below HTML code inside a javascript file. (This below code is inside the html file(div id="main") but I want it inside the javascript file)

var energy_data = [];
var base_ts = 1283731200000;
var week = 0;
var totals = {days:[], week:0};
var display_mode = 0, display_modes = [{label: 'units', prefix: ''}, {label: '', prefix: '£'}, {label: 'kgs CO2', prefix: ''}];
var week_data;
var unit_cost = 0.137 /* http://www.confusedaboutenergy.co.uk/index.php/domestic-fuels/fuel-prices */, unit_co2 = 0.450 /* from realtimecarbon.org */;

week_data = energy_data.slice(week*7*24,(week+1)*7*24);
totals = calculate_totals(week_data);

var g = d3.select("svg").append("g").attr("id", "chart");

initial_rad = 80;
rad_offset = 25;
ir = function(d, i) {return initial_rad+Math.floor(i/24)*rad_offset;}
or = function(d, i) {return initial_rad+rad_offset+Math.floor(i/24)*rad_offset;}
sa = function(d, i) {return (i*2*Math.PI)/24;}
ea = function(d, i) {return ((i+1)*2*Math.PI)/24;}

//Draw the chart
var color = d3.scale.linear().domain([0.04, 1]).range(["white", "red"]);
d3.select('#chart').selectAll('path').data(week_data)
	.enter().append('svg:path')
	.attr('d', d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
	.attr('transform', 'translate(300, 300)')
  	.attr('fill', color)
	.attr("stroke", "gray")
	.attr("stroke-width", "0.3px")
	.on('mouseover', render_hour_info)
	.on('mouseout', reset_hour_info);

//Labels
var day_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
var label_rad = 90;
for(var i=0; i<7; i++) {
	label = day_labels[i];
	label_angle = 4.73;
	d3.select("svg").append("def")
	  .append("path")
	  .attr("id", "day_path"+i)
	  .attr("d", "M300 300 m"+label_rad*Math.cos(label_angle)+" "+label_rad*Math.sin(label_angle)+" A"+label_rad+" "+label_rad+" 90 0 1 "+(300+label_rad)+" 300");
	d3.select("svg").append("text")
	  .attr("class", "day label")
	  .append("textPath")
	  .attr("xlink:href", "#day_path"+i)
	  .text(label);
	label_rad += rad_offset;
}

label_rad = 260;
d3.select("svg").append("def")
	.append("path")
	.attr("id", "time_path")
	.attr("d", "M300 "+(300-label_rad)+" a"+label_rad+" "+label_rad+" 0 1 1 -1 0");
for(var i=0; i<24; i++) {
	label_angle = (i-6)*(2*Math.PI/24);
	large_arc = i<6 || i> 18? 0 : 1;
	d3.select("svg").append("text")
		.attr("class", "time label")
		.append("textPath")
		.attr("xlink:href", "#time_path")
		.attr("startOffset", i*100/24+"%")
		.text(convert_to_ampm(i));
}

reset_hour_info();

//Define events
d3.selectAll("#status").on('click', function() {
	display_mode = (display_mode+1)%3;
	reset_hour_info();
});

d3.select('#upweek').on('click', function() {
	if(week>=25) return;
	week++;
	week_data = energy_data.slice(week*7*24,(week+1)*7*24);
	d3.select('#chart').selectAll('path').data(week_data).attr('fill', color);
	totals = calculate_totals(week_data);
	reset_hour_info();
})

d3.select('#downweek').on('click', function() {
	if(week<=0) return;
	week--;
	week_data = energy_data.slice(week*7*24,(week+1)*7*24);
	d3.select('#chart').selectAll('path').data(week_data).attr('fill', color);
	totals = calculate_totals(week_data);
	reset_hour_info();
})



function render_hour_info(d, i) {
	var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
	var day = Math.floor(i/24); //day index
	var h = i%24; //hour index
	var kwh = new Number(d);
	var day_kwh = new Number(totals.days[day]);
	var dm = display_modes[display_mode];

	//Update times
	d3.select('#status g.first text.time').text(days[day]);
	d3.select('#status g.second text.time').text(convert_to_ampm(h)+' - '+convert_to_ampm(parseInt(h)+1));
	d3.select('#status g.third text.time').text('Projection');

	//Update value
	switch(display_mode) {
	  case 0:
	    d3.select('#status g.first text.value').text(dm.prefix+day_kwh.toFixed(1));
	    d3.select('#status g.second text.value').text(dm.prefix+kwh.toFixed(1));
	    d3.select('#status g.third text.value').text(dm.prefix+(day_kwh*365).toFixed(0));
	    break;
	  case 1:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_cost*day_kwh).toFixed(2));
	    d3.select('#status g.second text.value').text(dm.prefix+(unit_cost*kwh).toFixed(2));
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_cost*day_kwh*365).toFixed(0));
	    break;
	  case 2:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_co2*day_kwh).toFixed(1));
	    d3.select('#status g.second text.value').text(dm.prefix+(unit_co2*kwh).toFixed(1));
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_co2*day_kwh*365).toFixed(0));
	    break;
	}

	//Update units
	d3.select('#status g.first text.units').text(dm.label);
	d3.select('#status g.second text.units').text(dm.label);
	d3.select('#status g.third text.units').text(dm.label+'/yr');
  }

function reset_hour_info() {
	var dm = display_modes[display_mode];
	week_kwh = new Number(totals.week);

	d3.select('#status g.first text.time').text(ts_to_datestring(base_ts, 7*week) + ' - ' + ts_to_datestring(base_ts, 7*week+6));
	d3.select('#status g.second text.time').text('');
	d3.select('#status g.third text.time').text('Projection');

	switch(display_mode) {
	  case 0:
	    d3.select('#status g.first text.value').text(dm.prefix+week_kwh.toFixed(1));
	    d3.select('#status g.second text.value').text('');
	    d3.select('#status g.third text.value').text(dm.prefix+(week_kwh*365/7).toFixed(0));
	    break;
	  case 1:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_cost*week_kwh).toFixed(2));
	    d3.select('#status g.second text.value').text('');
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_cost*week_kwh*365/7).toFixed(0));
	    break;
	  case 2:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_co2*week_kwh).toFixed(1));
	    d3.select('#status g.second text.value').text('');
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_co2*week_kwh*365/7).toFixed(0));
	    break;
	}

	d3.select('#status g.first text.units').text(dm.label);
	d3.select('#status g.second text.units').text('');
	d3.select('#status g.third text.units').text(dm.label+'/yr');
}

function ts_to_datestring(ts, day_offset) {
	date = new Date(ts + day_offset * 3600 * 24 * 1000);
	return date.toDateString().slice(4, 10);
}

function calculate_totals(week_data) {
	var totals = {days:[0, 0, 0, 0, 0, 0, 0], week:0};
		for(var d=0; d<7; d++) {
			for(var h=0; h<24; h++)
				totals.days[d]+=week_data[d*24+h];
			totals.week += totals.days[d]
		}
	return totals;
}

function convert_to_ampm(h) {
	if(h=='0' || h=='24')
	  return 'Midnight';
	var suffix = 'am';
	if(h>11) suffix = 'pm';
	if(h>12)
	  return (h-12)+suffix;
	else
	  return h+suffix;
}
text {
   -webkit-touch-callout: none; 
   -webkit-user-select: none; 
   -khtml-user-select: none; 
   -moz-user-select: none; 
   -ms-user-select: none; 
   user-select: none;
   color:white;
}

#main {
  width: 600px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top:0px; 
  font: 14px Helvetica Neue;
  position:relative;  
  color:white;
}

h1 {
  font-size: 36px; 
  font-weight: 300;  
  color:white;
}

h2 {
  font-size: 24px; 
  font-weight: 300;  
  color:white;
}

#chart path {
  -webkit-transition-property: fill; 
  -webkit-transition-duration: 0.2s;
}

svg text {
  font-family: helvetica, sans-serif; 
}

#status {
  cursor: pointer; 
  text-anchor: middle;
  
}

#status g.first text.time {
  font-size: 13px; 
  font-weight: bold;
  color:white;
  fill: #ffffff;
}

#status g.first text.value {
  font-size: 40px; 
  font-weight: bold;
  color:white;
  fill: #ffffff;
}

#status g.first text.units {
  font-size: 12px;
  color:white;
  fill: #ffffff;
}

#status g.second text.time, #status g.third text.time {
  font-size: 12px;
	color:white;
	fill: #ffffff;
	}

#status g.second text.value, #status g.third text.value {
  font-size: 20px; 
  fill: #ffffff;
  
}

#status g.second text.units, #status g.third text.units {
  font-size: 10px;
  fill: #ffffff;
  }

svg text.day.label {
    font-size: 10px; 
    font-weight: bold; 
    fill: #ffffff; 
    pointer-events: none;
	color:white;
}

svg text.time.label {
  font-size: 12px; 
  font-weight: bold; 
  fill: #ffffff; 
  pointer-events: none;
  color:white;
}

.week_step {
  font-size: 50px; 
  fill: #ffffff; 
  font-weight: bold; 
  font-family: helvetica, sans-serif; 
  cursor: pointer;
  color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  
    <title>SM consumption heat map</title>
   <meta name="" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">

   
  </head>

  <body style="background-color:black">
  
    
      <div id="main" font color="white">
	  <svg width="600" height="600">
	    <g id="status">
	      <g class="first">
		<text class="time" x="300" y="237"></text>
		<text class="value" x="300" y="276"></text>
		<text class="units" x="300" y="290"></text>
	      </g>
	      <g class="second">
		<text class="time" x="255" y="320"></text>
		<text class="value" x="255" y="347"></text>
		<text class="units" x="255" y="360"></text>
	      </g>
	      <g class="third">
		<text class="time" x="345" y="320">Year</text>
		<text class="value" x="345" y="347"></text>
		<text class="units" x="345" y="360"></text>
	      </g>
	    </g>
	    <text class="week_step" id="downweek" x="60" y="570"><<</text>
	    <text class="week_step" id="upweek" x="510" y="570">>></text>
	  </svg>
      </div>

   

  </body>
</html>

Improve this question
3
  • You can store it in a variable as a string, but the best way to do this would be to not actually put it in the JS file itself, instead store it on the server and make a request for it when needed. Commented Sep 4, 2017 at 10:55
  • Look at this solution. Does it help you? Commented Sep 4, 2017 at 10:57
  • Thanks Lukas, Yap it helped me. Commented Sep 12, 2017 at 5:56
Related questions
1
Append html to .text() method at D3 library
0
Implementing d3 Codeflower source code
3
d3.js code from javascript console to html page
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.