28:null 29:["$","title",null,{"children":"WhaleVis Dashboard | Wei Jun | Observable"}] 2e:T5b2,## Usage Notes * Geographic map visualization: * Zoom using mouse scroll, and Pan using mouse click and drag actions * Click 'Toggle geo filter' to enable setting geo filter (latitude-longitude filters) - then hold Shift key for all the following actions: * Click and drag left mouse button to set filter. * Click and drag the filter edges to adjust the filter width. * Click outside the filter to reset it. * Whale Catches over Time and Whale Length Histogram: * Zoom using mouse scroll, and Pan using mouse click and drag actions. * Filter - hold Shift key for all the following actions: * Click and drag left mouse button to set filter. * Click and drag the filter edges to adjust the filter width. * Click outside the filter to reset it. * Breakdown Bar Charts: * Click on individual bars to set/reset a filter for the desired value. Multiple selections are supported * Comments with findings, insights, observations, or general questions can be added for a particular visualization ![Adding a comment](${await FileAttachment("comments.png").url()}) * Visualizations can be downloaded for sharing ![Downloading a visualization](${await FileAttachment("whale_vis_screenshot.png").url()}) * Data with the chosen filters can be downloaded for offline analysis from [here](https://observablehq.com/@whales/whale-vis-dashboard#cell-3860) * Back to the [dashboard](https://observablehq.com/@whales/whale-vis-dashboard#cell-0) 2f: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"; } } }30:Te0b,svgMap = { clearBaseMap(); var zoom = d3.zoom() .filter(function(event) { return !event.shiftKey; }) .extent([[0,0], [viewportWidth, viewportHeight]]) .scaleExtent([1,8]) .translateExtent([[0,0], [viewportWidth, viewportHeight]]) .on("zoom", zoomed) var svgMap = d3.select(".kyrix-panel") .select("#map") .attr("width", viewportWidth) .attr("height", viewportHeight) .attr("viewBox", [0, 0, viewportWidth, viewportHeight]) .append("g") .attr("id", "geo-zoom") .call(zoom); function zoomed(event) { svgMap.attr("transform", event.transform); } 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") .append("clipPath") .attr("id", "clip-earth") .selectAll("path") .data([{type: "Sphere"}]) .enter() .append("path") .attr("d", path); svgMap.append("g") .attr("class", "heatmap-data") .append("clipPath") .attr("id", "clip-earth") .selectAll("path") .data([{type: "Sphere"}]) .enter() .append("path") .attr("d", path); svgMap.append("g") .attr("id", "geo-brush"); return svgMap; }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:T7dc,boundary_list = { var boundary_list = [] var areasDf = await catchDB.query(`SELECT * FROM filtered_areas ORDER BY Size DESC`) 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:T9ff,function drawNodesData() { 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) (geoMapNodesData) const color_scale = d3.scaleSequential(d3.interpolate(d3.color("rgba(255, 255, 0, 0.2)"), d3.color("rgba(255, 0, 0, 0.2)"))) .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("clip-path", "url(#clip-earth)") .attr("d", d3.geoPath()) .attr("fill", function(d) { return color_scale(d.value); }); } else { svgMap.select("g.heatmap-data").selectAll("g").remove(); var svgData = svgMap.select("g.scatterplot-data") .selectAll("circle") .data(geoMapNodesData, function(d) { return lod+"_"+d.name+"_"+d.lon+"_"+d.lat }) svgData.enter() .append("circle") .attr("clip-path", "url(#clip-earth)") .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]; }) .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() }) .merge(svgData) .attr("r", d => size_scale(Number(d.size_agg))) .style("fill", function(d) { return color_scale(d.color_agg) }) svgData.exit().remove(); } }35:T9f4,function drawLegends() { let numLengthLegendSteps = 6 let numLegendItemsPerRow = 8 d3.selectAll("svg.color-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(geoMapNodesData.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") } }36:T4bb,geoMapNodesQuery = { // 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 FROM nodes ${filterSubQuery} GROUP BY ${name} ORDER BY size_agg ASC` return query }37:Te86,viewof geo_brush = { var geo_brush = d3.brush() .filter(function (event) { return event.shiftKey }) .keyModifiers(false) .extent([[0,0], [viewportWidth, viewportHeight]]) .on("end", setGeoFilter) svgMap.select("#geo-brush") .call(geo_brush) .attr("pointer-events", "none") .property("value", { lonmin: -180, lonmax: 180, latmin: -90, latmax: 90 }) svgMap.select("#geo-brush") .select("rect.overlay") .attr("pointer-events", "none") svgMap.selectAll("#spherical-bbox").remove(); svgMap.select("#geo-brush") .insert("g", "rect") .attr("id", "spherical-bbox") function setGeoFilter(event) { var geo_filter = { lonmin: -180, lonmax: 180, latmin: -90, latmax: 90 } if (event && event.selection) { const xmin = projection.invert(event.selection[0])[0] const ymin = projection.invert(event.selection[0])[1] const xmax = projection.invert(event.selection[1])[0] const ymax = projection.invert(event.selection[1])[1] const spherical_corners = [[xmin, ymin]] var i = 1 if (xmin > xmax) { while (xmin + i*2.5 < 180) { spherical_corners.push([xmin + i*2.5, ymin]) i++ } spherical_corners.push([180, ymin]) i = 1 while (-180 + i*2.5 < xmax) { spherical_corners.push([-180 + i*2.5, ymin]) i++ } } else { while (xmin + i*2.5 < xmax) { spherical_corners.push([xmin + i*2.5, ymin]) i++ } } spherical_corners.push([xmax, ymin]) i = 1 while (ymin + i*2.5 < ymax) { spherical_corners.push([xmax, ymin + i*2.5]) i++ } spherical_corners.push([xmax, ymax]) i = 1 if (xmin > xmax) { while (xmax - i*2.5 > -180) { spherical_corners.push([xmax - i*2.5, ymax]) i++ } spherical_corners.push([-180, ymax]) i = 1 while (180 - i*2.5 > xmin) { spherical_corners.push([180- i*2.5, ymax]) i++ } } else { while (xmax - i*2.5 > xmin) { spherical_corners.push([xmax - i*2.5, ymax]) i++ } } spherical_corners.push([xmin, ymax]) i = 1 while (ymax - i*2.5 > ymin) { spherical_corners.push([xmin, ymax - i*2.5]) i++ } spherical_corners.push([xmin, ymin]) geo_filter.lonmin = xmin geo_filter.lonmax = xmax geo_filter.latmin = ymax // ymax in svg cartesian space is latmin in Earth coordinates geo_filter.latmax = ymin // ymin in svg cartesian space is latmax in Earth corrdinates var boundary_list = [] boundary_list.push({ "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [spherical_corners] } }) svgMap.select("#spherical-bbox").selectAll("path").remove(); svgMap.select("#spherical-bbox") .selectAll("path") .data(boundary_list) .enter() .append("path") .attr("d", path) .attr("stroke", "black") .attr("stroke-width", 0.5) .style("fill", "rgba(255, 0, 0, 0.3)") } else { svgMap.select("#spherical-bbox").selectAll("path").remove(); } svgMap.select("#geo-brush").property("value", geo_filter).dispatch("input"); } return svgMap.select("#geo-brush").node(); }38:T184d,viewof time_line_base_chart = { // one time setup const y = d3.scaleLinear() .domain([0, d3.max(timeline_data, function(d) { return Number(d.count) })]) .range([ time_line_chart_params.h, 0]) .nice() const xAxis = d3.axisBottom(time_line_chart_params.xScale) .tickFormat(d3.format("d")) .tickSize(time_line_chart_params.xAxisTickSize) const yAxis = d3.axisLeft(y) .tickFormat(function(d) { return d/1000 + " k" }) .ticks(6) .tickSize(time_line_chart_params.yAxisTickSize) 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", 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) svg.selectAll("#chart-title").remove() // remove old chart title dataGroup.attr("transform", `translate(${time_line_chart_params.margin.left}, ${time_line_chart_params.margin.top + time_line_chart_params.title_height})`) dataGroup.append("text") .attr("x", -time_line_chart_params.h/2) .attr("y", -2 * time_line_chart_params.margin.left/3) .attr("text-anchor", "middle") .attr("transform", `rotate(-90)`) .text("Catches") .attr("font-size", time_line_chart_params.xAxisLabelFontSize) dataGroup.append("text") .attr("x", time_line_chart_params.w/2) .attr("y", time_line_chart_params.h + time_line_chart_params.margin.top + 3*time_line_chart_params.margin.bottom/4) .attr("text-anchor", "middle") .text("Year") .attr("font-size", time_line_chart_params.yAxisLabelFontSize) dataGroup.append("g") .attr("transform", `translate(0, ${time_line_chart_params.h})`) .attr("class", "xAxis-timeline") .call(xAxis) .call(g => g.select(".domain").remove()); d3.selectAll(".xAxis-timeline>.tick>text") .style("font-size",time_line_chart_params.xAxisLabelTickFontSize); const gY = dataGroup.append("g") .attr("class", "yAxis-timeline") .call(yAxis) .call(g => g.select(".domain").remove()); d3.selectAll(".yAxis-timeline>.tick>text") .style("font-size",time_line_chart_params.yAxisLabelTickFontSize); var zoom = d3.zoom() .scaleExtent([1,4]) .extent([[0, 0], [time_line_chart_params.w, time_line_chart_params.h]]) .translateExtent([[0, 0], [time_line_chart_params.w, time_line_chart_params.h]]) .filter(function(event) { return !event.shiftKey // return !(event.key == 'b') }) .on("zoom", updateChart) svg.call(zoom) var clipRect = dataGroup.append("clipPath") .attr("id", "timeline-clip") .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', time_line_chart_params.w) .attr('height', time_line_chart_params.h) .style("fill", "rgba(255, 0, 0, 0.3)") var gridlines = dataGroup.append("g") .attr("class", "gridlines") .attr("clip-path", "url(#timeline-clip)") .selectAll("line") .data(y.ticks(), d => d) .enter() .append('line') .attr('x1', 0) .attr('x2', time_line_chart_params.w) .attr('y1', d => y(d)) .attr('y2', d => y(d)) .style("stroke", "grey") .style("opacity", 0.2) // Add the unfiltered data var unfiltered_data = dataGroup.append('g') .append("path") .attr("clip-path", "url(#timeline-clip)") .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 time_line_chart_params.xScale(Number(d.yr)) }) .y0(y(0)) .y1(function(d) { return y(Number(d.count)) }) ) var newY = y function updateChart(event) { newY = event.transform.rescaleY(y); gY.call(yAxis.scale(newY)) .call(g => g.select(".domain").remove()); d3.selectAll(".yAxis-timeline>.tick>text") .style("font-size",time_line_chart_params.yAxisLabelTickFontSize); gridlines.attr('x1', 0) .attr('x2', time_line_chart_params.w) .attr('y1', d => newY(d)) .attr('y2', d => newY(d)) .style("stroke", "grey") .style("opacity", 0.2) unfiltered_data.attr("d", d3.area() .x(function(d) { return time_line_chart_params.xScale(Number(d.yr)) }) .y0(newY(0)) .y1(function(d) { return newY(Number(d.count)) }) ) svg.property('value', { yScale: newY, }).dispatch('input') } // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", time_line_chart_params.h * 0.01) .text("Whale Catches over Time") .attr("alignment-baseline", "hanging") .attr("text-anchor", "start") .attr("font-size", "25px") .attr("font-weight", "bold") .attr("fill", "black") svg.property('value', { yScale: newY }).dispatch('input') return svg.node(); }39:T6bb,viewof time_brush = { var time_brush = d3.brushX() .filter(function(event) { return event.shiftKey // return event.key == 'b' }) .keyModifiers(false) .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:T1ad9,viewof length_histogram_base_chart = { // one time setup 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", 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) svg.selectAll("#chart-title").remove() // remove old chart title dataGroup.attr("transform", `translate(${length_histogram_chart_params.margin.left}, ${length_histogram_chart_params.margin.top + length_histogram_chart_params.title_height})`) dataGroup.append("text") .attr("x", -length_histogram_chart_params.h/2) .attr("y", -2 * length_histogram_chart_params.margin.left/3) .attr("text-anchor", "middle") .attr("transform", `rotate(-90)`) .text("Catches") .attr("font-size", length_histogram_chart_params.xAxisLabelFontSize) dataGroup.append("text") .attr("x", length_histogram_chart_params.w/2) .attr("y", length_histogram_chart_params.h + length_histogram_chart_params.margin.top + 7*length_histogram_chart_params.margin.bottom/10) .attr("text-anchor", "middle") .text("Length (ft)") .attr("font-size", length_histogram_chart_params.yAxisLabelFontSize) const xAxis = d3.axisBottom(length_histogram_chart_params.xScale) .tickFormat(d3.format("d")) .tickSize(length_histogram_chart_params.xAxisTickSize) dataGroup.append("g") .attr("transform", `translate(0, ${length_histogram_chart_params.h})`) .attr("class", "xAxis-lengths") .call(xAxis) .call(g => g.select(".domain").remove()); d3.selectAll(".xAxis-lengths>.tick>text") .style("font-size",time_line_chart_params.xAxisLabelTickFontSize); const y = d3.scaleLinear() .domain([0, d3.max(length_data, function(d) { return Number(d.count) })]) .range([ length_histogram_chart_params.h, 0]) .nice() const yAxis = d3.axisLeft(y) .tickFormat(function(d) { return d/1000 + " k" }) .ticks(6) .tickSize(length_histogram_chart_params.yAxisTickSize); const gY = dataGroup.append("g") .attr("class", "yAxis-lengths") .call(yAxis) .call(g => g.select(".domain").remove()); d3.selectAll(".yAxis-lengths>.tick>text") .style("font-size",time_line_chart_params.yAxisLabelTickFontSize); var zoom = d3.zoom() .scaleExtent([1,4]) .extent([[0, 0], [length_histogram_chart_params.w, length_histogram_chart_params.h]]) .translateExtent([[0, 0], [length_histogram_chart_params.w, length_histogram_chart_params.h]]) .filter(function(event) { return !event.shiftKey // return !(event.key == 'b') }) .on("zoom", updateChart) svg.call(zoom) var clipRect = dataGroup.append("clipPath") .attr("id", "length-histogram-clip") .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', length_histogram_chart_params.w) .attr('height', length_histogram_chart_params.h) var gridlines = dataGroup.append("g") .attr("class", "gridlines") .attr("clip-path", "url(#length-histogram-clip)") .selectAll("line") .data(y.ticks()) .enter() .append('line') .attr('x1', 0) .attr('x2', length_histogram_chart_params.w) .attr('y1', d => y(d)) .attr('y2', d => y(d)) .style("stroke", "grey") .style("opacity", 0.2) var unfiltered_data = dataGroup.append('g') .attr("class", "unfiltered-data") .selectAll("rect") .data(length_data) .enter() .append("rect") .attr("clip-path", "url(#length-histogram-clip)") .attr("x", function(d) {return length_histogram_chart_params.xScale(d.bin_floor)}) .attr("y", function(d) {return y(d.count)}) .attr("width", function(d) { return length_histogram_chart_params.w/length_data.length-length_histogram_chart_params.barPadding; }) .attr("height", function(d) { return length_histogram_chart_params.h - y(d.count); }) .style("fill", "gray") .style("fill-opacity", 0.3) var newY = y function updateChart(event) { newY = event.transform.rescaleY(y); gY.call(yAxis.scale(newY)) .call(g => g.select(".domain").remove()); d3.selectAll(".yAxis-lengths>.tick>text") .style("font-size",time_line_chart_params.yAxisLabelTickFontSize); gridlines.attr('x1', 0) .attr('x2', length_histogram_chart_params.w) .attr('y1', d => newY(d)) .attr('y2', d => newY(d)) .style("stroke", "grey") .style("opacity", 0.2) unfiltered_data.attr("x", function(d) {return length_histogram_chart_params.xScale(d.bin_floor)}) .attr("y", function(d) {return newY(d.count)}) .attr("width", function(d) { return length_histogram_chart_params.w/length_data.length-length_histogram_chart_params.barPadding; }) .attr("height", function(d) { return length_histogram_chart_params.h - newY(d.count) > 0 ? length_histogram_chart_params.h - newY(d.count) : 0; }) .style("fill", "gray") .style("fill-opacity", 0.3) svg.property('value', { yScale: newY, }).dispatch('input') } // chart title svg.append("text") .attr("id", "chart-title") .attr("x", width * 0.01) .attr("y", length_histogram_chart_params.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") svg.property('value', {yScale: newY}).dispatch('input') return svg.node(); }48:T706,viewof length_brush = { var length_brush = d3.brushX() .filter(function(event) { return event.shiftKey }) .keyModifiers(false) .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:[{"id":"21a2119846385a161d22dc71bc1bff2f975e89597f6b9f8f29b0f6c0cd2bc711e881f430501f90b7e901dc5fc4d73f88e6341b827d5c3a15f2da68c3f9f24a0a","href":"https://static.observableusercontent.com/files/21a2119846385a161d22dc71bc1bff2f975e89597f6b9f8f29b0f6c0cd2bc711e881f430501f90b7e901dc5fc4d73f88e6341b827d5c3a15f2da68c3f9f24a0a","name":"comments.png","type":"image/png","lastModified":1683666041597.409,"size":84671},{"id":"1ba00012a276fa51582cae66539cdc225792a44fc7837d56e3df5e3761de826a1c618158d7a259d3e985d7c902ac8900214390538102985a81098796414fe18e","href":"https://static.observableusercontent.com/files/1ba00012a276fa51582cae66539cdc225792a44fc7837d56e3df5e3761de826a1c618158d7a259d3e985d7c902ac8900214390538102985a81098796414fe18e","name":"whale_vis_screenshot.png","type":"image/png","lastModified":1683666041597.409,"size":37369}] 2c:{"id":"f3ea4baa85d37caf","slug":null,"title":"WhaleVis Dashboard","thumbnail":"4efd28cf488f00de352a25058bd37248a52cc5be500474652b232b6748b43d3b","access_level":"public","create_time":"$D2023-05-09T21:00:41.597Z","update_time":"$D2023-05-09T21:04:55.208Z","view_time":null,"first_public_time":"$D2023-05-09T21:00:41.597Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"38049f1a6f4ca8ab","login":"weijuntan","name":"Wei Jun","avatar_url":null,"tier":"starter_2024"},"version":5081,"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"},{"type":"individual","id":"c9d80d9dc12c834b","login":"ameyabp","name":"Ameya Patil","avatar_url":"https://avatars-next.observableusercontent.com/29a3d196e70adef9387be2b989575ce7be3de4c516965ed39fc86e0deb5cc722","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"WhaleVis Dashboard","cells":[{"id":0,"value":"# WhaleVis Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1161,"value":"Please wait around 30 seconds for the data to load, check [usage notes](https://observablehq.com/@whales/whale-vis-dashboard#cell-4485) meanwhile","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":4911,"value":"viewof toggle_geo_filter = Inputs.button(\"Toggle Geo Filter\", {\n value: false,\n reduce: function(value) {\n if (!value) {\n d3.select(\"#geo-brush\").attr(\"pointer-events\", \"all\")\n d3.select(\"#geo-brush\").select(\"rect.overlay\").attr(\"pointer-events\", \"all\")\n }\n else {\n d3.select(\"#geo-brush\").attr(\"pointer-events\", \"none\")\n d3.select(\"#geo-brush\").select(\"rect.overlay\").attr(\"pointer-events\", \"none\")\n d3.select(\"#geo-brush\").select(\"rect.selection\").attr(\"width\", 0).attr(\"height\", 0)\n d3.select(\"#geo-brush\").property(\"value\", {\n lonmin: -180,\n lonmax: 180,\n latmin: -90,\n latmax: 90 \n }).dispatch(\"input\")\n d3.selectAll(\"#spherical-bbox\").selectAll(\"path\").remove();\n }\n return !value\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4099,"value":"md`Geo filter is ${toggle_geo_filter ? 'enabled => lonmin: ' + geo_bounding_box.lonmin + ', lonmax: ' + geo_bounding_box.lonmax + ', latmin: ' + geo_bounding_box.latmin + ', latmax: ' + geo_bounding_box.latmax : 'disabled'}`","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":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":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":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":2044,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":726,"value":"species_select = species_click_listener","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":4485,"value":"$2e","pinned":false,"hidden":false,"mode":"md","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":"$2f","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":1542,"value":"function clearBaseMap() {\n d3.selectAll(\"#geo-zoom\").remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1601,"value":"$30","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":602,"value":"// viewof size_encoding = Inputs.radio([\"Catch Numbers\", \"Catch per Unit Effort\"], {label: \"Size Encoding:\", value: \"Catch Numbers\"})\nsize_encoding = \"Catch Numbers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1563,"value":"size_scale = d3.scaleSqrt()\n .domain([0, d3.max(geoMapNodesData, 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 (ft)')\n return d3.scaleSequential(d3.interpolateReds).domain([length_range_full.begin, length_range_full.end])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1492,"value":"tooltip = {\n const div_tooltip = d3.select(\"div.main-container\")\n .select(\"#tooltip\")\n .classed(\"tooltip\", true);\n \n // create a new tooltip,\n // passing it a selection for the tooltip's DOM element.\n const tooltip = new Tooltip(div_tooltip, setTooltipContent);\n\n return tooltip\n}","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 + \"
\" + (Number(d.size_agg) % 1 === 0 ? \"Catches: \" : \"Whales per day: \") + d3.format(Number(d.size_agg) % 1 === 0 ? \",\" : \",.2f\")(Number(d.size_agg)) + \"
\" + (typeof(d.color_agg) === 'string' ? d.color_agg : (Number(d.color_agg) === 0 ? 'NA' : (d3.format(\",.2f\")(Number(d.color_agg)) + \" feet\")))\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":1082,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1553,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1623,"value":"{\n drawNodesData();\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_bounding_box.lonmin === -180 && geo_bounding_box.lonmax === 180 && geo_bounding_box.latmin === -90 && geo_bounding_box.latmax === 90)\n return ''\n \n else if (!geo_bounding_box.cross_180)\n return `Lon BETWEEN ${geo_bounding_box.lonmin} AND ${geo_bounding_box.lonmax} AND Lat BETWEEN ${geo_bounding_box.latmin} AND ${geo_bounding_box.latmax}`\n \n else\n return `(lon BETWEEN ${geo_bounding_box.lonmin} AND 180 OR lon BETWEEN -180 AND ${geo_bounding_box.lonmax}) AND lat BETWEEN ${geo_bounding_box.latmin} AND ${geo_bounding_box.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) ? `Year 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":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4906,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5042,"value":" geo_bounding_box = ({\n lonmin: Math.round(geo_brush.lonmin),\n lonmax: Math.round(geo_brush.lonmax),\n latmin: Math.round(geo_brush.latmin),\n latmax: Math.round(geo_brush.latmax),\n cross_180: geo_brush.lonmin > geo_brush.lonmax ? true : false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"geoMapNodesData = catchDB.query(geoMapNodesQuery)","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":4227,"value":"time_line_chart_params = {\n const margin = {top: 10, bottom: 60, left: 80, right: 20}\n const title_height = 50\n const h = 380 - margin.top - margin.bottom - title_height\n const w = width - margin.left - margin.right\n \n const x = d3.scaleLinear()\n .domain([date_time_range.begin, date_time_range.end])\n .range([ 0, w ])\n .nice()\n\n const xAxisLabelFontSize = \"30px\"\n const yAxisLabelFontSize = \"30px\"\n const xAxisLabelTickFontSize = \"18px\"\n const yAxisLabelTickFontSize = \"18px\"\n const xAxisTickSize = 5\n const yAxisTickSize = 3\n \n return {\n margin: margin,\n h: h,\n w: w,\n title_height: title_height,\n xScale: x,\n xAxisLabelFontSize: xAxisLabelFontSize,\n yAxisLabelFontSize: yAxisLabelFontSize,\n xAxisLabelTickFontSize: xAxisLabelTickFontSize,\n yAxisLabelTickFontSize: yAxisLabelTickFontSize,\n xAxisTickSize: xAxisTickSize,\n yAxisTickSize: yAxisTickSize\n }\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 .attr(\"clip-path\", \"url(#timeline-clip)\")\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_base_chart.yScale(0))\n .y1(function(d) { return time_line_base_chart.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":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":5079,"value":"$3d","pinned":true,"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":4284,"value":"length_histogram_chart_params = {\n const margin = {top: 10, bottom: 60, left: 80, right: 20}\n const title_height = 50\n const h = 380 - margin.top - margin.bottom - title_height\n const w = width - margin.left - margin.right\n const barPadding = 12\n\n const x = d3.scaleLinear()\n .domain([length_range_full.begin, length_range_full.end])\n .range([ 0, w ])\n .nice()\n\n const xAxisLabelFontSize = \"30px\"\n const yAxisLabelFontSize = \"30px\"\n const xAxisLabelTickFontSize = \"18px\"\n const yAxisLabelTickFontSize = \"18px\"\n const xAxisTickSize = 5\n const yAxisTickSize = 3\n \n return {\n margin: margin,\n title_height: title_height,\n h: h,\n w: w,\n barPadding: barPadding,\n xScale: x,\n xAxisLabelFontSize: xAxisLabelFontSize,\n yAxisLabelFontSize: yAxisLabelFontSize,\n xAxisLabelTickFontSize: xAxisLabelTickFontSize,\n yAxisLabelTickFontSize: yAxisLabelTickFontSize,\n xAxisTickSize: xAxisTickSize,\n yAxisTickSize: yAxisTickSize\n }\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(\"clip-path\", \"url(#length-histogram-clip)\")\n .attr(\"x\", function(d) {return length_histogram_chart_params.xScale(d.bin_floor)})\n .attr(\"y\", function(d) {return length_histogram_base_chart.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) { \n return length_histogram_chart_params.h - length_histogram_base_chart.yScale(d.count) > 0 ? length_histogram_chart_params.h - length_histogram_base_chart.yScale(d.count) : 0; \n })\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"}],"files":"$W49","stdlib":"1","titling":"auto"}} 2d:"$2c:body"