29:null 2a:["$","title",null,{"children":"Scrollable Bar Chart | Thu Do's Projects | Observable"}] 2f:T255d,function landslidebarchart() { const visWidth = 360; const visHeight = 400; const margin = ({top: 10, bottom: 50, left: 112, right: 10}); const totalHeight = 3000 ; // Create a div that holds two svg elements: one for the main chart and horizontal axis, // which moves as the user scrolls the content; the other for the vertical axis (which // doesn’t scroll). // Create a parent div to hold all elements const parent = d3.create("div") .style("position", "relative") .style("width", `${visWidth}px`); // Create a non-scrollable SVG for the title and x-axis const topSvg = parent.append("svg") .attr("width", visWidth) .attr("height", 50) .style("z-index", 2); // Add main title topSvg.append("text") .attr("x", 160) .attr("y", 20) .attr("text-anchor", "start") .attr("font-size", "18px") .attr("font-weight", "bold") .text("Total Landslides:"); // Add subtitle const subtitle = topSvg.append("text") .attr("x", 310) .attr("y", 20) .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-style", "italic") .text("Calculating..."); // Function for updating subtitle, 'totalLandslides' could be a let if recalculated within the scope: function updateSubtitle(totalLandslides) { subtitle.text(`${totalLandslides}`); } // Set up the horizontal scale for the bar chart let x = d3.scaleLinear() .domain([0, d3.max(barchartdata, d => d.count)]).nice() .range([0, 150]); // Set up the vertical scale for the bar chart let y = d3.scaleBand() .domain(barchartdata.array('country_name')) .range([0, totalHeight]) .padding(0.2); let usedLabels = new Set(); // Set to track labels already used // Create the bottom axis using the horizontal scale const xAxis = d3.axisBottom(x) .ticks(5) .tickFormat(d => { // Exclude numbers less than one or any decimal values from display if ( 0 < d < 1 || d % 1 !== 0) { return ''; } let label; if (d >= 1000) { // Format large numbers with SI-prefix and round them label = d3.format("~s")(Math.round(d)); } else { // Convert integers to string directly without rounding, since we exclude decimals label = d.toString(); } // Check if this label has already been used if (usedLabels.has(label)) { // Return an empty string for duplicate labels return ''; } else { // Add the label to the set and return it usedLabels.add(label); return label; } }); // Create the left axis using the vertical scale const yAxis = d3.axisLeft(y); // Append x-axis to topSvg topSvg.append("g") .attr("transform", `translate(${margin.left + 50}, 45)`) // Adjust y position to leave space for title .call(xAxis) .call(g => g.select('.domain').remove()) .selectAll(".tick text") // Select all the tick text elements .attr("y", -10) // Move the text up .attr("x", 0) .attr("dy", ".35em") // Vertically center the text .style("text-anchor", "middle") // Center the text horizontally relative to the tick .selectAll(".tick line") // Select all the tick lines .attr("y2", 10); // Length of the tick lines; adjust as necessary // Create a scrolling div for the vertical axis and bars const scrollDiv = parent.append("div") .style("position", "relative") .style("width", `${visWidth + 20}px`) .style("height", `${visHeight - 300}px`) // Visible height for Body; Adjust height accounting for the space occupied by topSvg .style("overflow-y", "scroll"); // Create an SVG within the scrolling div for the bars and y-axis const svgV = scrollDiv.append("svg") .attr("width", visWidth) // Adjust width if needed .attr("height", totalHeight + margin.bottom) .style("display", "block"); // Add the vertical axis to the SVG and label it svgV.append('g') .attr("transform", `translate(${margin.left + 50}, 0)`) .call(yAxis) // Create a group for each bar to hold both the rect and text elements const barGroups = svgV.selectAll('.bar-group') .data(barchartdata) .enter().append('g') .attr('class', 'bar-group'); // Append a rect to each group for the bar barGroups.append('rect') .attr('x', margin.left + 50) .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()) .attr('fill', '#ffd4b3') .on('mouseover', function(event, d) { // Change the color of the corresponding country on the map d3.select(`#country-${d.country_name.replace(/\s/g, '-')}`) .attr('fill', '#ffd4b3'); }) .on('mouseout', function(event, d) { // Restore the original green color of the country d3.select(`#country-${d.country_name.replace(/\s/g, '-')}`) .attr('fill', '#c3f4b7'); }); // Append a text element to each group for the label barGroups.append('text') .attr('class', 'bar-label') .attr('x', d => x(d.count) + 55 + margin.left) // Add a small offset to x position for the label to appear next to the bar .attr('y', d => y(d.country_name) + y.bandwidth() / 2) .attr('dy', '0.35em') // Adjust for vertical centering of text within the bar .text(d => d.count) .attr('fill', 'gray') .attr('font-family', 'Arial') //, Arial, sans-serif)//'sans-serif') .attr('font-size', 16); // Initialize the vertical scroll position of the chart parent.node().scrollTop = 0; // This sets the scroll position to the top of the chart let selectedYearRange = { minYear: undefined, maxYear: undefined }; let selectedCriteriaMap = new Map(); function createfinaldataset (data){ return data .groupby('country_name') .rollup({ count: d => op.count() }) .orderby(aq.desc('count')); } // Function to apply filters based on selected criteria and year range function applyFilters() { let filteredData = FinalCombinedData .filter(aq.escape(d => (selectedYearRange.minYear === undefined || d.year >= selectedYearRange.minYear) && (selectedYearRange.maxYear === undefined || d.year <= selectedYearRange.maxYear) && (selectedCriteriaMap.size === 0 || selectedCriteriaMap.has(`${d.landslide_size}:${d.landslide_trigger}`)) )); let currentFilteredData = createfinaldataset(filteredData); redrawDataPoints(currentFilteredData); let totalLandslides = d3.sum(currentFilteredData, d => d.count); // Use let because this value will be recalculated updateSubtitle(totalLandslides); } // Function to update the map based on a year range function updateMapDataB(minYear, maxYear) { selectedYearRange.minYear = minYear; selectedYearRange.maxYear = maxYear; applyFilters(); } // Function to update data point colors based on selection criteria function updateDataPointsB(newCriteriaMap) { selectedCriteriaMap = new Set(Array.from(newCriteriaMap) .filter(([key, value]) => value) .map(([key, _]) => `${key.landslide_size}:${key.landslide_trigger}`)); applyFilters(); } // Function to update the display of data points function redrawDataPoints(data) { // Clear the usedLabels set at the beginning of the redraw process usedLabels.clear(); const barHeight = 20; // Example fixed height for each bar const chartHeight = data.numRows() * barHeight; // Update the scales based on the new data x.domain([0, d3.max(data, d => d.count)]).nice(); y.range([0, chartHeight]) .domain(data.array('country_name')) .padding(0.1); // Adjust padding as needed // Update the vertical axis in the SVG topSvg.select("g").call(xAxis) .call(g => g.select('.domain').remove()) .selectAll(".tick text") // Select all the tick text elements .attr("y", -10) // Move the text up .attr("x", 0) .attr("dy", ".35em") // Vertically center the text .style("text-anchor", "middle") // Center the text horizontally relative to the tick .selectAll(".tick line") // Select all the tick lines .attr("y2", 10); // Length of the tick lines; adjust as necessary; svgV.select("g").call(yAxis); const update = svgV.selectAll('.bar-group').data(data, d => d.country_name); update.exit().remove(); // Update existing elements update.select('rect') // Update the rectangles for existing data points .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()); update.select('text') // Update the text for existing data points .attr('x', d => x(d.count) + 55 + margin.left) .attr('y', d => y(d.country_name) + y.bandwidth() / 2 ) .text(d => d.count); // Add new elements const enter = update.enter().append('g') .attr('class', 'bar-group'); enter.append('rect') .attr('x', margin.left + 50) .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()) .attr('fill', '#ffd4b3'); enter.append('text') .attr('class', 'bar-label') .attr('x', d => x(d.count) + 55 + margin.left) .attr('y', d => y(d.country_name) + y.bandwidth() / 2) .attr('dy', '0.35em') .text(d => d.count) .attr('fill', 'gray') .attr('font-family', 'Arial') .attr('font-size', 16); } // Initialize with the full data set applyFilters(); // Return the svg and make updateDataPoints accessible from outside return { BarChartparent: parent.node(), updateDataPointsB, updateMapDataB}; }30:T251c,function fatalitiesbarchart() { const visWidth = 360; const visHeight = 400; const margin = ({top: 10, bottom: 50, left: 112, right: 10}); const totalHeight = 3000 ; // Create a div that holds two svg elements: one for the main chart and horizontal axis, // which moves as the user scrolls the content; the other for the vertical axis (which // doesn’t scroll). // Create a parent div to hold all elements const parent = d3.create("div") .style("position", "relative") .style("width", `${visWidth}px`); // Create a non-scrollable SVG for the title and x-axis const topSvg = parent.append("svg") .attr("width", visWidth) .attr("height", 50) .style("z-index", 2); // Add main title topSvg.append("text") .attr("x", 160) .attr("y", 20) .attr("text-anchor", "start") .attr("font-size", "18px") .attr("font-weight", "bold") .text("Total Fatalities:"); // Add subtitle const subtitle = topSvg.append("text") .attr("x", 295) .attr("y", 20) .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-style", "italic") .text("Calculating..."); // Function for updating subtitle, 'totalFatalities' could be a let if recalculated within the scope: function updateSubtitle(totalFatalities) { subtitle.text(`${totalFatalities}`); } // Set up the horizontal scale for the bar chart let x = d3.scaleLinear() .domain([0, d3.max(barchartdata1, d => d.count)]).nice() .range([0, 150]); // Set up the vertical scale for the bar chart let y = d3.scaleBand() .domain(barchartdata1.array('country_name')) .range([0, totalHeight]) .padding(0.2); let usedLabels = new Set(); // Set to track labels already used const xAxis = d3.axisBottom(x) .ticks(5) .tickFormat(d => { // Exclude numbers less than one or any decimal values from display if ( 0 < d < 1 || d % 1 !== 0) { return ''; } let label; if (d >= 1000) { // Format large numbers with SI-prefix and round them label = d3.format("~s")(Math.round(d)); } else { // Convert integers to string directly without rounding, since we exclude decimals label = d.toString(); } // Check if this label has already been used if (usedLabels.has(label)) { // Return an empty string for duplicate labels return ''; } else { // Add the label to the set and return it usedLabels.add(label); return label; } }); // Create the left axis using the vertical scale const yAxis = d3.axisLeft(y); // Append x-axis to topSvg topSvg.append("g") .attr("transform", `translate(${margin.left + 50}, 45)`) // Adjust y position to leave space for title .call(xAxis) .call(g => g.select('.domain').remove()) .selectAll(".tick text") // Select all the tick text elements .attr("y", -10) // Move the text up .attr("x", 0) .attr("dy", ".35em") // Vertically center the text .style("text-anchor", "middle") // Center the text horizontally relative to the tick .selectAll(".tick line") // Select all the tick lines .attr("y2", 10); // Length of the tick lines; adjust as necessary // Create a scrolling div for the vertical axis and bars const scrollDiv = parent.append("div") .style("position", "relative") .style("width", `${visWidth + 20}px`) .style("height", `${visHeight - 300}px`) // Visible height for Body; Adjust height accounting for the space occupied by topSvg .style("overflow-y", "scroll"); // Create an SVG within the scrolling div for the bars and y-axis const svgV = scrollDiv.append("svg") .attr("width", visWidth) .attr("height", totalHeight + margin.bottom) .style("display", "block"); // Add the vertical axis to the SVG and label it svgV.append('g') .attr("transform", `translate(${margin.left + 50}, 0)`) .call(yAxis) // Create a group for each bar to hold both the rect and text elements const barGroups = svgV.selectAll('.bar-group') .data(barchartdata1) .enter().append('g') .attr('class', 'bar-group'); // Append a rect to each group for the bar barGroups.append('rect') .attr('x', margin.left + 50) .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()) .attr('fill', '#ffd4b3') .on('mouseover', function(event, d) { // Change the color of the corresponding country on the map d3.select(`#country-${d.country_name.replace(/\s/g, '-')}`) .attr('fill', '#ffd4b3'); }) .on('mouseout', function(event, d) { // Restore the original green color of the country d3.select(`#country-${d.country_name.replace(/\s/g, '-')}`) .attr('fill', '#c3f4b7'); }); // Append a text element to each group for the label barGroups.append('text') .attr('class', 'bar-label') .attr('x', d => x(d.count) + 55 + margin.left) // Add a small offset to x position for the label to appear next to the bar .attr('y', d => y(d.country_name) + y.bandwidth() / 2) .attr('dy', '0.35em') // Adjust for vertical centering of text within the bar .text(d => d.count) .attr('fill', 'gray') .attr('font-family', 'Arial') //, Arial, sans-serif)//'sans-serif') .attr('font-size', 16); // Initialize the vertical scroll position of the chart parent.node().scrollTop = 0; // This sets the scroll position to the top of the chart let selectedYearRange = { minYear: undefined, maxYear: undefined }; let selectedCriteriaMap = new Map(); function createfinaldataset (data){ return data .groupby('country_name') .rollup({ count: d => op.sum(d.fatalities) }) .orderby(aq.desc('count')); } // Function to apply filters based on selected criteria and year range function applyFilters() { let filteredData = FinalCombinedData .filter(aq.escape(d => (selectedYearRange.minYear === undefined || d.year >= selectedYearRange.minYear) && (selectedYearRange.maxYear === undefined || d.year <= selectedYearRange.maxYear) && (selectedCriteriaMap.size === 0 || selectedCriteriaMap.has(`${d.landslide_size}:${d.landslide_trigger}`)) )); let currentFilteredData = createfinaldataset(filteredData); redrawDataPoints(currentFilteredData); let totalFatalities = d3.sum(currentFilteredData, d => d.count); // Use let because this value will be recalculated updateSubtitle(totalFatalities); } // Function to update the map based on a year range function updateMapDataB1(minYear, maxYear) { selectedYearRange.minYear = minYear; selectedYearRange.maxYear = maxYear; applyFilters(); } // Function to update data point colors based on selection criteria function updateDataPointsB1(newCriteriaMap) { selectedCriteriaMap = new Set(Array.from(newCriteriaMap) .filter(([key, value]) => value) .map(([key, _]) => `${key.landslide_size}:${key.landslide_trigger}`)); applyFilters(); } // Function to update the display of data points function redrawDataPoints(data) { // Clear the usedLabels set at the beginning of the redraw process usedLabels.clear(); const barHeight = 20; // Example fixed height for each bar const chartHeight = data.numRows() * barHeight; // Update the scales based on the new data x.domain([0, d3.max(data, d => d.count)]).nice(); y.range([0, chartHeight]) .domain(data.array('country_name')) .padding(0.1); // Adjust padding as needed // Update the vertical axis in the SVG topSvg.select("g").call(xAxis) .call(g => g.select('.domain').remove()) .selectAll(".tick text") // Select all the tick text elements .attr("y", -10) // Move the text up .attr("x", 0) .attr("dy", ".35em") // Vertically center the text .style("text-anchor", "middle") // Center the text horizontally relative to the tick .selectAll(".tick line") // Select all the tick lines .attr("y2", 10); // Length of the tick lines; adjust as necessary; svgV.select("g").call(yAxis); const update = svgV.selectAll('.bar-group').data(data, d => d.country_name); update.exit().remove(); // Update existing elements update.select('rect') // Update the rectangles for existing data points .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()); update.select('text') // Update the text for existing data points .attr('x', d => x(d.count) + 55 + margin.left) .attr('y', d => y(d.country_name) + y.bandwidth() / 2 ) .text(d => d.count); // Add new elements const enter = update.enter().append('g') .attr('class', 'bar-group'); enter.append('rect') .attr('x', margin.left + 50) .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()) .attr('fill', '#ffd4b3'); enter.append('text') .attr('class', 'bar-label') .attr('x', d => x(d.count) + 55 + margin.left) .attr('y', d => y(d.country_name) + y.bandwidth() / 2) .attr('dy', '0.35em') .text(d => d.count) .attr('fill', 'gray') .attr('font-family', 'Arial') .attr('font-size', 16); } // Initialize with the full data set applyFilters(); // Return the svg and make updateDataPoints accessible from outside return { BarChart1parent: parent.node(), updateDataPointsB1, updateMapDataB1}; }31:T2547,function injuriesbarchart() { const visWidth = 360; const visHeight = 400; const margin = ({top: 10, bottom: 50, left: 112, right: 10}); const totalHeight = 3000 ; // Create a div that holds two svg elements: one for the main chart and horizontal axis, // which moves as the user scrolls the content; the other for the vertical axis (which // doesn’t scroll). // Create a parent div to hold all elements const parent = d3.create("div") .style("position", "relative") .style("width", `${visWidth}px`); // Create a non-scrollable SVG for the title and x-axis const topSvg = parent.append("svg") .attr("width", visWidth) .attr("height", 50) .style("z-index", 2); // Add main title topSvg.append("text") .attr("x", 160) .attr("y", 20) .attr("text-anchor", "start") .attr("font-size", "18px") .attr("font-weight", "bold") .text("Total Injuries:"); // Add subtitle const subtitle = topSvg.append("text") .attr("x", 280) .attr("y", 20) .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-style", "italic") .text("Calculating..."); // Function for updating subtitle, 'totalInjuries' could be a let if recalculated within the scope: function updateSubtitle(totalInjuries) { subtitle.text(`${totalInjuries}`); } // Set up the horizontal scale for the bar chart let x = d3.scaleLinear() .domain([0, d3.max(barchartdata2, d => d.count)]).nice() .range([0, 150]); // Set up the vertical scale for the bar chart let y = d3.scaleBand() .domain(barchartdata2.array('country_name')) .range([0, totalHeight]) .padding(0.2); let usedLabels = new Set(); // Set to track labels already used // Create the bottom axis using the horizontal scale const xAxis = d3.axisBottom(x) .ticks(5) .tickFormat(d => { // Exclude numbers less than one or any decimal values from display if ( 0 < d < 1 || d % 1 !== 0) { return ''; } let label; if (d >= 1000) { // Format large numbers with SI-prefix and round them label = d3.format("~s")(Math.round(d)); } else { // Convert integers to string directly without rounding, since we exclude decimals label = d.toString(); } // Check if this label has already been used if (usedLabels.has(label)) { // Return an empty string for duplicate labels return ''; } else { // Add the label to the set and return it usedLabels.add(label); return label; } }); // Create the left axis using the vertical scale const yAxis = d3.axisLeft(y); // Append x-axis to topSvg topSvg.append("g") .attr("transform", `translate(${margin.left + 50}, 45)`) // Adjust y position to leave space for title .call(xAxis) .call(g => g.select('.domain').remove()) .selectAll(".tick text") // Select all the tick text elements .attr("y", -10) // Move the text up .attr("x", 0) .attr("dy", ".35em") // Vertically center the text .style("text-anchor", "middle") // Center the text horizontally relative to the tick .selectAll(".tick line") // Select all the tick lines .attr("y2", 10); // Length of the tick lines; adjust as necessary // Create a scrolling div for the vertical axis and bars const scrollDiv = parent.append("div") .style("position", "relative") .style("width", `${visWidth + 20}px`) .style("height", `${visHeight - 300}px`) // Visible height for Body; Adjust height accounting for the space occupied by topSvg .style("overflow-y", "scroll"); // Create an SVG within the scrolling div for the bars and y-axis const svgV = scrollDiv.append("svg") .attr("width", visWidth) .attr("height", totalHeight + margin.bottom) .style("display", "block"); // Add the vertical axis to the SVG and label it svgV.append('g') .attr("transform", `translate(${margin.left + 50}, 0)`) .call(yAxis) // Create a group for each bar to hold both the rect and text elements const barGroups = svgV.selectAll('.bar-group') .data(barchartdata2) .enter().append('g') .attr('class', 'bar-group'); // Append a rect to each group for the bar barGroups.append('rect') .attr('x', margin.left + 50) .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()) .attr('fill', '#ffd4b3') .on('mouseover', function(event, d) { // Change the color of the corresponding country on the map d3.select(`#country-${d.country_name.replace(/\s/g, '-')}`) .attr('fill', '#ffd4b3'); }) .on('mouseout', function(event, d) { // Restore the original green color of the country d3.select(`#country-${d.country_name.replace(/\s/g, '-')}`) .attr('fill', '#c3f4b7'); }); // Append a text element to each group for the label barGroups.append('text') .attr('class', 'bar-label') .attr('x', d => x(d.count) + 55 + margin.left) // Add a small offset to x position for the label to appear next to the bar .attr('y', d => y(d.country_name) + y.bandwidth() / 2) .attr('dy', '0.35em') // Adjust for vertical centering of text within the bar .text(d => d.count) .attr('fill', 'gray') .attr('font-family', 'Arial') //, Arial, sans-serif)//'sans-serif') .attr('font-size', 16); // Initialize the vertical scroll position of the chart parent.node().scrollTop = 0; // This sets the scroll position to the top of the chart let selectedYearRange = { minYear: undefined, maxYear: undefined }; let selectedCriteriaMap = new Map(); function createfinaldataset (data){ return data .groupby('country_name') .rollup({ count: d => op.sum(d.injuries) }) .orderby(aq.desc('count')); } // Function to apply filters based on selected criteria and year range function applyFilters() { let filteredData = FinalCombinedData .filter(aq.escape(d => (selectedYearRange.minYear === undefined || d.year >= selectedYearRange.minYear) && (selectedYearRange.maxYear === undefined || d.year <= selectedYearRange.maxYear) && (selectedCriteriaMap.size === 0 || selectedCriteriaMap.has(`${d.landslide_size}:${d.landslide_trigger}`)) )); let currentFilteredData = createfinaldataset(filteredData); redrawDataPoints(currentFilteredData); let totalInjuries = d3.sum(currentFilteredData, d => d.count); // Use let because this value will be recalculated updateSubtitle(totalInjuries); } // Function to update the map based on a year range function updateMapDataB2(minYear, maxYear) { selectedYearRange.minYear = minYear; selectedYearRange.maxYear = maxYear; applyFilters(); } // Function to update data point colors based on selection criteria function updateDataPointsB2(newCriteriaMap) { selectedCriteriaMap = new Set(Array.from(newCriteriaMap) .filter(([key, value]) => value) .map(([key, _]) => `${key.landslide_size}:${key.landslide_trigger}`)); applyFilters(); } // Function to update the display of data points function redrawDataPoints(data) { // Clear the usedLabels set at the beginning of the redraw process usedLabels.clear(); const barHeight = 20; // Example fixed height for each bar const chartHeight = data.numRows() * barHeight; // Update the scales based on the new data x.domain([0, d3.max(data, d => d.count)]).nice(); y.range([0, chartHeight]) .domain(data.array('country_name')) .padding(0.1); // Adjust padding as needed // Update the vertical axis in the SVG topSvg.select("g").call(xAxis) .call(g => g.select('.domain').remove()) .selectAll(".tick text") // Select all the tick text elements .attr("y", -10) // Move the text up .attr("x", 0) .attr("dy", ".35em") // Vertically center the text .style("text-anchor", "middle") // Center the text horizontally relative to the tick .selectAll(".tick line") // Select all the tick lines .attr("y2", 10); // Length of the tick lines; adjust as necessary; svgV.select("g").call(yAxis); const update = svgV.selectAll('.bar-group').data(data, d => d.country_name); update.exit().remove(); // Update existing elements update.select('rect') // Update the rectangles for existing data points .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()); update.select('text') // Update the text for existing data points .attr('x', d => x(d.count) + 55 + margin.left) .attr('y', d => y(d.country_name) + y.bandwidth() / 2 ) .text(d => d.count); // Add new elements const enter = update.enter().append('g') .attr('class', 'bar-group'); enter.append('rect') .attr('x', margin.left + 50) .attr('y', d => y(d.country_name)) .attr('width', d => x(d.count)) .attr('height', y.bandwidth()) .attr('fill', '#ffd4b3'); enter.append('text') .attr('class', 'bar-label') .attr('x', d => x(d.count) + 55 + margin.left) .attr('y', d => y(d.country_name) + y.bandwidth() / 2) .attr('dy', '0.35em') .text(d => d.count) .attr('fill', 'gray') .attr('font-family', 'Arial') .attr('font-size', 16); } // Initialize with the full data set applyFilters(); // Return the svg and make updateDataPoints accessible from outside return { BarChart2parent: parent.node(), updateDataPointsB2, updateMapDataB2}; }32:T6d5,{ const { heatmapnode } = heatmap_f(); const { worldmapnode, updateDataPoints, updateMapData, tableComponent} = worldmap_f(); const { yearselectionnode } = yearSelection(); const { BarChartparent, updateDataPointsB, updateMapDataB} = landslidebarchart(); const { BarChart1parent, updateDataPointsB1, updateMapDataB1} = fatalitiesbarchart(); const { BarChart2parent, updateDataPointsB2, updateMapDataB2} = injuriesbarchart(); // update the bar chart when the selection changes d3.select(heatmapnode).on('input', () => { updateDataPoints(heatmapnode.value); // worldmap updateDataPointsB(heatmapnode.value); // barchart updateDataPointsB1(heatmapnode.value); //barchart1 updateDataPointsB2(heatmapnode.value); // barchart2 }); // Add an event listener to the year selection SVG element d3.select(yearselectionnode).on('input', function() { updateMapData(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); // worldmap updateMapDataB(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); // barchart updateMapDataB1(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); //barchart1 updateMapDataB2(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); // barchart2 }); // build HTML table to place charts in let table = html`

${heatmapnode}	${yearselectionnode}
${BarChartparent}
${BarChart1parent}
${BarChart2parent}
${worldmapnode}

`; return table; }33:[] 2d:{"id":"fd993f97b3cbb6ad","slug":null,"title":"Scrollable Bar Chart","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-04-12T21:55:32.593Z","update_time":"$D2024-05-03T14:51:32.729Z","view_time":null,"first_public_time":"$D2024-09-22T19:03:19.952Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c9445d996e926013","login":"thu-m-do","name":"Thu Do's Projects","avatar_url":"https://avatars-next.observableusercontent.com/d8ef78bcc00300c6d4cb29de21fa3c1095bd7a096c3b591ba142910a2987096a","tier":"starter_2024"},"version":263,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3a2250b1e6f818d","login":"thu-do","name":"Thu Do","avatar_url":"https://avatars-next.observableusercontent.com/9ef7da497f91a1afdf4c3b9887abf669d24b03a241b851559ad32d73632b9a8d","tier":null}],"members":[{"type":"individual","id":"d3a2250b1e6f818d","login":"thu-do","name":"Thu Do","avatar_url":"https://avatars-next.observableusercontent.com/9ef7da497f91a1afdf4c3b9887abf669d24b03a241b851559ad32d73632b9a8d","tier":null,"role":"editor"},{"type":"team","id":"c9445d996e926013","login":"thu-m-do","name":"Thu Do's Projects","avatar_url":"https://avatars-next.observableusercontent.com/d8ef78bcc00300c6d4cb29de21fa3c1095bd7a096c3b591ba142910a2987096a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scrollable Bar Chart","cells":[{"id":0,"value":"# Scrollable Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"The code below shows the top 10 countries with the highest number of landslides from 1988 to 2017. In preparing the data, I created a new Arquero table, called `country_landslides`, using the `landslide_data` dataset and starting with a `groupby()` method to aggregate the data by country. I then filtered out rows with empty values in the `country_name` column using `filter()`. To calculate the landslide count for each country, I applied the `rollup()` method and `count()` operator. To view the top 10 countries with the most landslides, I first sorted the data in descending order using the `orderby()` method and selected only the top 10 entries with the `slice()` method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"*Number of Landslides By Country Chart:*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {FinalCombinedData} from 'b2c8cbe63432e887'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"viewof barchartdata = FinalCombinedData\n .groupby('country_name')\n .rollup({\n count: d => op.count()\n })\n .orderby(aq.desc('count'))\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"*Number of Fatalities By Country Chart:*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":35,"value":"viewof barchartdata1 = FinalCombinedData \n .groupby('country_name')\n .rollup({\n count: d => op.sum(d.fatalities)\n })\n .orderby(aq.desc('count'))\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"*Number of Injuries By Country Chart:*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":40,"value":"viewof barchartdata2 = FinalCombinedData \n .groupby('country_name')\n .rollup({\n count: d => op.sum(d.injuries)\n })\n .orderby(aq.desc('count'))\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"*Test Interactivity with Heatmap, Year Selection, and World Map:*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"---\n## References\n\n1. \"Pannable chart\" : https://observablehq.com/@d3/pannable-chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"import {heatmap_f} from \"b2c8cbe63432e887\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"import {worldmap_f, AllCountries} from 'f332e8b34086ad5c'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"import {yearSelection} from 'e3cf46c39e449348'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"