(function() {
var margin = {top: 100, right: 20, bottom: 50, left: 80};
var width = 1000 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
/* setup scale for the plot */
var x_scale = d3.scale.linear().range([0, width]);
var y_scale = d3.scale.linear().range([height, 0]);
/* initial values for the elevation filters */
var initial_filter = [30, 60];
/* initialize the d3 tip library */
var tip = d3.tip()
.attr("class", "d3-tip")
.offset(function(d) {
var h = height / 2;
var y = d.mouse[1];
if(y < h)
return ([6, 0]);
else
return ([-6, 0]);
})
.direction(function(d) {
var w = width / 2;
var h = height / 2;
var x = d.mouse[0];
var y = d.mouse[1];
if(x < w) {
if(y < h)
return "se";
else
return "ne";
}
else {
if(y < h)
return "sw";
else
return "nw";
}
})
.html(function(d) {
/* returns the string to be displayed by the tip */
function model_html(array) {
return '<p><span>' + array[0] + ': </span>' + array[1] + '</p>';
}
var string = "";
var model_data = [
['Filter', d.filter],
['Filter No', d.filter_number],
['Camera Id', d.camera_id],
['Version', d.version],
['Caltarget Dust Opacity (tau)', d.tau],
['Solar Elevation', d.solar_elevatio],
['Sclk', d.sclk],
['Model Response Coeff', d.model_response_coeff],
['Response Coeff', d.response_coeff],
['Dust Model Version', d.dust_model_version],
['Dust Spectrum File', d.dust_spectrum_file],
['Rcfile Path', d.rcfile_path],
['Selection File Path', d.selection_file_path],
];
model_data.forEach(function(d) {
string = string + model_html(d);
});
return string;
});
var svg = d3.select("#tau-graph>.graph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
/* Setup the brush filter group */
d3.select("svg").insert("g", "g")
.attr("transform", "translate(" + (width / 2 + margin.left) + ", 25)")
.append("text")
.style("text-anchor", "middle")
.style("font-size", "18px")
.text("Solar Elevation Filter");
var brush_group = d3.select("svg").insert("g", "g")
.attr("class", "brush")
.attr("transform", "translate(" + margin.left + "," + 0 + ")");
var slider_scale = d3.scale.linear()
.range([0, width])
.domain([0 ,90]);
var slider_axis = d3.svg.axis()
.scale(slider_scale)
.tickValues(
slider_scale.ticks(10).concat(slider_scale.domain())
)
.orient("bottom")
.tickSize(0)
.tickPadding(15);
var brush = d3.svg.brush()
.x(slider_scale)
.extent(initial_filter);
var wavelengths = {
L0R: "640",
L0G: "554",
L0B: "495",
L1: "527",
L2: "445",
L3: "751",
L4: "676",
L5: "867",
L6: "1012",
R0R: "638",
R0G: "551",
R0B: "493",
R1: "527",
R2: "447",
R3: "805",
R4: "908",
R5: "937",
R6: "1013"
};
var create_circles = function(data, color, filter_arr) {
var circles = d3.selectAll("svg .L > *, svg .R > *")
.selectAll("circle")
.data(function(d) {
return d.values.filter(function(d) {
return (
d.solar_elevation >= filter_arr[0] &&
d.solar_elevation <= filter_arr[1]
);
});
});
circles.enter()
.append("circle")
.attr("class", "line")
.attr("r", 1)
.attr("cx", function (d) {
return x_scale(d.sol);
})
.attr("cy", function (d) { return y_scale(d.tau); })
.style("stroke", function (d) {
var filter;
if(d.camera_id == "3003") {
filter = "L";
}
else {
filter = "R";
}
return color(filter + d.filter);
})
.on("mouseover", function(d) {
d.mouse = d3.mouse(this);
target = this;
var anim = d3.select(".anim");
var cir = d3.select(this);
anim.attr("cx", cir.attr("cx"))
.attr("cy", cir.attr("cy"))
.style("stroke", cir.style("fill"))
.style("display", "block");
anim.transition()
.duration(100)
.attr("r", 7)
.each("end", function(){
tip.show(d, target);
});
})
.on("mouseout", function(d) {
var anim = d3.select(".anim");
anim.attr("r", 1)
.style("display", "none");
tip.hide(d);
});
circles.exit().remove();
};
d3.json("/api/rcfile?q={\"order_by\": [{\"field\": \"sclk\", \"direction\":\
\"desc\"}]}", function(error, data) {
if(error) {
console.warn(error);
return;
}
/* Get parent for event handlers */
var get_parent = function(element, parent_tag) {
while(element && element.parentNode) {
if(element.tagName && element.tagName.toLowerCase() == parent_tag) {
return element;
}
element = element.parentNode;
}
return null;
};
/* Create a nested hierachy from the json data input */
var json_data = d3.nest()
.key(function(d) {
return d.camera_id;
})
.key(function(d) {
return d.filter;
})
.entries(data.objects);
y_scale.domain(
d3.extent(data.objects, function(d) {
return d.tau;
})
);
x_scale.domain(
d3.extent(data.objects, function(d) {
return d.sol;
})
);
var color_list = [
"#f00", "#0f0", "#00f","#f00", "#0f0", "#00f",
"#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b",
"#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
];
var create_checkbox = function(name, color) {
var index = 1;
return function(name , color) {
return (
'<label for="l' + index + '">\
<input type="checkbox" id="l' + index++ + '" value=""/>\
<div class="checkbox"></div>\
<div class="content">\
<div class="name">\
<span>' + name + '</span>\
<span class="circle" style="background-color:' + color + '"></span>\
</div>\
<div class="nm">\
<span>' + wavelengths[name] + 'nm</span>\
</div>\
</div>\
</label>');
};
}();
var filter_filters = function(data) {
return data.values.filter( function(d) {
if(d.key.length > 1 && d.key[0] != "0")
return false;
else
return true;
});
};
// var color = d3.scale.ordinal()
// .range(color_list).
// domain(L0R, L0G, L0B, R0R, R0G, R0B, L1, L2, L3, L4, L5, L6;
var color = d3.scale.category20();
var line = d3.svg.line()
.x(function (d) {
return x_scale(d.sol);
})
.y(function (d) {
return y_scale(d.tau);
});
var cam = svg.selectAll("g")
.data(json_data)
.enter()
.append("g")
.attr("class", function(d) {
var val;
/* Append divs for select holders */
var div = d3.select("#tau-graph").insert("div", ":first-child");
if(d.key == "3003") {
val = "Left";
}
else {
val = "Right";
}
div.attr("class", "cam"+val[0]).append("ul").append("li")
.append("strong").text("Mastcam " + val);
return val[0];
})
.style("stroke-width", "4px");
var filters = cam.selectAll("g")
.data(filter_filters)
.enter()
.append("g")
.attr("class", function(d) {
return this.parentNode.getAttribute("class") + d.key;
})
.style("fill", function(d) {
return color(this.parentNode.getAttribute("class") + d.key);
})
.style("display", function(d) {
if(this.getAttribute("class").length > 2) {
return "block";
}
return "none";
})
.each(function(d) {
var class_val = this.getAttribute("class");
var parent;
if(class_val[0] == "L")
parent = "camL";
else
parent = "camR";
var node = d3.select("#tau-graph ." + parent + " ul")
.append("li")
.attr("class", class_val)
.html(create_checkbox(class_val, color(
this.parentNode.getAttribute("class") + d.key)
));
if(class_val.length > 2) {
node.select("input").attr("checked", true);
}
});
create_circles(json_data, color, initial_filter);
var x_axis = d3.svg.axis()
.scale(x_scale)
.tickValues(
x_scale.ticks(15).concat(x_scale.domain())
)
.orient("bottom");
var y_axis = d3.svg.axis()
.scale(y_scale)
.tickValues(
y_scale.ticks(15).concat(y_scale.domain())
)
.tickFormat(d3.format(".2f"))
.orient("left");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + 5) + ")")
.call(x_axis)
.append("text")
.attr("transform", "translate(" + (width / 2) + "," + 43 + ")")
.style("text-anchor", "middle")
.style("font-size", "18px")
.text("Sol");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + -5 + ",0)")
.call(y_axis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", - height / 2)
.attr("y", -55)
.style("text-anchor", "middle")
.style("font-size", "18px")
.text("Caltarget Dust Opacity (tau)");
svg.append("circle")
.attr("class", "anim")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 1)
.attr("fill", "none")
.attr("stroke-width", 3)
.style("display", "none");
d3.select(".camL").on("click", click_handler);
d3.select(".camR").on("click", click_handler);
function click_handler(e) {
var parent, checked;
d3.event.stopPropagation();
if((parent = get_parent(d3.event.target, "label")) != null) {
/* check if the input is checked */
checked = parent.getElementsByTagName("input")[0].checked;
var parent_class = parent.parentNode.className;
var svg_element = d3.select("svg ." + parent_class);
if(checked == true) {
svg_element.style("display", "block");
}
else {
svg_element.style("display", "none");
}
}
return false;
}
var arc = d3.svg.arc()
.outerRadius(height / 2)
.startAngle(0)
.endAngle(function(d, i) { return i ? -Math.PI : Math.PI; });
/* Append brush for filtering solar elevation valuess */
brush_group.append("g")
.attr("class", "slider axis")
.attr("transform", "translate(0," + (margin.top/2) + ")")
.call(slider_axis);
brush_group.append("g")
.attr("class", "slider")
.call(brush);
brush_group.selectAll(".resize").append("circle")
.attr("class", "handle")
.attr("r", 9);
brush_group.selectAll("rect")
.attr("transform", "translate(0," + (margin.top/2) + ")")
.attr("height", 2);
brush_group.selectAll(".extent")
.attr("transform", "translate(0," + ((margin.top/2) - 1) + ")")
.attr("height", 4);
function brushmove(data) {
return function() {
create_circles(data, color, brush.extent());
};
}
brush.on("brush", brushmove(json_data));
});
}());
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.