2b:null 2c:["$","title",null,{"children":"Project Alpha Released | CS 181AP Data Visualization | Observable"}] 31:T872,## Dataset: **Description**: This dataset that I chose record of traffic collision incidents reported by the Los Angeles Police Department (LAPD) dating back to 2010. Due to limited file size, the dataset is cropped to 2015 - 2025. The data is transcribe from original paper reports and includes information such as date, location, and incident details. **Data Source**: Los Angeles Police Department, [Traffic Collision from 2010 to Present](https://data.lacity.org/Public-Safety/Traffic-Collision-Data-from-2010-to-Present/d5tf-ez2w/about_data), March 14, 2025 **Processing**: - Open the dataset from [Traffic Collision from 2010 to Present](https://data.lacity.org/Public-Safety/Traffic-Collision-Data-from-2010-to-Present/d5tf-ez2w/about_data) - Click on "Date Occurred" and filter the data to include only records from 2015 - 2025 - In order to meet the file size requirement in Observable (<50MB), delete some unnecessary columns, which include DR Number, Date Reported, Area ID, Crime Code, Crime Code Description, and MO Codes. - Download the dataset as a csv file. **Theme**: The project explores traffic collision patterns in Los Angeles from 2015 to 2025 using data reported by the LAPD. This dataset provides detailed records of collision incidents, including date, time, and location of each event, along with key contextual information about circumstances of the crash. In this project, I am aiming to uncover trends and insights related to when and where collisions occur most frequently, identify potential risk factors, and understand how patterns have changed over time using data visualization skill I learn from class. **About**: I am Jessica. I am a senior at Harvey Mudd College majoring in Engineering and Computer Science. I grew up in California, and over the summer I lived in downtown Los Angeles for an internship. During that time, I experienced firsthand how challenging driving in LA can be - heavy traffic, frequent collisions, and long delays. Sometimes traveling just 5 miles could sometimes take 45 minutes, which was shocking to me. This experience motivated me to explore the data behind LA traffic collision.32:T46c,Plot.plot({ width, title: "Traffic Collision in Los Angeles by Area and Victim Sex", subtitle: "This dataset is between January 2015 to March 2025", marginLeft: 100, x: { label: "Count of Victim", grid: true, nice: true }, y: { label: "Area" }, color: { scheme: "Dark2", legend: true, label: "Victim Sex", domain: ["F", "M", "X", "Unknown"] }, marks: [ Plot.barX( traffic_data.map(d => ({ ...d, "Victim Sex": d["Victim Sex"] ?? "Unknown" })), Plot.groupY( { x: "count" }, { y: "Area Name", fill: "Victim Sex" } ) ) ], caption: htl.html`

This bar chart encodes x = number of victims (quantitative), y = area (nominal), and color = gender (categorical). Author: Jessica Liu. Data: Traffic Collision Data from 2010 to Present.

` }) 33:Tf87,chart = { const margin = { top: 100, right: 100, bottom: 100, left: 90 }, width = 900 - margin.left - margin.right, height = 1000 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const data = traffic_data.map(d => ({ area: d["Area Name"], sex: d["Victim Sex"] ?? "Unknown" })); const counts = Array.from( d3.rollup( data, v => v.length, d => d.area, d => d.sex ), ([area, map]) => { const obj = { area }; for (const [sex, count] of map) obj[sex] = count; return obj; } ); const sexes = ["F", "M", "X", "Unknown"]; counts.forEach(d => { sexes.forEach(s => { if (!d[s]) d[s] = 0; }); }); const stack = d3.stack() .keys(sexes) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const series = stack(counts); const x = d3.scaleLinear() .domain([0, d3.max(series[series.length - 1], d => d[1])]) .range([0, width]) .nice(); const y = d3.scaleBand() .domain(counts.map(d => d.area)) .range([0, height]) .padding(0.2); const color = d3.scaleOrdinal() .domain(sexes) .range(d3.schemeDark2); // ---- Tooltip div ---- const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("background", "rgba(0,0,0,0.75)") .style("color", "white") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); // ---- Bars + tooltip events ---- g.selectAll("g.layer") .data(series) .join("g") .attr("class", "layer") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("y", d => y(d.data.area)) .attr("height", y.bandwidth()) .attr("x", d => x(d[0])) .attr("width", d => x(d[1]) - x(d[0])) .on("mouseenter", function(event, d) { const sex = d3.select(this.parentNode).datum().key; // series key (F/M/X/Unknown) const area = d.data.area; const count = d.data[sex]; tooltip .style("opacity", 1) .html( `${area}
` + `Sex: ${sex}
` + `Victims: ${count.toLocaleString()}` ); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px"); }) .on("mouseleave", function() { tooltip.style("opacity", 0); }); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y)); g.append("text") .attr("x", width / 2) .attr("y", -60) .attr("text-anchor", "middle") .attr("font-size", "28px") .text("Traffic Collisions in Los Angeles by Area and Victim Sex"); g.append("text") .attr("x", width / 2) .attr("y", -25) .attr("text-anchor", "middle") .attr("font-size", "20px") .attr("fill", "gray") .text("This dataset covers January 2015 to March 2025"); g.append("text") .attr("x", width / 2) .attr("y", height + 70) .attr("text-anchor", "middle") .attr("font-size", "22px") .text("Count of Victims"); const legend = g.append("g") .attr("transform", `translate(${width - 150}, 0)`); sexes.forEach((sex, i) => { legend.append("rect") .attr("x", 0) .attr("y", i * 25) .attr("width", 20) .attr("height", 20) .attr("fill", color(sex)); legend.append("text") .attr("x", 30) .attr("y", i * 25 + 15) .attr("font-size", "18px") .text(sex); }); return svg.node(); } 34:[{"id":"78cb18bb130cdabc8f11b7f4ff13b8f786df2008c77a8dc30daf1e0dc53a00a4fdc9f3c5a12efb3f9b8de57606ecd320263e8eb358371861472b19400d3f4c84","href":"https://static.observableusercontent.com/files/78cb18bb130cdabc8f11b7f4ff13b8f786df2008c77a8dc30daf1e0dc53a00a4fdc9f3c5a12efb3f9b8de57606ecd320263e8eb358371861472b19400d3f4c84","name":"Traffic_Collision_Data_from_2015 (1).csv","type":"text/csv","lastModified":1761518574588.767,"size":48668747}] 2f:{"id":"16af324fa8f499fa","slug":null,"title":"Project Alpha Released","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-10-26T22:18:54.675Z","update_time":"$D2025-11-17T22:08:27.375Z","view_time":null,"first_public_time":"$D2025-10-27T03:30:32.315Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e602a4cc91f94fe5","login":"hmc-datavis-fall2025","name":"CS 181AP Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/24bcc4609d77ce717ddd7dc599710360ba00df258ffd8c54b83a2798539fb4b1","tier":"education_2026"},"version":186,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9db3cc040c81235","login":"jessica-liu","name":"Jessica Liu","avatar_url":"https://avatars-next.observableusercontent.com/294bf2869a4b7381cdf168292050370f6bfcc6bb9f4eed4d61470391bf1e9485","tier":null}],"members":[{"type":"team","id":"e602a4cc91f94fe5","login":"hmc-datavis-fall2025","name":"CS 181AP Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/24bcc4609d77ce717ddd7dc599710360ba00df258ffd8c54b83a2798539fb4b1","tier":"education_2026","role":"editor"},{"type":"individual","id":"a9db3cc040c81235","login":"jessica-liu","name":"Jessica Liu","avatar_url":"https://avatars-next.observableusercontent.com/294bf2869a4b7381cdf168292050370f6bfcc6bb9f4eed4d61470391bf1e9485","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Project Alpha Released","cells":[{"id":0,"value":"# Project Alpha Released","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"**Expected Grade:** A","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## Import Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"traffic_data = FileAttachment(\"Traffic_Collision_Data_from_2015 (1).csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"await FileAttachment(\"Traffic_Collision_Data_from_2015 (1).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## Basic Visualization # 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"**Preprocess**: For this basic visualization, I further process the dataset so it shows that each row represents one LAPD area, and columns show the number of male, female, X, and no report sex victim","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"collisions_by_area_by_sex = {\n const filtered = traffic_data.filter(\n d => {\n const s = String(d[\"Victim Sex\"] ??\"\").trim().toUpperCase();\n return s ==\"F\" | s == \"M\" | s == \"X\" | s == null\n }\n )\n const tidyCounts = d3.rollups(\n filtered,\n v => v.length,\n d => d[\"Area Name\"],\n d => d[\"Victim Sex\"] ?? \"Null\"\n ).flatMap(([area, bySex]) =>\n Array.from(bySex, ([sex, count]) => ({ area, sex: sex ?? \"Null\", count }))\n );\n const byArea = new Map();\n for (const {area, sex, count} of tidyCounts) {\n if (!byArea.has(area)) byArea.set(area, { area });\n byArea.get(area)[sex] = count ?? 0;\n }\n return Array.from(byArea.values());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"collisions_by_area_by_sex","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"**Visualization Description:** This bar chart visualizes collisions in Los Angeles (2015-2025) by area and victim sex.\n\n**Encoding:** \n- x-axis represents the number of victims involved in traffic collisions\n- y-axis lists the LAPD area names, showing where the collisions occurred\n- the color encodes the victim's sex, with categories **F** (Female), **M**(Male), **X**(Non-Binary), and **Unknown**. Each color segment within an area's bar indicates how many victims of each sex were involved in collisions in that area.\n\n**Observation:** From the visualization, we can see that the 77th Street Area has the highest number of victims among all LAPD division. Additionally, across nearly all areas, male victims outnumbers female and other categories, suggesting that mem are more frequently involved in reported traffic collisions in LA.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"## Basic Visualization #2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"bv_data2 = {\n const col_interest = [\"Time Occurred\", \"Area Name\", \"Victim Age\", \"Victim Sex\"];\n\n return traffic_data\n .map(d =>\n Object.fromEntries(\n Object.entries(d).filter(([key]) => col_interest.includes(key))\n )\n )\n .filter(d =>\n col_interest.every(k => d[k] != null && d[k] !== \"\" && !Number.isNaN(d[k]))\n )\n .map(d => {\n let time = Number(d[\"Time Occurred\"]);\n if (time < 100) time = time * 100;\n const hour = Math.floor(time / 100);\n\n let timeCategory;\n if (hour >= 5 && hour < 12) timeCategory = \"Morning\";\n else if (hour >= 12 && hour < 17) timeCategory = \"Afternoon\";\n else if (hour >= 17 && hour < 23) timeCategory = \"Night\";\n else timeCategory = \"Midnight\";\n\n return { ...d, \"Time Category\": timeCategory };\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"bv_data2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"p3_colorConfig = Plot.plot({\n color: {\n domain: d3.extent(bv_data2, d => d[\"Victim Age\"]), \n scheme: \"Viridis\",\n type: \"sequential\",\n tickFormat: \"s\",\n range: [0.25, 1]\n },\n\n width: 0,\n height: 0,\n caption: \"Victim Age:\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"Plot.plot({\n width: 4500,\n height: 1500,\n marginLeft: 350,\n marginBottom: 200,\n title: \"Traffic Collisions in Los Angeles by Area and Time of Day (2015–2025)\",\n subtitle: \"Each cell represents the average victim age for collisions, grouped by LAPD area and time category\",\n caption: htl.html`

\nAuthor: Jessica Liu. Data: \nTraffic Collision Data from 2010 to Present.\n

`,\n style:{\n \"font-size\": \"50px\",\n },\n x:{\n label: \"Time Category\",\n labelOffset: 100\n },\n y:{\n label: \"\"\n },\n color: {\n ...p3_colorConfig.scale(\"color\"),\n legend: true\n },\n \n className: \"heatmap\",\n marks:[\n Plot.cell(bv_data2, {\n x: \"Time Category\",\n y: \"Area Name\",\n fill: \"Victim Age\",\n stroke: \"white\",\n strokeWidth: 1,\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"**Visualization Description:** This heatmap visualizes traffic collisions in Los Angeles (2015–2025) by LAPD area and time of day.\n\n**Encoding:** \n- The x-axis shows four time categories: Morning, Afternoon, Night, and Midnight, derived from the reported time of each collision.\n\n- The y-axis lists the LAPD area names, representing where the collisions occurred.\n\n- The color scale encodes the victim’s age, with lighter colors representing younger victims and darker colors representing older victims.\n\n**Observation:** From the visualization, we can see that older victims (yellow) are more likely to be involved in collisions during the afternoon, while younger victims (dark blue) are more commonly involved in collisions around midnight. This pattern may reflect differences in driving habits, with older individuals driving more often during daytime hours and younger drivers being more active late at night.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"## Visualization #1 Re-creation using D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"In this section, I will recreate Bar plot (visualization #1) using D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"