28:null 29:["$","title",null,{"children":"Whale Vis Dashboard | Wei Jun | Observable"}] 2e:T725,viewof geo_select = Inputs.button( [ [ "Set geo filter", function() { var currZoomState = d3.zoomTransform(svgMap.node()) var boundingBox2d = [] // check dependency on bbox perimeter or area. if it is greater than a threshold, then we need to switch from clockwise to counter clockwise boundingBox2d.push(projection.invert(currZoomState.invert([0, 0]))) boundingBox2d.push(projection.invert(currZoomState.invert([viewportWidth, 0]))) boundingBox2d.push(projection.invert(currZoomState.invert([viewportWidth, viewportHeight]))) boundingBox2d.push(projection.invert(currZoomState.invert([0, viewportHeight]))) boundingBox2d.push(projection.invert(currZoomState.invert([0, 0]))) var viewportBoundingRect = { type: "Polygon", coordinates: [boundingBox2d] } var sphericalBoundingRect = d3.geoBounds(viewportBoundingRect) var correctedSphericalBoundingRect = { lonmin: Math.round(sphericalBoundingRect[0][0]), lonmax: Math.round(sphericalBoundingRect[1][0]), latmin: Math.round(sphericalBoundingRect[0][1]), latmax: Math.round(sphericalBoundingRect[1][1]) } if (correctedSphericalBoundingRect.lonmin > 0 && correctedSphericalBoundingRect.lonmax < 0) // && d3.geoArea(sphericalBoundingRect) < 2*pi { correctedSphericalBoundingRect.lonmax = 180 } return correctedSphericalBoundingRect } ], [ "Reset geo filter", function() { return { lonmin: -180, lonmax: 180, latmin: -90, latmax: 90 } } ] ], { value: { lonmin: -180, lonmax: 180, latmin: -90, latmax: 90 } } )2f:T844,{ var filterSubQuery = [time_range_filter, species_filter, nation_filter, sex_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ') filterSubQuery = filterSubQuery.length > 0 ? `WHERE ${filterSubQuery}` : '' const query = `SELECT date, species, length AS "Length(ft)", sex, lat, lon, exp_code, ocean, area, nation, company, land_station_floating_factory, pl as "Pelagic_land" FROM nodes ${filterSubQuery}` var filterName = ((time_range[0] != date_time_range.begin || time_range[1] != date_time_range.end) ? `year_${time_range[0]}_${time_range[1]}_` : '_') + ((species_select.length > 0) ? `species_${species_select.map(d => d.replaceAll(' ', '-')).join('_')}_` : '_') + ((nation_select.length > 0) ? `nation_${nation_select.map(d => d.replaceAll(' ', '-')).join('_')}_` : '_') + ((sex_select.length > 0) ? `sex_${sex_select.join('_')}_` : '_') + ((pelagic_land.length > 0) ? `pl_${pelagic_land}_` : '_') + ((length_range[0] != length_range_full.begin && length_range[1] != length_range_full.end) ? `length_${length_range[0]}_${length_range[1]}` : '') const name = `whale_catches_${filterName}.csv` const label = 'Save Filtered Catch Data' const a = document.createElement("a"); const b = a.appendChild(document.createElement("button")); b.textContent = label; a.download = name; async function reset() { await new Promise(requestAnimationFrame); URL.revokeObjectURL(a.href); a.removeAttribute("href"); b.textContent = label; b.disabled = false; } a.onclick = async event => { b.disabled = true; if (a.href) return reset(); // Already saved. b.textContent = "Converting to CSV…"; try { const object = await new Blob([d3.csvFormat(await catchDB.query(query))], {type: "text/csv"}) b.textContent = "Data Ready! Click to Download"; a.href = URL.createObjectURL(object); // eslint-disable-line require-atomic-updates } catch (ignore) { b.textContent = label; } if (event.eventPhase) return reset(); // Already downloaded. b.disabled = false; }; return a; }30:T52e,class Tooltip { constructor(selection, callback) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this._callback = callback; this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum) { this.selection.style("display", "block").html(this._callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }31:T453,species_color_map = [ { species: 'Pilot', color: '#e7ba52' }, { species: 'Killer', color: '#bd9e39' }, { species: 'Bottlenose', color: '#8c6d31' }, { species: "Baird's Beaked", color: '#cedb9c' }, { species: "Cuvier's Beaked", color: '#bcbd22' }, { species: 'Sperm', color: '#637939' }, { species: 'Blue', color: '#3182bd' }, { species: 'Sei', color: '#6baed6' }, { species: "Bryde's", color: '#9ecae1' }, { species: 'Fin', color: '#6cdbef' }, { species: 'Pygmy Blue', color: '#9c9ede' }, { species: 'Antarctic Minke', color: '#6b6ecf' }, { species: 'Common Minke', color: '#5254a3' }, { species: 'Humpback', color: '#15a7b6' }, { species: 'Right', color: '#ce6dbd' }, { species: 'Bowhead', color: '#d6616b' }, { species: 'Gray', color: '#969696' }, { species: 'Pygmy Right', color: '#ff7f0e' }, { species: 'Unknown', color: '#cfcfcf' } ]32:T616,nation_color_map = [ { nation: 'Bermuda', color: '#843c39' }, { nation: 'Bahamas', color: '#fdae6b' }, { nation: 'Canada', color: '#e6550d' }, { nation: 'Panama', color: '#fd8d3c' }, { nation: 'Saint Vincent', color: '#e7969c' }, { nation: 'USA', color: '#d6616b' }, { nation: 'Argentina', color: '#8ca252' }, { nation: 'Brazil', color: '#637939' }, { nation: 'Chile', color: '#a1d99b' }, { nation: 'Equador', color: '#b5cf6b' }, { nation: 'Peru', color: '#31a354' }, { nation: 'Denmark', color: '#c6dbef' }, { nation: 'France', color: '#3182bd' }, { nation: 'Germany', color: '#c6dbef' }, { nation: 'Iceland', color: '#393b79' }, { nation: 'Norway', color: '#9c9ede' }, { nation: 'Netherlands', color: '#5254a3' }, { nation: 'Portugal', color: '#6b6ecf' }, { nation: 'Spain', color: '#9ecae1' }, { nation: 'United Kingdom', color: '#6baed6' }, { nation: 'China', color: '#a55194' }, { nation: 'Indonesia', color: '#e7ba52' }, { nation: 'Japan', color: '#ce6dbd' }, { nation: 'Korea', color: '#8c6d31' }, { nation: 'Philippines', color: '#bd9e39' }, { nation: 'Russia', color: '#e7cb94' }, { nation: 'Taiwan', color: '#de9ed6' }, { nation: 'Soviet Union', color: '#7b4173' }, { nation: 'Australia', color: '#bcbd22' }, { nation: 'New Zealand', color: '#dbdb8d' }, { nation: 'South Africa', color: '#969696' } ]33:T7c9,boundary_list = { var boundary_list = [] var areasDf = await catchDB.query(`SELECT * FROM filtered_areas`) for (let i=0; ibottom; j-=2.5) { coordinates_list.push([right, j]) } coordinates_list.push([right, bottom]) // special handling for regions which cross the 180deg longitude if (areasDf[i].Cross_180) { for (let j=right-2.5; j>-180; j-=2.5) { coordinates_list.push([j, bottom]) } coordinates_list.push([-180, bottom]) for (let j=180-2.5; j>left; j-=2.5) { coordinates_list.push([j, bottom]) } } else { for (let j=right-2.5; j>left; j-=2.5) { coordinates_list.push([j, bottom]) } } coordinates_list.push([left, bottom]) boundary_list.push({ "type": "Feature", "id": i.toString(), "properties": { "name": areasDf[i].Area }, "geometry": { "type": "Polygon", "coordinates": [coordinates_list] } }) } return boundary_list }34:T991,function setupBaseMap() { clearOldElements(); clearBaseMap(); svgMap.append("g") .attr("class", "earth-borders") .selectAll("path") .data([{type: "Sphere"}]) .enter() .append("svg:path") .attr("d", path) .attr("stroke", "black") .attr("stroke-witdth", 0.5) .style("fill", "rgba(138, 210, 255, 0.4)"); svgMap.append("g") .attr("class", "area-boundary") .selectAll("path") .data(boundary_list) .enter() .append("path") .attr("d", path) .attr("stroke", "None") // .attr("stroke-width", 0.5) .style("fill", "rgba(0, 0, 0, 0)") .on("mouseover", function(event, d) { d3.select(this) .transition().duration(200) .style("fill", "rgba(0, 0, 0, 0.1)"); tooltip.display(d) }) .on("mousemove", function(event, d) { tooltip.move(event) }) .on("mouseout", function() { d3.select(this) .transition().duration(200) .style("fill", "rgba(0, 0, 0, 0)"); tooltip.hide(); }); svgMap.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature(world_map, world_map.objects.countries).features) .enter() .append("path") .attr("d", path) .attr("stroke", "black") .attr("stroke-width", 0.5) .style("fill", "rgba(143, 199, 105, 0.3)") // green .on("mouseover", function(event, d) { d3.select(this) .transition().duration(200) .style("fill", "rgba(143, 199, 105, 1)"); tooltip.display(d) }) .on("mousemove", function(event, d) { tooltip.move(event) }) .on("mouseout", function() { d3.select(this) .transition().duration(200) .style("fill", "rgba(143, 199, 105, 0.3)"); tooltip.hide(); }); svgMap.append("g") .attr("class", "graticule") .selectAll("path") .data([d3.geoGraticule10()]) .enter() .append("path") .attr("d", path) .attr("stroke", "black") .attr("stroke-width", 0.1) .style("fill", "None"); svgMap.append("g") .attr("class", "scatterplot-data"); svgMap.append("g") .attr("class", "heatmap-data") }35:Taa0,function drawData() { if (lod === "Heatmap") { const width = viewportWidth; const height = viewportHeight; const densityData = d3.contourDensity() .x(function(d) { return projection([Number(d.lon), Number(d.lat)])[0]; }) .y(function(d) { return projection([Number(d.lon), Number(d.lat)])[1]; }) .size([width, height]) .bandwidth(10) (geoMapData) const color_scale = d3.scaleSequential(d3.interpolate(d3.color("rgba(255, 255, 0, 0.5)"), d3.color("rgba(255, 0, 0, 1)"))) .domain(d3.extent(densityData, function(d) { return d.value; })); svgMap.select("g.scatterplot-data") .selectAll("circle") .remove(); svgMap.select("g.heatmap-data") .insert("g", "g") .selectAll("path") .data(densityData) .enter() .append("path") .attr("d", d3.geoPath()) .attr("fill", function(d) { return color_scale(d.value); }); } else { svgMap.select("g.heatmap-data").select("g").remove(); var svgData = svgMap.select("g.scatterplot-data") .selectAll("circle") .data(geoMapData, d => d.name) .enter() .append("circle") .attr("cx", function(d) { return projection([Number(d.lon), Number(d.lat)])[0]; }) .attr("cy", function(d) { return projection([Number(d.lon), Number(d.lat)])[1]; }) .attr("r", d => size_scale(Number(d.size_agg))) .style("fill", function(d) { return color_scale(d.color_agg) }) .style("opacity", 0.75) .style("stroke-width", 0) .style("stroke", "black") .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .style("stroke-width", 1); tooltip.display(d) }) .on("mousemove", function(event, d) { tooltip.move(event) }) .on("mouseout", function(event, d) { d3.select(this) .transition() .duration(200) .style("stroke-width", 0); tooltip.hide() }); } }36:Ta1b,function drawLegends() { let numLengthLegendSteps = 6 let numLegendItemsPerRow = 8 d3.selectAll("svg.color-legend").remove(); d3.selectAll("svg.size-legend").remove(); if (lod != 'Heatmap') { var color_legend_width = width var legend_height = 50 var legend_domain = [] switch (color_encoding) { case 'Max Species': case 'Max Nationality': case 'Max Sex': case 'Max Pelagic/Land': legend_domain = [...new Set(geoMapData.map(d => d.color_agg))]//color_scale.domain() break case 'Avg Length (ft)': let step = (color_scale.domain()[1] - color_scale.domain()[0])/numLengthLegendSteps for (var i=0; i d) .enter() .append("rect") .attr("x", function(d, i) { return color_legend_width * (((i % numLegendItemsPerRow) + 1)/(Math.min(legend_domain.length, numLegendItemsPerRow) + 1) - 0.025) }) .attr("y", function(d, i) { return legend_height * (Math.floor(i/numLegendItemsPerRow) + 0.1) }) .attr("width", color_legend_width * 0.05) .attr("height", legend_height * 0.4) .attr("fill", function(d) { return color_scale(d) }) .style("stroke", "black") .style("stroke-width", 1) d3.select("svg.color-legend") .selectAll("text") .data(legend_domain, d => d) .enter() .append("text") .attr("x", function(d, i) { return color_legend_width * (((i % numLegendItemsPerRow) + 1)/(Math.min(legend_domain.length, numLegendItemsPerRow) + 1)) }) .attr("y", function(d, i) { return legend_height * (Math.floor(i/numLegendItemsPerRow) + 0.75) }) .attr("alignment-baseline", "middle") .attr("text-anchor", "middle") .text(function(d) { if (color_encoding === 'Avg Length (ft)') return d + ' ft' else return d }) .attr("font-size", "15px") .attr("fill", "black") } }37:T4f1,geoMapQuery = { // select attributes var name = (lod === 'Heatmap') ? 'Grid_1x1' : lod // by default we create a binned heatmap, to reduce computation overhead var lon = (name === 'Ocean') ? 'Lon_ocean' : ( (name === 'Area') ? 'Lon_area' : 'Lon') // aggregations var color_agg = (color_encoding === 'Max Species') ? 'MODE(Species)' : ( (color_encoding === 'Max Sex') ? 'MODE(Sex)' : ( (color_encoding === 'Max Nationality') ? 'MODE(Nation)' : ( (color_encoding === 'Avg Length (ft)') ? 'AVG(NULLIF(Length, 0))' : 'MODE(PL)'))) var size_agg = (size_encoding === 'Catch Numbers') ? 'COUNT(*)' : 'COUNT(*)::FLOAT/(MAX(Date)-MIN(Date)+1)' // use all the filters for geo map visualization var filterSubQuery = [time_range_filter, species_filter, nation_filter, sex_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ') filterSubQuery = filterSubQuery.length > 0 ? `WHERE ${filterSubQuery}` : '' var query = `SELECT ${name} AS name, ${size_agg} AS size_agg, ${color_agg} AS color_agg, AVG(${lon}) AS lon, AVG(lat) AS lat, MAX(DATE)-MIN(DATE)+1 AS time_spent, count(*) as num_catches FROM nodes ${filterSubQuery} GROUP BY name ORDER BY size_agg ASC` return query }38:Tcdc,time_line_chart_params = { const margin = {top: 10, bottom: 50, left: 70, right: 20} const title_height = 50 const h = 350 - margin.top - margin.bottom - title_height const w = width - margin.left - margin.right // one time setup const x = d3.scaleLinear() .domain([date_time_range.begin, date_time_range.end]) .range([ 0, w ]) .nice() const y = d3.scaleLinear() .domain([0, d3.max(timeline_data, function(d) { return Number(d.count) })]) .range([ h, 0]) .nice() const xAxis = d3.axisBottom(x) .tickFormat(d3.format("d")) const yAxis = d3.axisLeft(y) .ticks(6) var dataGroup = d3.select("#catchvstime").select("#scaffold").select("#data") dataGroup.selectAll("g").remove(); dataGroup.selectAll("text").remove(); var svg = d3.select("#catchvstime") .select("#scaffold") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom + title_height) svg.selectAll("#chart-title").remove() // remove old chart title dataGroup.attr("transform", `translate(${margin.left}, ${margin.top + title_height})`) dataGroup.append("text") .attr("x", -h/2) .attr("y", -3 * margin.left/4) .attr("text-anchor", "middle") .attr("transform", `rotate(-90)`) .text("Catch count") dataGroup.append("text") .attr("x", w/2) .attr("y", h + margin.top + margin.bottom/2) .attr("text-anchor", "middle") .text("Year") dataGroup.append("g") .attr("transform", `translate(0, ${h})`) .call(xAxis) .call(g => g.select(".domain").remove()); const gY = dataGroup.append("g") .call(yAxis) .call(g => g.select(".domain").remove()); // var zoom = d3.zoom() // .scaleExtent([1,2]) // // .translateExtent([[0, 0], [margin.left, h]]) // .on("zoom", function(event) { // gY.call(yAxis.scale(event.transform.rescaleY(y))) // .call(g => g.select(".domain").remove()); // }) // svg.call(zoom) dataGroup.append("g") .attr("class", "gridlines") .selectAll("line") .data(y.ticks()) .enter() .append('line') .attr('x1', 0) .attr('x2', w) .attr('y1', d => y(d)) .attr('y2', d => y(d)) .style("stroke", "grey") .style("opacity", 0.2) // Add the unfiltered data dataGroup.append('g') .append("path") .datum(timeline_data) .attr("fill", "gray") .attr("fill-opacity", 0.3) .attr("stroke", "gray") .attr("stroke-width", 0) .attr("d", d3.area() .x(function(d) { return x(Number(d.yr)) }) .y0(y(0)) .y1(function(d) { return y(Number(d.count)) }) ) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", h * 0.01) .text("Whale Catch Count over Time") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, h: h, w: w, xScale: x, yScale: y, title_height: title_height }) }39:T5ef,viewof time_brush = { var time_brush = d3.brushX() .extent([[0, 0],[time_line_chart_params.w, time_line_chart_params.h]]) // the transform of the 'g' element to which the brush 'g' element is appended, also applied to the brush 'g' element .on("end", setTimeRange); var brushSvg = d3.select("#catchvstime") .select("#scaffold") .select("#brush") .property("value", [date_time_range.begin, date_time_range.end]) brushSvg.selectAll("g").remove(); brushSvg.attr("width", time_line_chart_params.w + time_line_chart_params.margin.left + time_line_chart_params.margin.right) .attr("height", time_line_chart_params.h + time_line_chart_params.margin.top + time_line_chart_params.margin.bottom + time_line_chart_params.title_height) .append("g") .attr("transform", `translate(${time_line_chart_params.margin.left}, ${time_line_chart_params.margin.top + time_line_chart_params.title_height})`) .call(time_brush) function setTimeRange(event, d) { var time_range = [] if (event && event.selection) { time_range = [Math.round(time_line_chart_params.xScale.invert(event.selection[0])), Math.round(time_line_chart_params.xScale.invert(event.selection[1]))] } else { time_range = [(date_time_range.begin), (date_time_range.end)] } brushSvg.property("value", time_range).dispatch("input") } return brushSvg.node(); }3a:T8e3,species_breakdown_chart_params = { const margin = {left: 0.15, right: 0.8} const bar_height = 20 const padding = 5 const title_height = 2 * (bar_height + padding) const height = title_height + (bar_height + padding) * species_data.length // 2 * (bar_height + padding) for the chart title, and the remaining for the bars themselves // one time setup var width_scale = d3.scaleLinear().domain([0, d3.max(species_data.map(d => Number(d.count)))]).range([0, width * (margin.right - margin.left)]) d3.select("#speciesbarchart").select("#scaffold").select("#data").selectAll("g").remove() var svg = d3.select("#speciesbarchart") .select("#scaffold") .attr("width", width) .attr("height", height) .select("#data") .append("g") svg.selectAll("#chart-title").remove() // remove old chart title svg.selectAll("text") .data(species_data, d => d.Species) .enter() .append("text") .attr("x", width * 0.14) .attr("y", function(d,i) {return i* (bar_height + padding) + bar_height/2 + title_height}) .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .text(function(d){ return d.Species }) .attr("font-size", "15px") .attr("fill", "black") var dataRects = svg.selectAll("rect") .data(species_data, d => d.Species) .enter() .append("rect") .attr("x", width * margin.left) .attr("y", function(d, i) {return i * (bar_height + padding) + title_height}) .attr('width', function (d) { return width_scale(Number(d.count))}) .attr('height', bar_height) .style("fill", "gray") .style("fill-opacity", 0.3) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", height * 0.01) .text("Whale Species Breakdown") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, bar_height: bar_height, padding: padding, height: height, title_height: title_height, wScale: width_scale }) }3b:T5da,{ var dataGroup = d3.select("#speciesbarchart").select("#scaffold").select("#data") dataGroup.selectAll("#filtereddata").remove() var svg = d3.select("#speciesbarchart") .select("#scaffold") .select("#data") .append("g") .attr("id", "filtereddata") svg.selectAll("rect") .data(filtered_species_data, d => d.Species) .enter() .append("rect") .attr("x", width * species_breakdown_chart_params.margin.left) .attr("y", function(d, i) {return i * (species_breakdown_chart_params.bar_height + species_breakdown_chart_params.padding) + species_breakdown_chart_params.title_height}) .attr('width', function (d) { return species_breakdown_chart_params.wScale(Number(d.count))}) .attr('height', species_breakdown_chart_params.bar_height) .style("fill", "steelblue") svg.selectAll("text") .data(filtered_species_data, d => d.Species) .enter() .append("text") .attr("x", function(d,i) {return width * species_breakdown_chart_params.margin.left + species_breakdown_chart_params.wScale(Number(d.count)) + 10}) .attr("y", function(d,i) {return i* (species_breakdown_chart_params.bar_height + species_breakdown_chart_params.padding) + species_breakdown_chart_params.bar_height/2 + species_breakdown_chart_params.title_height}) .text(function(d){ return d3.format(",")(Number(d.count)) }) .attr("alignment-baseline", "middle") .attr("font-size", "15px") .attr("fill", "black") }3c:T6de,viewof species_click_listener = { var svg = d3.select("#speciesbarchart") .select("#scaffold") .select("#clicklistener") .property("value", []) svg.selectAll("rect").remove(); var clickRects = svg .selectAll("rect") .data(species_data) .enter() .append("rect") .attr("x", 0) .attr("y", function(d, i) {return i * (species_breakdown_chart_params.bar_height + species_breakdown_chart_params.padding) + species_breakdown_chart_params.title_height}) .attr('width', width) .attr('height', species_breakdown_chart_params.bar_height) .style("fill", "white") .style("fill-opacity", 0) .style("stroke", "black") .style("stroke-width", 0) .on("click", setSpecies) .on("mouseover", function() { d3.select(this).style("fill-opacity", 0.3) }) .on("mouseout", function() { d3.select(this).style("fill-opacity", 0) }) function setSpecies(event, d) { var _ = svg.property("value") var index = _.indexOf(d.Species) if (index >= 0) { // it was already selected, deselect it now d3.select(this) .style("stroke-width", 0) _.splice(index, 1) } else { // it was not selected, select it now d3.select(this) .style("stroke-width", 1) _.push(d.Species) } svg.property("value", _).dispatch("input") } d3.select("#speciesbarchart") .selectAll("#resetspecies") .remove() d3.select("#speciesbarchart") .append("input") .attr("type", "button") .attr("id", "resetspecies") .attr("value", "Reset Species filter") .on("click", function() { clickRects.style("stroke-width", 0) svg.property("value", []).dispatch("input") }) return svg.node(); }3d:Tdfe,sort_species_data = { d3.select("#speciesbarchart") .selectAll("#sortbyvalue") .remove() d3.select("#speciesbarchart") .append("input") .attr("type", "button") .attr("id", "sortbyvalue") .attr("value", "Sort by value") .on("click", function() { // Get previous state let prev_value = d3.select("#speciesbarchart") .select("#sortflag") .attr("value") // Change the button text d3.select("#speciesbarchart") .select("#sortbyvalue") .attr("value", prev_value == 0 ? "Sort by species" : "Sort by value") // Toggle the state d3.select("#speciesbarchart") .select("#sortflag") .attr("value", prev_value ^ 1) // Get the correct comparator function and sort both data const comp = prev_value == 1 ? ((a, b) => a.Species < b.Species ? -1 : a.Species > b.Species) : ((a, b) => b.count - a.count); species_data.sort(comp); filtered_species_data.sort(comp); // Redraw the visualization resetData(); resetFilteredData(); resetClickListener(); }) function resetData() { const svg = d3.select("#speciesbarchart") .select("#scaffold") .select("#data") svg.selectAll("text") .data(species_data) .text((d, i) => d.Species) svg.selectAll("rect") .data(species_data) .transition() .duration(750) .ease(d3.easeCubic) .attr('width', function (d) { return species_breakdown_chart_params.wScale(Number(d.count))}) } function resetFilteredData() { const svg = d3.select("#speciesbarchart") .select("#scaffold") .select("#data") .select("#filtereddata") svg.selectAll("rect") .data(filtered_species_data) .transition() .duration(750) .ease(d3.easeCubic) .attr('width', function (d) { return species_breakdown_chart_params.wScale(Number(d.count))}) svg.selectAll("text") .data(filtered_species_data) .transition() .duration(750) .ease(d3.easeCubic) .attr("x", function(d,i) {return width * species_breakdown_chart_params.margin.left + species_breakdown_chart_params.wScale(Number(d.count)) + 10}) .text(function(d){ return d3.format(",")(Number(d.count)) }) } function resetClickListener() { const svg = d3.select("#speciesbarchart") .select("#scaffold") .select("#clicklistener") svg.selectAll("rect") .data(species_data) .transition() .duration(750) .ease(d3.easeCubic) .style("stroke-width", d => species_select.includes(d.Species) ? 1 : 0) .on("click", setSpecies) .on("mouseover", function() { d3.select(this).style("fill-opacity", 0.3) }) .on("mouseout", function() { d3.select(this).style("fill-opacity", 0) }) function setSpecies(event, d) { console.log("clicked"); var _ = svg.property("value") var index = _.indexOf(d.Species) if (index >= 0) { // it was already selected, deselect it now d3.select(this) .style("stroke-width", 0) _.splice(index, 1) } else { // it was not selected, select it now d3.select(this) .style("stroke-width", 1) _.push(d.Species) } svg.property("value", _).dispatch("input") } } return "Currently sort by " + (d3.select("#speciesbarchart").select("#sortflag").attr("value") == 0 ? "Species" : "Value") }3e:T884,nation_breakdown_chart_params = { const margin = {left: 0.15, right: 0.8} const bar_height = 20 const padding = 5 const title_height = 2 * (bar_height + padding) const height = title_height + (bar_height + padding) * nation_data.length // one time setup var width_scale = d3.scaleLinear().domain([0, d3.max(nation_data.map(d => Number(d.count)))]).range([0, width * (margin.right - margin.left)]) d3.select("#nationbarchart").select("#scaffold").select("#data").selectAll("g").remove() var svg = d3.select("#nationbarchart") .select("#scaffold") .attr("width", width) .attr("height", height) .select("#data") .append("g") svg.selectAll("#chart-title").remove() // remove old chart title svg.selectAll("text") .data(nation_data, d => d.Nation) .enter() .append("text") .attr("x", width * 0.14) .attr("y", function(d,i) {return i* (bar_height + padding) + bar_height/2 + title_height }) .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .text(function(d){ return d.Nation }) .attr("font-size", "15px") .attr("fill", "black") var dataRects = svg.selectAll("rect") .data(nation_data, d => d.Nation) .enter() .append("rect") .attr("x", width * margin.left) .attr("y", function(d, i) {return i * (bar_height + padding) + title_height}) .attr('width', function (d) { return width_scale(Number(d.count))}) .attr('height', bar_height) .style("fill", "gray") .style("fill-opacity", 0.3) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", height * 0.01) .text("Expedition Nationality Breakdown") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, bar_height: bar_height, padding: padding, height: height, wScale: width_scale, title_height: title_height }) }3f:T5c8,{ var dataGroup = d3.select("#nationbarchart").select("#scaffold").select("#data") dataGroup.selectAll("#filtereddata").remove() var svg = d3.select("#nationbarchart") .select("#scaffold") .select("#data") .append("g") .attr("id", "filtereddata") svg.selectAll("rect") .data(filtered_nation_data, d => d.Nation) .enter() .append("rect") .attr("x", width * nation_breakdown_chart_params.margin.left) .attr("y", function(d, i) {return i * (nation_breakdown_chart_params.bar_height + nation_breakdown_chart_params.padding) + nation_breakdown_chart_params.title_height}) .attr('width', function (d) { return nation_breakdown_chart_params.wScale(Number(d.count))}) .attr('height', nation_breakdown_chart_params.bar_height) .style("fill", "steelblue") svg.selectAll("text") .data(filtered_nation_data, d => d.Nation) .enter() .append("text") .attr("x", function(d,i) {return width * nation_breakdown_chart_params.margin.left + nation_breakdown_chart_params.wScale(Number(d.count)) + 10}) .attr("y", function(d,i) {return i* (nation_breakdown_chart_params.bar_height + nation_breakdown_chart_params.padding) + nation_breakdown_chart_params.bar_height/2 + nation_breakdown_chart_params.title_height}) .text(function(d){ return d3.format(",")(Number(d.count)) }) .attr("alignment-baseline", "middle") .attr("font-size", "15px") .attr("fill", "black") }40:T6ce,viewof nation_click_listener = { var svg = d3.select("#nationbarchart") .select("#scaffold") .select("#clicklistener") .property("value", []) svg.selectAll("rect").remove(); var clickRects = svg .selectAll("rect") .data(nation_data) .enter() .append("rect") .attr("x", 0) .attr("y", function(d, i) {return i * (nation_breakdown_chart_params.bar_height + nation_breakdown_chart_params.padding) + nation_breakdown_chart_params.title_height}) .attr('width', width) .attr('height', nation_breakdown_chart_params.bar_height) .style("fill", "white") .style("fill-opacity", 0) .style("stroke", "black") .style("stroke-width", 0) .on("click", setNation) .on("mouseover", function() { d3.select(this).style("fill-opacity", 0.3) }) .on("mouseout", function() { d3.select(this).style("fill-opacity", 0) }) function setNation(event, d) { var _ = svg.property("value") var index = _.indexOf(d.Nation) if (index >= 0) { // it was already selected, deselect it now d3.select(this) .style("stroke-width", 0) _.splice(index, 1) } else { // it was not selected, select it now d3.select(this) .style("stroke-width", 1) _.push(d.Nation) } svg.property("value", _).dispatch("input") } d3.select("#nationbarchart") .selectAll("#resetnation") .remove() d3.select("#nationbarchart") .append("input") .attr("type", "button") .attr("id", "resetnation") .attr("value", "Reset Nation filter") .on("click", function() { clickRects.style("stroke-width", 0) svg.property("value", []).dispatch("input") }) return svg.node(); }41:T85d,sex_breakdown_chart_params = { const margin = {left: 0.15, right: 0.8} const bar_height = 20 const padding = 5 const title_height = 2 * (bar_height + padding) const height = title_height + (bar_height + padding) * sex_data.length // one time setup var width_scale = d3.scaleLinear().domain([0, d3.max(sex_data.map(d => Number(d.count)))]).range([0, width * (margin.right - margin.left)]) d3.select("#sexbarchart").select("#scaffold").select("#data").selectAll("g").remove() var svg = d3.select("#sexbarchart") .select("#scaffold") .attr("width", width) .attr("height", height) .select("#data") .append("g") svg.selectAll("#chart-title").remove() // remove old chart title svg.selectAll("text") .data(sex_data, d => d.Sex) .enter() .append("text") .attr("x", width * 0.14) .attr("y", function(d,i) {return i* (bar_height + padding) + bar_height/2 + title_height }) .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .text(function(d){ return d.Sex }) .attr("font-size", "15px") .attr("fill", "black") var dataRects = svg.selectAll("rect") .data(sex_data, d => d.Sex) .enter() .append("rect") .attr("x", width * margin.left) .attr("y", function(d, i) {return i * (bar_height + padding) + title_height}) .attr('width', function (d) { return width_scale(Number(d.count))}) .attr('height', bar_height) .style("fill", "gray") .style("fill-opacity", 0.3) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", height * 0.01) .text("Whale Sex Breakdown") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, bar_height: bar_height, padding: padding, height: height, wScale: width_scale, title_height: title_height }) }42:T592,{ var dataGroup = d3.select("#sexbarchart").select("#scaffold").select("#data") dataGroup.selectAll("#filtereddata").remove() var svg = d3.select("#sexbarchart") .select("#scaffold") .select("#data") .append("g") .attr("id", "filtereddata") svg.selectAll("rect") .data(filtered_sex_data, d => d.Sex) .enter() .append("rect") .attr("x", width * sex_breakdown_chart_params.margin.left) .attr("y", function(d, i) {return i * (sex_breakdown_chart_params.bar_height + sex_breakdown_chart_params.padding) + sex_breakdown_chart_params.title_height}) .attr('width', function (d) { return sex_breakdown_chart_params.wScale(Number(d.count))}) .attr('height', sex_breakdown_chart_params.bar_height) .style("fill", "steelblue") svg.selectAll("text") .data(filtered_sex_data, d => d.Sex) .enter() .append("text") .attr("x", function(d,i) {return width * sex_breakdown_chart_params.margin.left + sex_breakdown_chart_params.wScale(Number(d.count)) + 10}) .attr("y", function(d,i) {return i* (sex_breakdown_chart_params.bar_height + sex_breakdown_chart_params.padding) + sex_breakdown_chart_params.bar_height/2 + sex_breakdown_chart_params.title_height}) .text(function(d){ return d3.format(",")(Number(d.count)) }) .attr("alignment-baseline", "middle") .attr("font-size", "15px") .attr("fill", "black") }43:T69e,viewof sex_click_listener = { var svg = d3.select("#sexbarchart") .select("#scaffold") .select("#clicklistener") .property("value", []) svg.selectAll("rect").remove(); var clickRects = svg .selectAll("rect") .data(sex_data) .enter() .append("rect") .attr("x", 0) .attr("y", function(d, i) {return i * (sex_breakdown_chart_params.bar_height + sex_breakdown_chart_params.padding) + sex_breakdown_chart_params.title_height}) .attr('width', width) .attr('height', sex_breakdown_chart_params.bar_height) .style("fill", "white") .style("fill-opacity", 0) .style("stroke", "black") .style("stroke-width", 0) .on("click", setSex) .on("mouseover", function() { d3.select(this).style("fill-opacity", 0.3) }) .on("mouseout", function() { d3.select(this).style("fill-opacity", 0) }) function setSex(event, d) { var _ = svg.property("value") var index = _.indexOf(d.Sex) if (index >= 0) { // it was already selected, deselect it now d3.select(this) .style("stroke-width", 0) _.splice(index, 1) } else { // it was not selected, select it now d3.select(this) .style("stroke-width", 1) _.push(d.Sex) } svg.property("value", _).dispatch("input") } d3.select("#sexbarchart") .selectAll("#resetsex") .remove() d3.select("#sexbarchart") .append("input") .attr("type", "button") .attr("id", "resetsex") .attr("value", "Reset Sex filter") .on("click", function() { clickRects.style("stroke-width", 0) svg.property("value", []).dispatch("input") }) return svg.node(); }44:T85e,pl_breakdown_chart_params = { const margin = {left: 0.15, right: 0.8} const bar_height = 20 const padding = 5 const title_height = 2 * (bar_height + padding) const height = title_height + (bar_height + padding) * pl_data.length // one time setup var width_scale = d3.scaleLinear().domain([0, d3.max(pl_data.map(d => Number(d.count)))]).range([0, width * (margin.right - margin.left)]) d3.select("#plbarchart").select("#scaffold").select("#data").selectAll("g").remove() var svg = d3.select("#plbarchart") .select("#scaffold") .attr("width", width) .attr("height", height) .select("#data") .append("g") svg.selectAll("#chart-title").remove() // remove old chart title svg.selectAll("text") .data(pl_data, d => d.PL) .enter() .append("text") .attr("x", width * 0.14) .attr("y", function(d,i) {return i* (bar_height + padding) + bar_height/2 + title_height }) .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .text(function(d){ return d.PL }) .attr("font-size", "15px") .attr("fill", "black") var dataRects = svg.selectAll("rect") .data(pl_data, d => d.PL) .enter() .append("rect") .attr("x", width * margin.left) .attr("y", function(d, i) {return i * (bar_height + padding) + title_height}) .attr('width', function (d) { return width_scale(Number(d.count))}) .attr('height', bar_height) .style("fill", "gray") .style("fill-opacity", 0.3) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", height * 0.01) .text("Pelagic vs Land Expedition Breakdown") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, bar_height: bar_height, padding: padding, height: height, wScale: width_scale, title_height: title_height }) }45:T580,{ var dataGroup = d3.select("#plbarchart").select("#scaffold").select("#data") dataGroup.selectAll("#filtereddata").remove() var svg = d3.select("#plbarchart") .select("#scaffold") .select("#data") .append("g") .attr("id", "filtereddata") svg.selectAll("rect") .data(filtered_pl_data, d => d.PL) .enter() .append("rect") .attr("x", width * pl_breakdown_chart_params.margin.left) .attr("y", function(d, i) {return i * (pl_breakdown_chart_params.bar_height + pl_breakdown_chart_params.padding) + pl_breakdown_chart_params.title_height}) .attr('width', function (d) { return pl_breakdown_chart_params.wScale(Number(d.count))}) .attr('height', pl_breakdown_chart_params.bar_height) .style("fill", "steelblue") svg.selectAll("text") .data(filtered_pl_data, d => d.PL) .enter() .append("text") .attr("x", function(d,i) {return width * pl_breakdown_chart_params.margin.left + pl_breakdown_chart_params.wScale(Number(d.count)) + 10}) .attr("y", function(d,i) {return i* (pl_breakdown_chart_params.bar_height + pl_breakdown_chart_params.padding) + pl_breakdown_chart_params.bar_height/2 + pl_breakdown_chart_params.title_height}) .text(function(d){ return d3.format(",")(Number(d.count)) }) .attr("alignment-baseline", "middle") .attr("font-size", "15px") .attr("fill", "black") }46:T68d,viewof pl_click_listener = { var svg = d3.select("#plbarchart") .select("#scaffold") .select("#clicklistener") .property("value", '') svg.selectAll("rect").remove(); var clickRects = svg .selectAll("rect") .data(pl_data) .enter() .append("rect") .attr("x", 0) .attr("y", function(d, i) {return i * (pl_breakdown_chart_params.bar_height + pl_breakdown_chart_params.padding) + pl_breakdown_chart_params.title_height}) .attr('width', width) .attr('height', pl_breakdown_chart_params.bar_height) .style("fill", "white") .style("fill-opacity", 0) .style("stroke", "black") .style("stroke-width", 0) .on("click", setPL) .on("mouseover", function() { d3.select(this).style("fill-opacity", 0.3) }) .on("mouseout", function() { d3.select(this).style("fill-opacity", 0) }) function setPL(event, d) { var clickedRect = d3.select(this) if (svg.property("value") === d.PL) { d3.select(this) .style("stroke-width", 0) svg.property("value", '').dispatch("input") } else { clickRects.style("stroke-width", 0) .filter(t => t.PL == d.PL) .style("stroke-width", 1) svg.property("value", d.PL).dispatch("input") } } d3.select("#plbarchart") .selectAll("#resetpl") .remove() d3.select("#plbarchart") .append("input") .attr("type", "button") .attr("id", "resetpl") .attr("value", "Reset Pelagic vs Land filter") .on("click", function() { clickRects.style("stroke-width", 0) svg.property("value", '').dispatch("input") }) return svg.node(); }47:Tbbd,length_histogram_chart_params = { const margin = {top: 10, bottom: 50, left: 70, right: 20} const title_height = 50 const h = 350 - margin.top - margin.bottom - title_height const w = width - margin.left - margin.right const barPadding = 12 // one time setup const x = d3.scaleLinear() .domain([length_range_full.begin, length_range_full.end]) .range([ 0, w ]) .nice() var dataGroup = d3.select("#lengthhistogram").select("#scaffold").select("#data") dataGroup.selectAll("g").remove(); dataGroup.selectAll("text").remove(); var svg = d3.select("#lengthhistogram") .select("#scaffold") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom + title_height) svg.selectAll("#chart-title").remove() // remove old chart title dataGroup.attr("transform", `translate(${margin.left}, ${margin.top + title_height})`) dataGroup.append("text") .attr("x", -h/2) .attr("y", -3 * margin.left/4) .attr("text-anchor", "middle") .attr("transform", `rotate(-90)`) .text("Count") dataGroup.append("text") .attr("x", w/2) .attr("y", h + margin.top + margin.bottom/2) .attr("text-anchor", "middle") .text("Length (ft)") const xAxis = d3.axisBottom(x) .tickFormat(d3.format("d")) dataGroup.append("g") .attr("transform", `translate(0, ${h})`) .call(xAxis) .call(g => g.select(".domain").remove()); const y = d3.scaleLinear() .domain([0, d3.max(length_data, function(d) { return Number(d.count) })]) .range([ h, 0]) .nice() const yAxis = d3.axisLeft(y) .ticks(6); dataGroup.append("g") .call(yAxis) .call(g => g.select(".domain").remove()); dataGroup.append("g") .attr("class", "gridlines") .selectAll("line") .data(y.ticks()) .enter() .append('line') .attr('x1', 0) .attr('x2', w) .attr('y1', d => y(d)) .attr('y2', d => y(d)) .style("stroke", "grey") .style("opacity", 0.2) dataGroup.append('g') .selectAll("rect") .data(length_data) .enter() .append("rect") .attr("x", function(d) {return x(d.bin_floor)}) .attr("y", function(d) {return y(d.count)}) .attr("width", function(d) { return w/length_data.length-barPadding; }) .attr("height", function(d) { return h - y(d.count); }) .style("fill", "gray") .style("fill-opacity", 0.3) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", h * 0.01) .text("Whale Length Histogram") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, h: h, w: w, xScale: x, yScale: y, barPadding: barPadding, title_height: title_height }) }48:T66c,viewof length_brush = { var length_brush = d3.brushX() .extent([[0, 0],[length_histogram_chart_params.w, length_histogram_chart_params.h]]) // the transform of the 'g' element to which the brush 'g' element is appended, also applied to the brush 'g' element .on("end", setLengthRange); var brushSvg = d3.select("#lengthhistogram") .select("#scaffold") .select("#brush") .property("value", [length_range_full.begin, length_range_full.end]) brushSvg.selectAll("g").remove(); brushSvg.attr("width", length_histogram_chart_params.w + length_histogram_chart_params.margin.left + length_histogram_chart_params.margin.right) .attr("height", length_histogram_chart_params.h + length_histogram_chart_params.margin.top + length_histogram_chart_params.margin.bottom + length_histogram_chart_params.title_height) .append("g") .attr("transform", `translate(${length_histogram_chart_params.margin.left}, ${length_histogram_chart_params.margin.top + length_histogram_chart_params.title_height})`) .call(length_brush) function setLengthRange(event, d) { var length_range = [] if (event && event.selection) { length_range = [Math.round(length_histogram_chart_params.xScale.invert(event.selection[0])), Math.round(length_histogram_chart_params.xScale.invert(event.selection[1]))] } else { length_range = [length_range_full.begin, length_range_full.end] } brushSvg.property("value", length_range).dispatch("input") } return brushSvg.node(); }49:T869,exp_breakdown_chart_params = { const margin = {left: 0.15, right: 0.8} const bar_height = 20 const padding = 5 const title_height = 2 * (bar_height + padding) const height = title_height + (bar_height + padding) * exp_data.length // one time setup var width_scale = d3.scaleLinear().domain([0, d3.max(exp_data.map(d => Number(d.count)))]).range([0, width * (margin.right - margin.left)]) d3.select("#expbarchart").select("#scaffold").select("#data").selectAll("g").remove() var svg = d3.select("#expbarchart") .select("#scaffold") .attr("width", width) .attr("height", height) .select("#data") .append("g") svg.selectAll("#chart-title").remove() // remove old chart title svg.selectAll("text") .data(exp_data, d => d.Exp_code) .enter() .append("text") .attr("x", width * 0.14) .attr("y", function(d,i) {return i* (bar_height + padding) + bar_height/2 + title_height }) .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .text(function(d){ return d.Exp_code }) .attr("font-size", "15px") .attr("fill", "black") var dataRects = svg.selectAll("rect") .data(exp_data, d => d.Exp_code) .enter() .append("rect") .attr("x", width * margin.left) .attr("y", function(d, i) {return i * (bar_height + padding) + title_height}) .attr('width', function (d) { return width_scale(Number(d.count))}) .attr('height', bar_height) .style("fill", "gray") .style("fill-opacity", 0.3) // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", height * 0.01) .text("Expedition Breakdown") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") return ({ margin: margin, bar_height: bar_height, padding: padding, height: height, wScale: width_scale, title_height: title_height }) }4a:T59c,{ var dataGroup = d3.select("#expbarchart").select("#scaffold").select("#data") dataGroup.selectAll("#filtereddata").remove() var svg = d3.select("#expbarchart") .select("#scaffold") .select("#data") .append("g") .attr("id", "filtereddata") svg.selectAll("rect") .data(filtered_exp_data, d => d.Exp_code) .enter() .append("rect") .attr("x", width * exp_breakdown_chart_params.margin.left) .attr("y", function(d, i) {return i * (exp_breakdown_chart_params.bar_height + exp_breakdown_chart_params.padding) + exp_breakdown_chart_params.title_height}) .attr('width', function (d) { return exp_breakdown_chart_params.wScale(Number(d.count))}) .attr('height', exp_breakdown_chart_params.bar_height) .style("fill", "steelblue") svg.selectAll("text") .data(filtered_exp_data, d => d.Exp_code) .enter() .append("text") .attr("x", function(d,i) {return width * exp_breakdown_chart_params.margin.left + exp_breakdown_chart_params.wScale(Number(d.count)) + 10}) .attr("y", function(d,i) {return i* (exp_breakdown_chart_params.bar_height + exp_breakdown_chart_params.padding) + exp_breakdown_chart_params.bar_height/2 + exp_breakdown_chart_params.title_height}) .text(function(d){ return d3.format(",")(Number(d.count)) }) .attr("alignment-baseline", "middle") .attr("font-size", "15px") .attr("fill", "black") }4b:T6af,viewof exp_click_listener = { var svg = d3.select("#expbarchart") .select("#scaffold") .select("#clicklistener") .property("value", []) svg.selectAll("rect").remove(); var clickRects = svg .selectAll("rect") .data(exp_data) .enter() .append("rect") .attr("x", 0) .attr("y", function(d, i) {return i * (exp_breakdown_chart_params.bar_height + exp_breakdown_chart_params.padding) + exp_breakdown_chart_params.title_height}) .attr('width', width) .attr('height', exp_breakdown_chart_params.bar_height) .style("fill", "white") .style("fill-opacity", 0) .style("stroke", "black") .style("stroke-width", 0) .on("click", setExp) .on("mouseover", function() { d3.select(this).style("fill-opacity", 0.3) }) .on("mouseout", function() { d3.select(this).style("fill-opacity", 0) }) function setExp(event, d) { var _ = svg.property("value") var index = _.indexOf(d.Exp_code) if (index >= 0) { // it was already selected, deselect it now d3.select(this) .style("stroke-width", 0) _.splice(index, 1) } else { // it was not selected, select it now d3.select(this) .style("stroke-width", 1) _.push(d.Exp_code) } svg.property("value", _).dispatch("input") } d3.select("#expbarchart") .selectAll("#resetexp") .remove() d3.select("#expbarchart") .append("input") .attr("type", "button") .attr("id", "resetexp") .attr("value", "Reset Expedition filter") .on("click", function() { clickRects.style("stroke-width", 0) svg.property("value", []).dispatch("input") }) return svg.node(); }4c:[] 2c:{"id":"70a974cce5ac799c","slug":null,"title":"Whale Vis Dashboard","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-04-07T04:25:45.249Z","update_time":"$D2023-05-07T17:33:16.201Z","view_time":null,"first_public_time":"$D2023-04-07T04:25:45.249Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"38049f1a6f4ca8ab","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":"starter_2024"},"version":4532,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2351dc4e961bf865","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"2351dc4e961bf865","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Whale Vis Dashboard","cells":[{"id":0,"value":"# Whale Vis Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1161,"value":"Please wait around 30 seconds for the data to load","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":82,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":4056,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4099,"value":"geo_bounding_box = geo_select","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1536,"value":"viewof rotation = Inputs.range([-180, 180], {value: 0, step: 5, label: \"Rotation of map (in degrees)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"viewof lod = Inputs.radio([\"Ocean\", \"Area\", \"Grid_5x5\", \"Grid_1x1\", \"Heatmap\"], {label: \"Level of Detail:\", value: \"Grid_5x5\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2156,"value":"viewof color_encoding = Inputs.radio([\"Max Species\", \"Max Sex\", \"Max Nationality\", \"Avg Length (ft)\", \"Max Pelagic/Land\"], {label: \"Color Encoding:\", value: \"Max Species\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"viewof size_encoding = Inputs.radio([\"Catch Numbers\", \"Catch per Unit Effort\"], {label: \"Size Encoding:\", value: \"Catch Numbers\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1967,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2477,"value":"time_range = time_brush","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2077,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1388,"value":"nation_select = nation_click_listener","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2085,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2194,"value":"sex_select = sex_click_listener","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2122,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2197,"value":"pelagic_land = pl_click_listener","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2135,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2617,"value":"length_range = length_brush","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3860,"value":"## Download data \nClick once to convert data to CSV \nClick again after the conversion is complete, to download","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3847,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3845,"value":"# Implementation Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1008,"value":"### Package imports ###","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":914,"value":"### Load data from the IWC-dataset notebook ###","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1205,"value":"import {catchDB} from \"@whales/iwc-dataset\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"### Definitions ###","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":926,"value":"date_time_range = {\n let res = await catchDB.query('SELECT MAX(EXTRACT(year FROM Date)) AS max_year, MIN(EXTRACT(year FROM Date)) AS min_year FROM nodes')\n\n return {\n begin: Number(res[0].min_year),\n end: Number(res[0].max_year)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2745,"value":"length_range_full = {\n let res = await catchDB.query('SELECT MAX(Length) AS max_len, MIN(Length) AS min_len FROM nodes')\n\n return {\n begin: Number(res[0].min_len),\n end: Number(res[0].max_len)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":929,"value":"size_scale_range = [1, 25]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"// https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\nworld_map = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1486,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":969,"value":"viewportWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":972,"value":"viewportHeight = viewportWidth * 9/16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":919,"value":"### Visualization parameters and functions ###","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":565,"value":"function clearOldElements() {\n d3.select(\"g.heatmap-data\").remove();\n d3.selectAll(\"g.scatterplot-data\").remove();\n d3.selectAll(\"canvas.legend\").remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1542,"value":"function clearBaseMap() {\n d3.selectAll(\".earth-borders\").remove();\n d3.selectAll(\".countries\").remove();\n d3.selectAll(\".graticule\").remove();\n d3.selectAll(\".area-boundary\").remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":979,"value":" zoom = d3.zoom()\n .extent([[0,0], [viewportWidth, viewportHeight]])\n .scaleExtent([1,8])\n .translateExtent([[0,0], [viewportWidth, viewportHeight]]) \n .on(\"zoom\", function (event) {\n svgMap.attr(\"transform\", event.transform);\n })\n // .filter(function(event) {\n // return event.altKey;\n // });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1601,"value":"svgMap = d3.select(\".kyrix-panel\")\n .select(\"#map\")\n .attr(\"width\", viewportWidth)\n .attr(\"height\", viewportHeight)\n .attr(\"viewBox\", [0, 0, viewportWidth, viewportHeight])\n .append(\"g\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4111,"value":"svgMap.call(zoom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":985,"value":"projection = d3.geoNaturalEarth1()\n .fitExtent([[0, 0], [viewportWidth, viewportHeight]], {type: \"Sphere\"})\n .rotate([rotation,0,0]); // shift part of Russia from west of the map to the east","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":987,"value":"path = d3.geoPath().projection(projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1563,"value":"size_scale = d3.scaleSqrt()\n .domain([0, d3.max(geoMapData, d => Number(d.size_agg))])\n .range(size_scale_range);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3455,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3460,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2053,"value":"color_scale = {\n if (color_encoding === 'Max Species')\n return d3.scaleOrdinal()\n .domain(species_color_map.map(d => d.species))\n .range(species_color_map.map(d => d.color))\n\n else if (color_encoding === 'Max Nationality')\n return d3.scaleOrdinal()\n .domain(nation_color_map.map(d => d.nation))\n .range(nation_color_map.map(d => d.color))\n \n else if (color_encoding === 'Max Sex')\n return d3.scaleOrdinal()\n .domain(['Female', 'Male', 'Hermaphrodite', 'Unknown'])\n .range(['#e377c2', '#6baed6', '#2ca02c', '#d9d9d9'])\n \n else if (color_encoding === 'Max Pelagic/Land')\n return d3.scaleOrdinal()\n .domain(['Pelagic', 'Land'])\n .range(['#3182bd', '#637939'])\n \n else // (color_encoding === 'Avg Length')\n return d3.scaleSequential(d3.interpolateGreys).domain([length_range_full.begin, length_range_full.end])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"div_tooltip = d3.select(\"div.main-container\")\n .select(\"#tooltip\")\n .classed(\"tooltip\", true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1492,"value":"// create a new tooltip,\n// passing it a selection for the tooltip's DOM element.\ntooltip = new Tooltip(div_tooltip, setTooltipContent);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1172,"value":"function setTooltipContent(d) {\n if ('properties' in d)\n return d.properties.name;\n\n return d.name + \"
\" + (size_encoding === \"Catch Numbers\" ? \"Catch Count: \" : \"Whales per day: \") + d3.format(size_encoding === \"Catch Numbers\" ? \",\" : \",.2f\")(Number(d.size_agg)) + \"
\" + color_encoding + \": \" + (color_encoding === \"Avg Length (ft)\" ? (Number(d.color_agg) === 0 ? 'NA' : (d3.format(\",.2f\")(Number(d.color_agg)) + \" feet\")) : d.color_agg)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1674,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1553,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1623,"value":"{\n setupBaseMap();\n drawData();\n drawLegends();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2845,"value":"### Data Filters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4062,"value":"geo_filter = {\n if (geo_select.lonmin === -180 && geo_select.lonmax === 180 && geo_select.latmin === -90 && geo_select.latmax === 90)\n return ''\n else\n return `Lon BETWEEN ${geo_select.lonmin} AND ${geo_select.lonmax} AND Lat BETWEEN ${geo_select.latmin} AND ${geo_select.latmax}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2681,"value":"time_range_filter = (time_range[0] != date_time_range.begin || time_range[1] != date_time_range.end) ? `EXTRACT(year FROM Date) BETWEEN ${time_range[0]} AND ${time_range[1]}` : ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2685,"value":"species_filter = (species_select.length > 0) ? `Species IN (${species_select.map(d => \"'\" + d.replaceAll(\"'\", \"''\") + \"'\")})` : ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2689,"value":"nation_filter = (nation_select.length > 0) ? `Nation IN (${nation_select.map(d => \"'\" + d.replaceAll(\"'\", \"''\") + \"'\")})` : ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2693,"value":"sex_filter = (sex_select.length > 0) ? `Sex IN (${sex_select.map(d => \"'\" + d + \"'\")})` : '' ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2697,"value":"pl_filter = (pelagic_land.length > 0) ? `PL = ${\"'\" + pelagic_land + \"'\"}` : ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2742,"value":"length_range_filter = (length_range[0] != length_range_full.begin && length_range[1] != length_range_full.end) ? `Length BETWEEN ${length_range[0]} AND ${length_range[1]}` : ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2847,"value":"### Geomap Query","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2172,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"geoMapData = catchDB.query(geoMapQuery)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2850,"value":"### Time Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1949,"value":"timeline_data = {\n var query = `SELECT EXTRACT(year FROM Date) AS yr, COUNT(*) AS count FROM nodes GROUP BY yr ORDER BY yr ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3027,"value":"filtered_timeline_data = {\n // do not use the time filter here\n var filterSubQuery = [geo_filter, species_filter, nation_filter, sex_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `WHERE ${filterSubQuery}` : ''\n \n var query = `SELECT EXTRACT(year FROM Date) AS yr, COUNT(*) AS count FROM nodes ${filterSubQuery} GROUP BY yr ORDER BY yr ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2879,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1969,"value":"{\n var dataGroup = d3.select(\"#catchvstime\").select(\"#scaffold\").select(\"#data\")\n dataGroup.select(\"#filtereddata\").remove()\n\n // Add the filtered data\n dataGroup.append('g')\n .attr(\"id\", \"filtereddata\")\n .append(\"path\")\n .datum(filtered_timeline_data)\n .attr(\"fill\", \"steelblue\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 0)\n .attr(\"d\", d3.area()\n .x(function(d) { return time_line_chart_params.xScale(Number(d.yr)) })\n .y0(time_line_chart_params.yScale(0))\n .y1(function(d) { return time_line_chart_params.yScale(Number(d.count)) })\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2898,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2853,"value":"### Species Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4231,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":4234,"value":"species_select = species_click_listener","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2964,"value":"species_data = { \n var query = `SELECT species, COUNT(*) AS count FROM nodes GROUP BY species ORDER BY species ASC`\n \n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2046,"value":"filtered_species_data = {\n // do not use the species filter here\n var filterSubQuery = [geo_filter, time_range_filter, nation_filter, sex_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `FILTER(WHERE ${filterSubQuery})` : ''\n \n var query = `SELECT species, COUNT(*) ${filterSubQuery} AS count FROM nodes GROUP BY Species ORDER BY species ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2934,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2051,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2967,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4251,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2855,"value":"### Nations Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3348,"value":"nation_data = {\n var query = `SELECT nation, COUNT(*) AS count FROM nodes GROUP BY nation ORDER BY nation ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2072,"value":"filtered_nation_data = { \n // do not use the nation filter here\n var filterSubQuery = [geo_filter, species_filter, time_range_filter, sex_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `FILTER(WHERE ${filterSubQuery})` : ''\n \n var query = `SELECT nation, COUNT(*) ${filterSubQuery} AS count FROM nodes GROUP BY nation, ORDER BY nation ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3093,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3111,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2080,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2858,"value":"### Sex Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3134,"value":"sex_data = {\n var query = `SELECT sex, COUNT(*) AS count FROM nodes GROUP BY sex ORDER BY sex ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2091,"value":"filtered_sex_data = {\n // do not use the sex filter here\n var filterSubQuery = [geo_filter, species_filter, time_range_filter, nation_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `FILTER(WHERE ${filterSubQuery})` : ''\n \n var query = `SELECT sex, COUNT(*) ${filterSubQuery} AS count FROM nodes GROUP BY sex ORDER BY sex ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3137,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3140,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2095,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2861,"value":"### Pelagic/Land Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3153,"value":"pl_data = {\n var query = `SELECT pl, COUNT(*) AS count FROM nodes GROUP BY pl ORDER BY pl ASC`\n \n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2103,"value":"filtered_pl_data = {\n // do not use the pl filter here\n var filterSubQuery = [geo_filter, species_filter, time_range_filter, sex_filter, nation_filter, length_range_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `FILTER(WHERE ${filterSubQuery})` : ''\n\n var query = `SELECT pl, COUNT(*) ${filterSubQuery} AS count FROM nodes GROUP BY pl ORDER BY pl ASC`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3156,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3159,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2116,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2866,"value":"### Length Histogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3174,"value":"length_data = {\n var query = `SELECT FLOOR(length/2)*2 AS bin_floor, COUNT(*) AS count FROM nodes WHERE length > 0 GROUP BY bin_floor, ORDER BY bin_floor`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2137,"value":"filtered_length_data = {\n // do not use the length filter here\n var filterSubQuery = [geo_filter, species_filter, time_range_filter, sex_filter, pl_filter, nation_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `WHERE ${filterSubQuery} AND Length > 0` : `WHERE LENGTH > 0`\n \n var query = `SELECT FLOOR(length/2)*2 AS bin_floor, COUNT(*) AS count FROM nodes ${filterSubQuery} GROUP BY bin_floor, ORDER BY bin_floor`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3179,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3189,"value":"{\n var dataGroup = d3.select(\"#lengthhistogram\").select(\"#scaffold\").select(\"#data\")\n dataGroup.select(\"#filtereddata\").remove()\n\n // append the bar rectangles to the svg element\n dataGroup.append('g')\n .attr(\"id\", \"filtereddata\")\n .selectAll(\"rect\")\n .data(filtered_length_data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d) {return length_histogram_chart_params.xScale(d.bin_floor)})\n .attr(\"y\", function(d) {return length_histogram_chart_params.yScale(d.count)})\n .attr(\"width\", function(d) { return length_histogram_chart_params.w/length_data.length - length_histogram_chart_params.barPadding; })\n .attr(\"height\", function(d) { return length_histogram_chart_params.h - length_histogram_chart_params.yScale(d.count); })\n .style(\"fill\", \"steelblue\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2142,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4130,"value":"### Expedition Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4144,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":4173,"value":"expedition_select = exp_click_listener","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4192,"value":"expedition_filter = (expedition_select.length > 0) ? `Exp_code IN (${expedition_select.map(d => d)})` : ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4127,"value":"exp_data = {\n var query = `SELECT exp_code, COUNT(*) AS count FROM nodes GROUP BY exp_code ORDER BY exp_code ASC LIMIT 10`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4139,"value":"filtered_exp_data = {\n // do not use the sex filter here\n var filterSubQuery = [geo_filter, species_filter, time_range_filter, nation_filter, sex_filter, pl_filter, length_range_filter].filter(d => d.length > 0).join(' AND ')\n filterSubQuery = filterSubQuery.length > 0 ? `FILTER(WHERE ${filterSubQuery})` : ''\n \n var query = `SELECT exp_code, COUNT(*) ${filterSubQuery} AS count FROM nodes GROUP BY exp_code ORDER BY exp_code LIMIT 10`\n return catchDB.query(query)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4148,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4162,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4164,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W4c","stdlib":"1","titling":"auto"}} 2d:"$2c:body"