25:["$","title",null,{"children":"Visualizing NYC Rat Sightings from 2010 to 2024 | Columbia Dataviz | Observable"}] 49:T174a,// Click on a bar and scroll down to see how rat sightings change for each borough over that year bars = { const data = ratData2; const borough_year = {}; data.forEach(d => { const year = d['Created Date'].split('/')[2]; const borough = d['Borough']; if (!borough_year[year]) { borough_year[year] = {}; } if (!borough_year[year][borough]) { borough_year[year][borough] = 0; } borough_year[year][borough]++; }); const stackData = []; for (const year in borough_year) { const entry = {year}; boroughs.forEach(borough => { entry[borough] = borough_year[year][borough] || 0; }); stackData.push(entry); } // Set up SVG canvas const margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 800 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width, height)); // Set up scales and axes const x = d3.scaleBand() .range([0, width]) .padding(0.1) .domain(stackData.map(d => d.year)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(stackData, d => boroughs.reduce((acc, curr) => acc + d[curr], 0)) + 4000]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(boroughs) .range(d3.schemeSet2); svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)); //svg.append("g") // .call(d3.axisLeft(y)); const stack = d3.stack() .keys(boroughs); const series = stack(stackData); // grid lines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .tickSize(-width + margin.left + margin.right) .tickFormat("")); svg.selectAll(".grid line") .style("stroke", "lightgrey") .style("stroke-opacity", "0.7"); // stacked bars svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d.data.year)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .attr("class", d => `year-${d.data.year}`) .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", color(d.key)); // show info on hover var tooltipWidth = 110; var xpos = parseFloat(d3.select(this).attr("x")) + x.bandwidth() / 2; if (xpos + tooltipWidth > width) { xpos -= (tooltipWidth + x.bandwidth() / 2); } var ypos = parseFloat(d3.select(this).attr("y")); var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", tooltipWidth) .attr("height", "22px") .attr("fill", color(d.key)) tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${d[1]-d[0]} Rat Sightings`); }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); if (!d3.select(this).classed("clicked")) { d3.select(this).attr("stroke", "none"); } else { d3.select(this).attr("stroke", "red"); } }) .on("click", function(event, d){ mutable selected_year = d.data.year; svg.selectAll("rect").attr("stroke", "none").classed("clicked", false); svg.selectAll(`.year-${d.data.year}`) .attr("stroke", "red") .attr("stroke-width", 1) .classed("clicked", true); }); // x-axis labels svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .append("text") .attr("fill", "#000") .attr("x", width - margin.right) .attr("y", margin.bottom) .attr("text-anchor", "end") .text("Year"); // y-axis labels svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "middle") .text("Rat Sightings"); // title svg.append("text") .attr("x", (width / 2)) .attr("y", margin.top) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-family", "Arial") .text("Rat Sightings by Borough Since 2010"); // Add a group for the legend const legend = svg.append("g") .attr("class", "legend") .attr("transform", `translate(${width + margin.right},${margin.top})`); const legendData = boroughs; // Add legend rectangles legend.selectAll("rect") .data(legendData) .enter().append("rect") .attr("y", (d, i) => i * 20) // Adjust the vertical spacing .attr("width", 15) // Adjust the width of legend rectangles .attr("height", 15) // Adjust the height of legend rectangles .attr("fill", d => color(d)); // Add legend text legend.selectAll("text") .data(legendData) .enter().append("text") .attr("x", 20) // Adjust the horizontal spacing .attr("y", (d, i) => i * 20 + 12) // Adjust the vertical spacing .text(d => d) .style("fill", "#000") .style("font-family", "Arial"); // Adjust the main chart position based on the legend width const legendWidth = 300 svg.attr("width", width + margin.left + margin.right + legendWidth); return svg.node(); }4a:T1a70,reactive_line = { selected_year; // filter data by selected year, split by borough and month const sightingsMonthBorough = d3.groups(ratData2.filter(d => { const [month, day, year] = d['Created Date'].split('/'); // Adjust based on your date format return year === selected_year; }), d => { const [month, , ] = d['Created Date'].split('/'); // Adjust if different return month; }, d => d.Borough); // Convert structure into {month: , BROOKLYN: ,...} const monthlyData = []; sightingsMonthBorough.forEach(([month, boroughs]) => { const monthData = {month}; boroughs.forEach(([borough, sightings]) => { monthData[borough] = sightings.length; // Number of sightings in this month and borough }); monthlyData.push(monthData); }); monthlyData.sort((a, b) => d3.ascending(+a.month, +b.month)); const margin = {top: 20, right: 20, bottom: 60, left: 50}, width = 800 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; const x = d3.scalePoint() .domain(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']) // Months 1 through 12 .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(monthlyData, d => Math.max(...boroughs.map(borough => d[borough] || 0)))]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(boroughs) .range(d3.schemeSet2); // SVG const svg = d3.select(DOM.svg(width, height)); // grid lines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .tickSize(-width + margin.left + margin.right) .tickFormat("")); svg.selectAll(".grid line") .style("stroke", "lightgrey") .style("stroke-opacity", "0.7"); // generate lines boroughs.forEach(borough => { const data = monthlyData.map(month => ({ month: month.month, count: month[borough] || 0 })); const lineGenerator = d3.line() .x(d => x(d.month)) .y(d => y(d.count)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", color(borough)) .attr("stroke-width", 2) .attr("d", lineGenerator); svg.selectAll(`.circle-${borough}`) .data(data) .enter().append('circle') .attr('class', `circle-${borough.replace(/\s+/g, '-')}`) .attr('cx', d => x(d.month)) .attr('cy', d => y(d.count)) .attr('r', 5) .style('fill', 'none') .style('pointer-events', 'all') // labels of rat sightings at each vertex .each(function(d) { svg.append('text') .attr('class', `label-${borough.replace(/\s+/g, '-')}`) .attr('data-month', d.month) .attr('x', x(d.month)) .attr('y', y(d.count)) .attr('dy', '10') // Adjust as needed .attr('text-anchor', 'middle') .text(`${d.count} Rat Sightings`) .style('fill', color(borough)) .style('font-size', '12px') .style('opacity', 0); // Initially invisible }) }); // X-axis svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .append("text") .attr("fill", "#000") .attr("x", width - margin.right) .attr("y", margin.bottom) .attr("text-anchor", "end") .text("Month"); // Y-axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "middle") .text("Rat Sightings"); // title svg.append("text") .attr("x", (width / 2)) .attr("y", margin.top) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-family", "Arial") .text(`Rat Sightings in ${selected_year}`); // Add a group for the legend const legend = svg.append("g") .attr("class", "legend") .attr("transform", `translate(${width + margin.right},${margin.top})`); const legendData = boroughs; // Add legend rectangles legend.selectAll("rect") .data(legendData) .enter().append("rect") .attr("y", (d, i) => i * 20) // Adjust the vertical spacing .attr("width", 15) // Adjust the width of legend rectangles .attr("height", 15) // Adjust the height of legend rectangles .attr("fill", d => color(d)); // Add legend text legend.selectAll("text") .data(legendData) .enter().append("text") .attr("x", 20) // Adjust the horizontal spacing .attr("y", (d, i) => i * 20 + 12) // Adjust the vertical spacing .text(d => d) .style("fill", "#000") .style("font-family", "Arial"); // Adjust the main chart position based on the legend width const legendWidth = 300 svg.attr("width", width + margin.left + margin.right + legendWidth); // vertical line const line = svg.append('line') .attr('x1', margin.top) .attr('y1', height - margin.bottom) .attr('x2', margin.top) .attr('y2', margin.top) .style('stroke', 'grey') .style('stroke-width', '1px') .style('opacity', 0); svg.on('mousemove', function(event) { const mouseX = d3.pointer(event)[0]; if (mouseX >= margin.left && mouseX <= width - margin.right) { line.attr('x1', mouseX) .attr('x2', mouseX) .style('opacity', 0.5); } }); svg.append('rect') .attr('class', 'overlay') .attr('x', margin.left) .attr('width', width - margin.right - margin.left) .attr('y', margin.top) .attr('height', height - margin.top - margin.bottom) .style('fill', 'none') .style('pointer-events', 'all'); svg.select('.overlay').on('mousemove', function(event) { const mouseX = d3.pointer(event, this)[0]; const bandWidth = 10; boroughs.forEach(borough => { const formattedBorough = borough.replace(/\s+/g, '-'); // Format borough names so 'Staten Island works' // Select all labels for the borough and hide them svg.selectAll(`.label-${formattedBorough}`).style('opacity', 0); // Find the labels for this particular borough within the band and make them visible svg.selectAll(`.circle-${formattedBorough}`) .each(function(d) { const circleX = d3.select(this).attr('cx'); if (Math.abs(circleX - mouseX) <= bandWidth) { const selector = `.label-${formattedBorough}[data-month="${d.month}"]`; svg.selectAll(selector).style('opacity', 1); } }); }); }); return svg.node(); }4b:[{"id":"20577a6bf76446dc1942feb436b7f90f347aec4baf1b4a14dfc9893a714d0a6566cdcb9c9d96bc88dac31fa62c9c5adb62b2c8065bb021704b42d2c1bc0391d6","href":"https://static.observableusercontent.com/files/20577a6bf76446dc1942feb436b7f90f347aec4baf1b4a14dfc9893a714d0a6566cdcb9c9d96bc88dac31fa62c9c5adb62b2c8065bb021704b42d2c1bc0391d6","name":"Rats_LocationGroup.csv","type":"text/csv","lastModified":1709914685620.772,"size":37350106},{"id":"451990a7a12c6fb362747ffc2795c3cebc62aca1b061ac5e2eee8f5031f61d19e53064c4b0a70918a7bf0e26f2330219a8a810e67350794f917ae68b79332492","href":"https://static.observableusercontent.com/files/451990a7a12c6fb362747ffc2795c3cebc62aca1b061ac5e2eee8f5031f61d19e53064c4b0a70918a7bf0e26f2330219a8a810e67350794f917ae68b79332492","name":"Screenshot 2024-03-08 at 11.34.02 AM.png","type":"image/png","lastModified":1709915820326.247,"size":195222}] 29:{"id":"1edaea79460784d4","slug":null,"title":"Visualizing NYC Rat Sightings from 2010 to 2024","thumbnail":"79a6a41a54a44f0167310f06ea22809014f3dd4d5d6ba136ed863398c6cc8c42","access_level":"public","create_time":"$D2024-03-08T16:18:05.620Z","update_time":"$D2024-03-21T03:19:47.838Z","view_time":null,"first_public_time":"$D2024-03-21T22:27:34.938Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":379,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"20baf6a05784fa36","login":"martha2","name":"Martha","avatar_url":"https://avatars-next.observableusercontent.com/e214a317ec69e742d080f36333a7e39da8a4de71f19996e2f67105f62afdf4dd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7da0ece4ae7857a5","login":"joric-barber","name":"Joric Barber","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null,"role":"editor"},{"type":"individual","id":"994535e7d2d7c96e","login":"margot-stern","name":"Margot Stern","avatar_url":"https://avatars-next.observableusercontent.com/fedf68f43d5182592c7d6820ad983c1ad93460f8402718d2c810fec831743740","tier":null,"role":"editor"},{"type":"individual","id":"20baf6a05784fa36","login":"martha2","name":"Martha","avatar_url":"https://avatars-next.observableusercontent.com/e214a317ec69e742d080f36333a7e39da8a4de71f19996e2f67105f62afdf4dd","tier":null,"role":"editor"},{"type":"individual","id":"cb7df7b0a98980fe","login":"olivia-rose-schmitt","name":"Olivia Rose Schmitt","avatar_url":"https://avatars-next.observableusercontent.com/fe645b57dca7bbf64df35b2ddd82a95eb609eb4d6061ae6b8bf0a8fc1319b805","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing NYC Rat Sightings from 2010 to 2024","cells":[{"id":208,"value":"\n

Visualizing NYC Rat Sightings from 2010 to 2024

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"Our charts present an analysis of rat sightings in New York City (NYC), drawing from a comprehensive dataset comprising over 237,000 entries from 2010 to the present (2024). These visualizations explore patterns in service requests related to rat sightings, capturing temporal, spatial, and categorical nuances. Details such as creation and resolution timestamps, incident locations, and boroughs contribute to a comprehensive understanding of NYC's interactions with these urban inhabitants. The charts aim to elucidate insights and trends, providing a detailed narrative of the dynamics surrounding rat sightings in the city.\n

Note: 2024 data only includes January and February.

Assignment Write-Up

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"We started by exploring the data in tableau and trying to understand what some of the key insights from the data were. Some of the most important insights were that Brooklyn is the borough with the highest number of reported rat sightings in NYC, residential buildings are generally the location with the highest number of reported rat sightings and that the number of reported rat sightings in NYC is highest in the warmest months i.e. June, July and August.
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"We started off with the intention of focusing on how the number of reported rat sightings vary by type of location e.g. residential, parking lot, restaurant etc. However, we encountered a few challenges when implementing it using D3, including how to change formatting between charts and how to include information about both the location types and changes over the years.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"screenshot20240308At113402Am = FileAttachment(\"Screenshot 2024-03-08 at 11.34.02 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"Plot.plot({\n marks: [\n Plot.barY(ratData2, Plot.groupX({y: \"count\"}, {x: \"Borough\", fill:\"Location Type\"}))\n ],\n y: {grid: true},\n color: {scheme: \"Set3\",legend: true}\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"\n During the first in class critique session, during which we presented the below first attempt as our static visualization, we received feedback that it might be more insightful to users to focus on a specific time period since the data goes from 2010 to 2024. We pivoted to the current design that we present above, which allows users to get more details about how reported rat sightings vary throughout the year for each year in our data.
\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"Plot.plot({\n marks: [\n Plot.barY(ratData2, Plot.groupX({y: \"count\"}, {x: \"Borough\", fill: \"Borough\"}))\n ],\n color: {legend: true} \n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"Our usability tests revealed that users found it intuitive to hover over the bars to try get more information about the numbers. An initial version of our chart that we presented for in-class critique showed \"x Sightings\" when one hovered over the bars, which some people said was vague. We addressed this by changing it to \"x Rat Sightings\". They also found it very interesting that clicking on each year changed the chart below it. Some users were immediately intrigued by the steep decline in the number of reported rat sightings in 2024, which we had to explain was because the data only includes two months, January and February. We added a note about it in our introductory paragraph, but also considered excluding the 2024 data completely to avoid any miscommunication to users.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"To improve our design, it might be helpful to include reference lines for further analysis. This could include a reference line for the 10 year average of rat sightings in NYC and/or the average of rat sightings across the top 5 major US cities other than NYC. Such additions would allow the data to tell a greater story of the higher incidents and put the data in a more broad context.\nAnother improvement could be incorporating an interactive legend that allows users to toggle the visibility of individual boroughs. This can help users focus on specific boroughs of interest and perhaps declutter the screen.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"We found the Observable documentation extremely helpful in getting inspiration and getting started on the implementation of the visualization in D3. For example, this notebook was a good starting point for us in how we might want to represent our data.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null