Permalink
Browse files

Fixed the selector so it works. Haven't really split the viz off into…

… smaller functions yet although I'm currently working on it
  • Loading branch information...
NolanDC committed Jan 30, 2012
1 parent 16e034e commit 90139fbc9b089520bb62a97302c06b0aba34d1c9
Showing with 69 additions and 49 deletions.
  1. +3 −1 eiolca.sql
  2. +9 −10 js/backend.js
  3. +1 −1 js/sector-picker.js
  4. +55 −36 js/visualization.js
  5. +1 −1 selector.php
View
@@ -3,7 +3,7 @@
-- http://www.phpmyadmin.net
--
-- Host: localhost
--- Generation Time: Dec 12, 2011 at 05:13 PM
+-- Generation Time: Jan 18, 2012 at 07:17 PM
-- Server version: 5.1.44
-- PHP Version: 5.3.1
@@ -18,6 +18,8 @@ SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `eiolca`
--
+CREATE DATABASE `eiolca` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
+USE `eiolca`;
-- --------------------------------------------------------
View
@@ -78,27 +78,26 @@ function Backend() {
* Retrieves the correct XMLdata
*/
this.get_XML_by_sector_and_metric = function (sector_id, metric_id, cb ) {
- if(metric_id == undefined) metric_id = 1;
-
- var metric_subpath = this.metrics[metric_id].path
- var sector_file = sector_id + '.xml';
var obj = this;
- var params = controller.get_params();
+ var sector_file = sector_id + '.xml';
+ if(metric_id != undefined) {
+ var metric_subpath = this.metrics[metric_id].path
+ } else {
+ metric_subpath = this.metrics[1].path;
+ }
+
+ console.log(this.DOMAIN + "xml/"+ metric_subpath + "/" + sector_file);
//newLoop$1MSector_234
$.ajax({
type: "GET",
url: this.DOMAIN + "xml/"+ metric_subpath + "/" + sector_file, //DOMAIN + sectorPath+".xml",
dataType: "xml",
success: function(xml) {
obj.sector_XML = xml;
- if(cb != undefined) {
- cb();
- }
+ cb(obj.sector_XML);
}
});
-
- return obj.sector_XML;
}
/**
View
@@ -216,7 +216,7 @@ function SectorPicker( backend_obj ) {
$( "#sectorAutocomplete" ).autocomplete({
source: available_tags,
minLength: 1,
- select: function(event,ui) {
+ select: function(event, ui) {
$(this).val(ui.item.label);
obj.submit_sector(ui.item.value);
$(this).blur();
View
@@ -11,8 +11,6 @@ function Visualization( backend_obj ) {
this.show = function() { $sector_page.show(); }
var vis = this;
- var xml_data = null;
-
//Various display variables and depth variables
this.DISPLAY_WIDTH = $('#vizcontainer').width();
var BLOCK_HEIGHT = 42;
@@ -31,11 +29,13 @@ function Visualization( backend_obj ) {
var params = controller.get_params();
sector_id = params.vis;
metric_id = params.metric;
+ var xml_data;
- vis.backend.get_categories();
- vis.xml_data = vis.backend.get_XML_by_sector_and_metric(sector_id, metric_id);
-
- vis.init_UI();
+ vis.backend.get_categories(function() {
+ vis.backend.get_XML_by_sector_and_metric(sector_id, metric_id, function() {
+ vis.init_UI();
+ });
+ });
}
@@ -44,7 +44,8 @@ function Visualization( backend_obj ) {
//initialize back button TODO put this somewhere else
$('#backButton').button({ icons: { primary: "ui-icon-carat-1-w" } });
this.populate_metric_picker();
- this.init_viz();
+ xml_data = vis.backend.sector_XML;
+ this.create_viz(xml_data);
}
this.populate_metric_picker = function(){
@@ -57,7 +58,6 @@ function Visualization( backend_obj ) {
$.each(metrics, function(id, metric) {
//"2":{ id:"2", name:"Water", path:"water" },
$metric_select.append('<option value="'+id+'">'+metric.name+'</option>')
-
});
$metric_select[0].selectedIndex = params.metric - 1;
@@ -69,38 +69,68 @@ function Visualization( backend_obj ) {
}
+
- this.init_viz = function() {
- data = $(xml_data);
+
+ this.create_viz = function(xml_data) {
+ var data = $(xml_data);
var outer = data.children().first().children().first();
-
+
frequency_hash = [];
main = this.create_children(outer, 1);
+ vis.create_top_categories(frequency_hash);
+
+
+ $('#viz').remove();
+ $('#vizcontainer').append('<div id="viz"></div>');
+ $('#viz').append('<div class="block_wrapper" style="height:600px;"></div>')
+
+
+ /* side tool tips */
+ var tt = new ToolTip( $(document) );
+
+ //TODO syntax change
+
+ tt.new_tip( $('#top_categories'),
+ "These industries represent the top 5 overall emission sources within the sector. Hover over them to see where they appear in the path analysis");
+ tt.new_tip( $('#vizcontainer'),
+ "Each \"depth\" on the tree chart represents the component make-up of emission sources. Click on a component to see it's subsequent components in the next depth." );
+
+ this.render( main );
+ }
+
+
+ /*
- //Sort the frequency hash for the top-category display
- frequency_hash.sort( function(a,b) {
+ Creates the top categories bar in the visualization given a hash of categories and their respective values
+
+ */
+
+ this.create_top_categories = function(hash) {
+ //Sort the frequency hash for the top-category display
+ hash.sort( function(a,b) {
return b.value - a.value;
});
//Clear out the undefined entries
- frequency_hash = frequency_hash.filter(function(){ return true });
+ hash = hash.filter(function(){ return true });
hash_total = 0;
- $.each(frequency_hash, function(index, value) {
+ $.each(hash, function(index, value) {
if(typeof value != 'undefined')
hash_total += value.value;
});
$('#top_categories').html('');
for(i = 0; i < TOP_CATEGORIES; i++){
- width = parseFloat(frequency_hash[i].value / hash_total) * 100;
- name = this.backend.get_sector_name_by_id(frequency_hash[i].number);
- cat = $('#top_categories').append('<div class="top_category top_' + i + '" rank="' + i + '" section="' + frequency_hash[i].number + '" style="width:' + Math.round(width) + '%;"><div class="pct">' + Math.round(width) + '%' + '</div><div class="name">'+ name +'</div></div>')
+ width = parseFloat(hash[i].value / hash_total) * 100;
+ name = this.backend.get_sector_name_by_id(hash[i].number);
+ cat = $('#top_categories').append('<div class="top_category top_' + i + '" rank="' + i + '" section="' + hash[i].number + '" style="width:' + Math.round(width) + '%;"><div class="pct">' + Math.round(width) + '%' + '</div><div class="name">'+ name +'</div></div>')
}
$('.top_category').mouseover(function() {
@@ -114,24 +144,13 @@ function Visualization( backend_obj ) {
rank = parseInt($(this).attr('rank'));
$('.block.top_' + rank).removeClass('top_' + rank);
});
+ }
- $('#viz').remove();
- $('#vizcontainer').append('<div id="viz"></div>');
- $('#viz').append('<div class="block_wrapper" style="height:600px;"></div>')
-
-
- /* side tool tips */
- var tt = new ToolTip( $(document) );
-
- //TODO syntax change
-
- tt.new_tip( $('#top_categories'),
- "These industries represent the top 5 overall emission sources within the sector. Hover over them to see where they appear in the path analysis");
- tt.new_tip( $('#vizcontainer'),
- "Each \"depth\" on the tree chart represents the component make-up of emission sources. Click on a component to see it's subsequent components in the next depth." );
-
- this.render( main );
- }
+ /*
+
+ Renders the children of a chosen node
+
+ */
this.render = function( node ) {
@@ -155,7 +174,7 @@ function Visualization( backend_obj ) {
//Add the children to the depth_wrappers
$.each(node.children, function(index, child) {
- console.log( node.childWidth(child) );
+ //console.log( node.childWidth(child) );
var width = node.childWidth(child) -1;
if(width < 0) return;
View
@@ -48,7 +48,7 @@
<div class="catTriColumn"></div>
<div class="catTriColumn"></div>
<div class="catTriColumn"></div>
- <div class="cleardiv"></div>
+ <div class="cleardiv"></div>
</div>
</div>

0 comments on commit 90139fb

Please sign in to comment.