1(function ($) { 2 $.fn.countTo = function (options) { 3 options = options || {}; 4 5 return $(this).each(function () { 6 // set options for current element 7 var settings = $.extend({}, $.fn.countTo.defaults, { 8 from: $(this).data('from'), 9 to: $(this).data('to'), 10 speed: $(this).data('speed'), 11 refreshInterval: $(this).data('refresh-interval'), 12 decimals: $(this).data('decimals'), 13 }, options); 14 15 // how many times to update the value, and how much to increment the value on each update 16 var loops = Math.ceil(settings.speed / settings.refreshInterval), 17 increment = (settings.to - settings.from) / loops; 18 19 // references & variables that will change with each update 20 var self = this, 21 $self = $(this), 22 loopCount = 0, 23 value = settings.from, 24 data = $self.data('countTo') || {}; 25 26 $self.data('countTo', data); 27 28 // if an existing interval can be found, clear it first 29 if (data.interval) { 30 clearInterval(data.interval); 31 } 32 data.interval = setInterval(updateTimer, settings.refreshInterval); 33 34 // initialize the element with the starting value 35 render(value); 36 37 function updateTimer() { 38 value += increment; 39 loopCount++; 40 41 render(value); 42
43 if (typeof(settings.onUpdate) == 'function') { 44 settings.onUpdate.call(self, value); 45 } 46 47 if (loopCount >= loops) { 48 // remove the interval 49 $self.removeData('countTo'); 50 clearInterval(data.interval); 51 value = settings.to; 52 53 if (typeof(settings.onComplete) == 'function') { 54 settings.onComplete.call(self, value); 55 } 56 } 57 } 58 59 function render(value) { 60 var formattedValue = settings.formatter.call(self, value, settings); 61 $self.html(formattedValue); 62 } 63 }); 64 }; 65 66 $.fn.countTo.defaults = { 67 from: 0, // the number the element should start at 68 to: 0, // the number the element should end at 69 speed: 1000, // how long it should take to count between the target numbers 70 refreshInterval: 100, // how often the element should be updated 71 decimals: 0, // the number of decimal places to show 72 formatter: formatter, // handler for formatting the value before rendering 73 onUpdate: null, // callback method for every time the element is updated 74 onComplete: null // callback method for when the element finishes updating 75 }; 76 77 function formatter(value, settings) { 78 return value.toFixed(settings.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); 79 } 80}(jQuery)); 81 82$(function() { 83 // default class "dollars" to add comma separator 84 $('.dollars').data('countToOptions', { 85 formatter: function (value, options) { 86 return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); 87 } 88 }); 89}); 90 91 92// called to launch the animation 93function animateCountdown(options) { 94 var $this = $(this); 95 options = $.extend({}, options || {}, $this.data('countToOptions') || {}); 96 $this.countTo(options); 97} 98 99/* 100drawDonutChart( 101 '#donut', 102 $('#donut').data('donut'), 103 200, 104 200, 105 ".35em" 106); 107 */ 108 109(function ($) { 110 $.fn.drawDonut = function (options) { 111 options = options || {}; 112 console.log($(this)); 113 console.log(this.data('donut')); 114 115 return $(this).each(function () { 116 // set options for current element 117 var settings = $.extend({}, $.fn.drawDonut.defaults, { 118 width: $(this).data('width'), 119 height: $(this).data('height'), 120 speed: $(this).data('speed'), 121 thickness: $(this).data('thickness'), 122 caption: $(this).data('caption'), 123 percent: $(this).data('donut'), 124 }, options); 125 126 var duration = 500, 127 transition = 200; 128 129 // override settings and make chart as big as container 130 var elwidth = parseInt(d3.select(this).style("width")); 131 var elheight = parseInt(d3.select(this).style("width")); 132 133 var svg = d3.select(this).html(""); 134 135 var dataset = { 136 lower: calcPercent(0), 137 upper: calcPercent(settings.percent) 138 }, 139 radius = Math.min(elwidth, elheight) / 2, 140 pie = d3.layout.pie().sort(null), 141 format = d3.format(".0%"); 142 143 var arc = d3.svg.arc() 144 .innerRadius(radius*(100-settings.thickness)/100) 145 .outerRadius(radius); 146 147 var svg = d3.select(this).append("svg") 148 .attr("viewbox", "0 0 " + elwidth + " " + elheight) 149 .attr("width", elwidth) 150 .attr("height", elheight) 151 .append("g") 152 .attr("transform", "translate(" + elwidth / 2 + "," + elheight / 2 + ")"); 153 154 var path = svg.selectAll("path") 155 .data(pie(dataset.lower)) 156 .enter().append("path") 157 .attr("class", function(d, i) { return "color" + i }) 158 .attr("d", arc) 159 .each(function(d) { this._current = d; }); // store the initial values 160 161 var text = svg.append("text") 162 .attr("text-anchor", "middle") 163 .attr("dy", settings.caption); 164 165 var progress = 0; 166 var timeout = setTimeout(function () { 167 clearTimeout(timeout); 168 path = path.data(pie(dataset.upper)); // update the data 169 path.transition().duration(duration).attrTween("d", function (a) { 170 // Store the displayed angles in _current. 171 // Then, interpolate from _current to the new angles. 172 // During the transition, _current is updated in-place by d3.interpolate. 173 var i = d3.interpolate(this._current, a); 174 var i2 = d3.interpolate(progress, settings.percent) 175 this._current = i(0); 176 return function(t) { 177 text.text( format(i2(t) / 100) ); 178 return arc(i(t)); 179 }; 180 }); // redraw the arcs 181 }, 200); 182/* 183 // how many times to update the value, and how much to increment the value on each update 184 var loops = Math.ceil(settings.speed / settings.refreshInterval), 185 increment = (settings.to - settings.from) / loops; 186 187 // references & variables that will change with each update 188 var self = this, 189 $self = $(this), 190 loopCount = 0, 191 value = settings.from, 192 data = $self.data('countTo') || {}; 193 194 $self.data('countTo', data); 195 196 drawDonutChart( 197 '#donut-employed', 198 $('#donut-employed').data('donut'), 199 200, 200 200, 201 ".35em" 202 ); 203*/ 204 }); 205 }; 206 207 $.fn.drawDonut.defaults = { 208 width: 200, // the number the element should start at 209 height: 200, // the number the element should end at 210 speed: 1000, // how long it should take to count between the target numbers 211 thickness: 50, // how long it should take to count between the target numbers 212 percent: 37, 213 caption: ".35em", 214 }; 215 216 function calcPercent(percent) { 217 return [percent, 100-percent]; 218 }; 219 220}(jQuery)); 221 222 223 224 225 226 227function drawDonutCharts(el) { 228 console.log(el); 229 options = el[0].dataset; 230 console.log(options.donut); 231 width = typeof width !== 'undefined' ? width : 200; 232 height = typeof height !== 'undefined' ? height : 200; 233 text_y = typeof text_y !== 'undefined' ? text_y : "-.10em"; 234 thickness = typeof thickness !== 'undefined' ? thickness : 20; 235 236 //pie chart - Employment and Enrollment 237 var duration = 500, 238 transition = 200; 239 //console.log(element.dataset); 240 241 var dataset = { 242 lower: calcPercent(0), 243 upper: calcPercent(percent) 244 }, 245 radius = Math.min(width, height) / 2, 246 pie = d3.layout.pie().sort(null), 247 format = d3.format(".0%"); 248 249 var arc = d3.svg.arc() 250 .innerRadius(radius - thickness) 251 .outerRadius(radius); 252 253 var svg = d3.select(element).append("svg") 254 .attr("width", width) 255 .attr("height", height) 256 .append("g") 257 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 258 259 var path = svg.selectAll("path") 260 .data(pie(dataset.lower)) 261 .enter().append("path") 262 .attr("class", function(d, i) { return "color" + i }) 263 .attr("d", arc) 264 .each(function(d) { this._current = d; }); // store the initial values 265 266 var text = svg.append("text") 267 .attr("text-anchor", "middle") 268 .attr("dy", text_y); 269 270 if (typeof(percent) === "string") { 271 text.text(percent); 272 } 273 else { 274 var progress = 0; 275 var timeout = setTimeout(function () { 276 clearTimeout(timeout); 277 path = path.data(pie(dataset.upper)); // update the data 278 path.transition().duration(duration).attrTween("d", function (a) { 279 // Store the displayed angles in _current. 280 // Then, interpolate from _current to the new angles. 281 // During the transition, _current is updated in-place by d3.interpolate. 282 var i = d3.interpolate(this._current, a); 283 var i2 = d3.interpolate(progress, percent) 284 this._current = i(0); 285 return function(t) { 286 text.text( format(i2(t) / 100) ); 287 return arc(i(t)); 288 }; 289 }); // redraw the arcs 290 }, 200); 291 } 292}; 293 294 295function drawDonutChart(element, percent, width, height, text_y, thickness) { 296 width = typeof width !== 'undefined' ? width : 200; 297 height = typeof height !== 'undefined' ? height : 200; 298 text_y = typeof text_y !== 'undefined' ? text_y : "-.10em"; 299 thickness = typeof thickness !== 'undefined' ? thickness : 20; 300 301 //pie chart - Employment and Enrollment 302 var duration = 500, 303 transition = 200; 304 //console.log(element.dataset); 305 306 var dataset = { 307 lower: calcPercent(0), 308 upper: calcPercent(percent) 309 }, 310 radius = Math.min(width, height) / 2, 311 pie = d3.layout.pie().sort(null), 312 format = d3.format(".0%"); 313 314 var arc = d3.svg.arc() 315 .innerRadius(radius - thickness) 316 .outerRadius(radius); 317 318 var svg = d3.select(element).append("svg") 319 .attr("width", width) 320 .attr("height", height) 321 .append("g") 322 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 323 324 var path = svg.selectAll("path") 325 .data(pie(dataset.lower)) 326 .enter().append("path") 327 .attr("class", function(d, i) { return "color" + i }) 328 .attr("d", arc) 329 .each(function(d) { this._current = d; }); // store the initial values 330 331 var text = svg.append("text") 332 .attr("text-anchor", "middle") 333 .attr("dy", text_y); 334 335 if (typeof(percent) === "string") { 336 text.text(percent); 337 } 338 else { 339 var progress = 0; 340 var timeout = setTimeout(function () { 341 clearTimeout(timeout); 342 path = path.data(pie(dataset.upper)); // update the data 343 path.transition().duration(duration).attrTween("d", function (a) { 344 // Store the displayed angles in _current. 345 // Then, interpolate from _current to the new angles. 346 // During the transition, _current is updated in-place by d3.interpolate. 347 var i = d3.interpolate(this._current, a); 348 var i2 = d3.interpolate(progress, percent) 349 this._current = i(0); 350 return function(t) { 351 text.text( format(i2(t) / 100) ); 352 return arc(i(t)); 353 }; 354 }); // redraw the arcs 355 }, 200); 356 } 357}; 358 359function calcPercent(percent) { 360 return [percent, 100-percent]; 361}; 362 363/* animation via waypoints */ 364 365// ANIMATIONS 366// 367$('.bar-chart') 368 .waypoint(function(direction) {
369 var iscomplete = $(this.element).data("complete"); 370 var delay=0; 371 if (direction === 'down' && typeof iscomplete === 'undefined') { 372 $(this.element).find('.chart__bar').each(function(){ 373 self = $(this); 374 width = self.data("value") + "%"; 375 self.addClass("animate"); 376 self.css("width",width); 377 self.css("animation-delay",delay+'s'); 378 delay+=.5; 379 }); 380 $(this.element).data("complete",true); 381 } 382 }, 383 { 384 offset: 'bottom-in-view' 385 } 386); 387 388$('.donut') 389 .waypoint(function(direction) { 390 var iscomplete = $(this.element).data("complete"); 391 if (direction === 'down' && typeof iscomplete === 'undefined') { 392 $(this.element).drawDonut(); 393 $(this.element).data("complete",true); 394 } 395 }, 396 { 397 offset: 'bottom-in-view' 398 } 399); 400 401$('.countdown') 402 .waypoint(function(direction) { 403 var iscomplete = $(this.element).data("complete"); 404 if (direction === 'down' && typeof iscomplete === 'undefined') { 405 $(this.element).each(animateCountdown); 406 $(this.element).data("complete",true); 407 } 408 }, 409 { 410 offset: 'bottom-in-view' 411 } 412);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.