2b:null 2c:["$","title",null,{"children":"Filming locations in San Francisco | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:T45c,1. Chart 1 shows something interesting: the highest bar, with a value of 54, is labeled ‘undefined.’ There are two possible explanations: one is that these are missing values in the dataset; the other is that these places might be too small to have a name, yet they were still selected as filming locations, reflecting how attractive SF is as a city - even unknown places can be chosen for films! In this case, there might be a new business opportunity—developing these unknown filming locations to attract consumers. Chart 1: [Top 10 filming locations in SF](https://observablehq.com/d/4a6db5a4f735b4ac#chart_1) 3. Chart 2 shows that San Francisco was a popular filming location around 2015; however, after the COVID-19 pandemic in 2020, the number of films shot in the city began to decline, possibly due to changes in the city’s appearance. (However, this may also be related to the overall state of the film industry post-pandemic, which requires further analysis. Chart 2: [Top 10 years with the highest number of films shot in San Francisco](https://observablehq.com/d/4a6db5a4f735b4ac#chart_2)32:T9cb,chart_1 = { const margin = { top: 32, right: 128, bottom: 128, left: 128, }; const width = 800; const height = 600; const data = []; for (const i in location_count) { if (i > 10) break; data.push(location_count[i]); } const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]); const x = d3.scaleBand() .domain(data.map(d => d[0])) .rangeRound([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d[1])]) .range([height - margin.bottom, margin.top]); svg.selectAll('rect') .data(data) .join('rect') .attr('x', d => x(d[0])) .attr('width', x.bandwidth()) .attr('y', d => y(d[1])) .attr('height', d => y(0) - y(d[1])) .attr('fill', 'steelblue'); svg.selectAll('text.label') .data(data) .join('text') .attr('class', 'label') .attr('x', d => x(d[0]) + x.bandwidth() / 2) .attr('y', d => y(d[1]) - 5) .attr('text-anchor', 'middle') .text(d => d[1]) .attr('font-size', '12px') .attr('fill', 'black'); svg.append('text') .attr('x', width / 2) .attr('y', margin.top / 2) .attr('text-anchor', 'middle') .style('font-size', '15px') .style('font-weight', 'bold') .text('Top 10 Filming Locations in San Francisco'); // Axis label const x_axis = g => g .attr('transform', 'translate(0, ' + (height - margin.bottom) + ')') .call(d3.axisBottom(x)) .selectAll('text') .attr('transform', 'rotate(20)') .attr('text-anchor', 'start'); const y_axis = g => g .attr('transform', 'translate(' + margin.left + ', 0)') .call(d3.axisLeft(y)); // Axis title svg.append('g') .call(x_axis) .call(g => g .select('.tick:last-of-type text') .clone() .attr('transform', 'rotate(0)') .attr('text-anchor', 'start') .attr('x', -(width - margin.right - margin.left) / 2) .attr('y', margin.bottom - 10) .attr('font-weight', 'bold') .text('Location') ); svg.append('g') .call(y_axis) .call(g => g .select('.tick:last-of-type text') .clone() .attr('transform', 'rotate(-90)') .attr('text-anchor', 'start') .attr('x', -(height - margin.top - margin.bottom) / 2) .attr('y', -48) .attr('font-weight', 'bold') .text('Count by each location') ); return svg.node(); };33:Tbae,chart_2 = { const margin = { top: 32, right: 128, bottom: 128, left: 128, }; const width = 800; const height = 600; const data = []; for (const i in year_count) { if (i > 10) break; data.push(year_count[i]); } data.sort((a, b) => a[0] - b[0]); const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]); const x = d3.scaleBand() .domain(data.map(d => d[0])) .rangeRound([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d[1])]) .range([height - margin.bottom, margin.top]); svg.selectAll('rect') .data(data) .join('rect') .attr('x', d => x(d[0])) .attr('width', x.bandwidth()) .attr('y', d => y(d[1])) .attr('height', d => y(0) - y(d[1])) .attr('fill', 'steelblue'); const line = d3.line() .x(d => x(d[0]) + x.bandwidth() / 2) .y(d => y(d[1])); svg.append('path') .datum(data) .attr('fill', 'none') .attr('stroke', 'pink') .attr('stroke-width', 2) .attr('d', line); svg.selectAll('circle') .data(data) .join('circle') .attr('cx', d => x(d[0]) + x.bandwidth() / 2) .attr('cy', d => y(d[1])) .attr('r', 4) .attr('fill', 'green'); svg.selectAll('text.value') .data(data) .join('text') .attr('class', 'value') .attr('x', d => x(d[0]) + x.bandwidth() / 2) .attr('y', d => y(d[1]) - 10) .attr('text-anchor', 'middle') .text(d => d[1]) .attr('font-size', '12px') .attr('fill', 'black'); svg.append('text') .attr('x', width / 2) .attr('y', margin.top / 3) .attr('text-anchor', 'middle') .style('font-size', '15px') .style('font-weight', 'bold') .text('Top 10 years with the highest number of films shot in San Francisco'); // Axis label const x_axis = g => g .attr('transform', 'translate(0, ' + (height - margin.bottom) + ')') .call(d3.axisBottom(x)) .selectAll('text') .attr('transform', 'rotate(20)') .attr('text-anchor', 'start'); const y_axis = g => g .attr('transform', 'translate(' + margin.left + ', 0)') .call(d3.axisLeft(y)); // Axis title svg.append('g') .call(x_axis) .call(g => g .select('.tick:last-of-type text') .clone() .attr('transform', 'rotate(0)') .attr('text-anchor', 'start') .attr('x', -(width - margin.right - margin.left) / 2) .attr('y', margin.bottom - 10) .attr('font-weight', 'bold') .text('Release year') ); svg.append('g') .call(y_axis) .call(g => g .select('.tick:last-of-type text') .clone() .attr('transform', 'rotate(-90)') .attr('text-anchor', 'start') .attr('x', -(height - margin.top - margin.bottom) / 2) .attr('y', -48) .attr('font-weight', 'bold') .text('Count location by year') ); return svg.node(); };34:[] 2f:{"id":"4a6db5a4f735b4ac","slug":null,"title":"Filming locations in San Francisco","thumbnail":"de58ddd865a75d81592840257ba7f002ceddc651db40a02c0cae102bb7ae0c05","access_level":"public","create_time":"$D2024-09-12T16:05:34.588Z","update_time":"$D2024-11-16T04:15:40.340Z","view_time":null,"first_public_time":"$D2024-09-12T16:08:04.743Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":500,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a66d9c6f7c527559","login":"shufan-chai","name":"Shufan Chai","avatar_url":"https://avatars-next.observableusercontent.com/c9b39c358d361b518562d961d655caa1a16cee2580758c0c44efaf089197ceda","tier":null,"bio":"Thou art more lovely and more temperate."}],"members":[{"type":"individual","id":"a66d9c6f7c527559","login":"shufan-chai","name":"Shufan Chai","avatar_url":"https://avatars-next.observableusercontent.com/c9b39c358d361b518562d961d655caa1a16cee2580758c0c44efaf089197ceda","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Filming locations in San Francisco","cells":[{"id":0,"value":"# Filming locations in San Francisco\nThis is a data visuzalization project made by [Shufan Chai](https://observablehq.com/user/@shufan-chai) from Northeastern University for the course CS7295: Information Visualization Fall 2024 with Professor John Alexis Guerra Gomez.\n\nLink to the course: https://johnguerra.co/classes/data_visualization_fall_2024/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"## Part 1: Insights and graphs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"## In this notebook, there are two main findings:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## Part 2: The data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"### 1. Data source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"The data comes from DataSF(https://data.sfgov.org/Culture-and-Recreation/Film-Locations-in-San-Francisco/yitu-d5am/data_preview), which includes a listing of movies shot in San Francisco starting from 1924. This is the most recently updated version, as of March 13, 2024.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"### 2. Dataset type\nThis dataset is a table which has 2084 rows in total and 11 columns in total.\n
Let's take a look at the first ten rows of the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"printTable(Data.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"### 3. Attributes used\n\n

locations(Categorical attribute), the filming locations
release_year(Ordinal attribute), which year the film was released

location_count(Quantitative derived, count), total number of times each location was used as a location
year_count(Quantitative derived, count), total number of times each year SF was used as filming locations

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"### 5. Data availability\n\nStatic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"## Part 3: Analysis process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"### 1. Import data\nDataSF’s API has a default limit of providing 1,000 rows at a time, so I made three requests and concatenated them together to get the full 2,084 rows.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"data_part1 = fetch(\"https://data.sfgov.org/resource/yitu-d5am.json\").then(res=>res.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"data_part2 = fetch(\"https://data.sfgov.org/resource/yitu-d5am.json?$limit=1000&$offset=1000\").then(res=>res.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"data_part3 = fetch(\"https://data.sfgov.org/resource/yitu-d5am.json?$limit=84&$offset=2000\").then(res=>res.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Data = data_part1.concat(data_part2, data_part3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"### 2. Data overview by navio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"This is a data visualization that includes all the information in the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"viewof selected = navio(Data, { attribWidth: 27 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"### 3. Count filming locations in SF by location","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"location_count = {\n const loc_count = {};\n for (const f of Data) {\n if (f.locations === '')\n continue;\n\n if (!loc_count.hasOwnProperty(f.locations))\n loc_count[f.locations] = 0;\n loc_count[f.locations]++;\n }\n\n const loc_arr = [];\n for (const loc in loc_count)\n loc_arr.push([loc, loc_count[loc]]);\n return loc_arr.sort((a, b) => b[1]-a[1]);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"### 4. Visualize the top 10 filming locations \nUse \"locations\" as X axis, \"location_count\" as Y axis as chart 1\n
[Top 10 filming locations in SF](https://observablehq.com/d/4a6db5a4f735b4ac#chart_1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"### 5. Count filming locations in SF by year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"year_count = {\n const loc_count = {};\n for (const y of Data) {\n if (y.release_year === '')\n continue;\n\n if (!loc_count.hasOwnProperty(y.release_year))\n loc_count[y.release_year] = 0;\n loc_count[y.release_year]++;\n }\n\n const loc_arr = [];\n for (const loc in loc_count)\n loc_arr.push([loc, loc_count[loc]]);\n return loc_arr.sort((a, b) => b[1]-a[1]);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"### 6. Visualize the top 10 years with the highest number of films shot in San Francisco\nUse \"locations\" as X axis, \"year_count\" as Y axis as chart 2\n
[Top 10 years with the highest number of films shot in San Francisco](https://observablehq.com/d/4a6db5a4f735b4ac#chart_2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"## Part 4: The D3 examples used in this notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","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"