29:null 2a:["$","title",null,{"children":"Untitled | Columbia Dataviz | Observable"}] 2f:T1492,// 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()) .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", color(d.key)); // show info on hover var tooltipWidth = 90; 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]} Sightings`); }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this) .attr("stroke", "none"); }) .on("click", function(event, d){ mutable selected_year = d.data.year; }); // 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.91em") .attr("text-anchor", "middle") .text("NYC Rat Sightings"); // 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"); // 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(); }30:T9e6,reactive_bars = { 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))) + 100]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(boroughs) .range(d3.schemeSet2); // SVG const svg = d3.select(DOM.svg(width, height)); 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); }); // 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"); return svg.node(); }31:T962,chart = { // Specify the chart’s dimensions. const width = 928; const height = 500; const marginTop = 10; const marginRight = 10; const marginBottom = 20; const marginLeft = 40; var color = d3.scaleOrdinal(d3.schemeSet3); // Determine the series that need to be stacked. const series = d3.stack() .keys(d3.union(ratData.map(d => d.borough))) // distinct series keys, in input order .value(([, D], key) => D.get(key).count) // get value for each series key and stack (d3.index(ratData, d => d.borough)); // group by stack then series key // Prepare the scales for positional and color encodings. const x = d3.scaleBand() .domain(d3.groupSort(ratData, D => -d3.sum(D, d => d.count), d => d.created_date)) .range([marginLeft, width - marginRight]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .rangeRound([height - marginBottom, marginTop]); // A function to format the value in the tooltip. const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en") // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Append a group for each series, and a rect for each element in the series. svg.append("g") .selectAll() .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(D => D.map(d => (d.key = D.key, d))) .join("rect") .attr("x", d => x(d.data[0])) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .text(d => `${d.data[0]} ${d.key}\n${formatValue(d.data[1].get(d.key).population)}`); // Append the horizontal axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); // Append the vertical axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(null, "s")) .call(g => g.selectAll(".domain").remove()); // Return the chart with the color scale as a property (for the legend). return Object.assign(svg.node(), {scales: {color}}); }32:T552, D3 Pie Chart 33:[{"id":"8ff7397f15d6c65a7f4be35bc455c755190137499e4077772f298744fb15ef86c2ddbe6689116d4f253f572d1388066e3865d54a070f9a8847cc1eaf920fb93d","href":"https://static.observableusercontent.com/files/8ff7397f15d6c65a7f4be35bc455c755190137499e4077772f298744fb15ef86c2ddbe6689116d4f253f572d1388066e3865d54a070f9a8847cc1eaf920fb93d","name":"Rats Cleaned.csv","type":"text/csv","lastModified":1708633182624.242,"size":45092528},{"id":"20577a6bf76446dc1942feb436b7f90f347aec4baf1b4a14dfc9893a714d0a6566cdcb9c9d96bc88dac31fa62c9c5adb62b2c8065bb021704b42d2c1bc0391d6","href":"https://static.observableusercontent.com/files/20577a6bf76446dc1942feb436b7f90f347aec4baf1b4a14dfc9893a714d0a6566cdcb9c9d96bc88dac31fa62c9c5adb62b2c8065bb021704b42d2c1bc0391d6","name":"Rats_LocationGroup.csv","type":"text/csv","lastModified":1709092036055.401,"size":37350106},{"id":"495409fde61a9ae42b84f45378f9b23f742c81daa3aedf484ad6bf1e620213492cf57e848110b56e387d617aae877d7c35d2dc02c22c435830aca97361e108b3","href":"https://static.observableusercontent.com/files/495409fde61a9ae42b84f45378f9b23f742c81daa3aedf484ad6bf1e620213492cf57e848110b56e387d617aae877d7c35d2dc02c22c435830aca97361e108b3","name":"rat.csv","type":"text/csv","lastModified":1708617312046.217,"size":26069324},{"id":"ddb8994c9d6a0d53d215a818627894ae4f1356b0f107e418aedd352a0d6ecbacb2b65e85cb195040d50f41fc48613f0cc9e6c2bc86c5e36bc1a7a6bc3cf156ae","href":"https://static.observableusercontent.com/files/ddb8994c9d6a0d53d215a818627894ae4f1356b0f107e418aedd352a0d6ecbacb2b65e85cb195040d50f41fc48613f0cc9e6c2bc86c5e36bc1a7a6bc3cf156ae","name":"rat (1).csv","type":"text/csv","lastModified":1708626359052.618,"size":12130950}] 2d:{"id":"c16afdfb38230471","slug":null,"title":"","thumbnail":"45854ad1769af7a4cff5cba72539d00c153d1d99f080cc54ba2ee9e51fe73c73","access_level":"public","create_time":"$D2024-02-20T01:30:07.839Z","update_time":"$D2024-03-08T16:17:38.677Z","view_time":null,"first_public_time":"$D2024-02-22T15:58:56.597Z","fork":{"id":"9551de4ced039cab","slug":"plot-histogram","title":"Plot: Histogram","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":198,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"994535e7d2d7c96e","login":"margot-stern","name":"Margot Stern","avatar_url":"https://avatars-next.observableusercontent.com/fedf68f43d5182592c7d6820ad983c1ad93460f8402718d2c810fec831743740","tier":null}],"members":[{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","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":"26a58962e10281b9","login":"olivia-bobrownicki","name":"Olivia Bobrownicki","avatar_url":"https://avatars-next.observableusercontent.com/02476afb9d19ecf501dc735c372acc5f0391c6e3dbcc710266244b053e858784","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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":35,"value":"ratData = FileAttachment(\"rat (1).csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"ratData2 = FileAttachment(\"Rats_LocationGroup.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"mutable selected_year = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"boroughs = ['MANHATTAN', 'BROOKLYN', 'QUEENS', 'BRONX', 'STATEN ISLAND'];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"\n

Visualizing NYC Rat Sightings from 2010 to 2024

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":185,"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.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":152,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"await FileAttachment(\"rat (1).csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"Plot.plot({\n y: {grid: true},\n color: {legend: true},\n marks: [\n Plot.rectY(ratData2, Plot.binX({y: \"count\"}, {x: \"Borough\"})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"\nPlot.plot({\n y: {transform: (d) => d},\n color: {scheme: \"spectral\"},\n marks: [Plot.barY(ratData2, {x: \"Borough\", y: \"Created Date\", fill: \"Borough\", sort: {color: null, x: \"-y\"}})]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"