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>
Supun
  • 9
  • 1
  • 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. – George Sep 04 '17 at 10:55
  • Look at this solution. [Does it help you?](https://stackoverflow.com/questions/16270761/how-to-insert-a-large-block-of-html-in-javascript) – Lukas Sep 04 '17 at 10:57
  • Thanks Lukas, Yap it helped me. – Supun Sep 12 '17 at 05:56

0 Answers0