43:["$","title",null,{"children":"Do Washingtonians Actually Use Capital Bikeshare? | Ben Oliver | Observable"}] 4b:Ta6c,# Do Washingtonians Actually Use Capital Bikeshare? I went to high school in Arlington, VA, well inside the beltway. Capital Bikeshare stations were ubiquitous, placed at basically every major bus stop/ Metro station. However, it felt like I **never** saw anyone but tourists riding them. However, I was not truly in Washington, D.C., and riding a Capital Bikeshare bike from Arlington into the city would be an arduous experience to impose on anyone. The bikes are heavy, expensive, and securing an e-bike—which would make the long ride more manageable—was both uncertain and significantly more costly if successful. However, if you were a D.C. resident, I could see how they could be useful over a shorter distance. I think for yuppies in downtown D.C. that can afford to ride Capital Bikeshare a few blocks to work there is a value proposition somewhere in there. I hypothesize that business district stations will have more arrivals than departures during morning commute hours, and residential area stations will see a higher volume of departures than arrivals during morning commute hours. I also think that areas on or near the National Mall/Smithsonian/monuments will have relatively equal amounts of arrivals and departures during midday when there are tourists out and about. --- Data from [Kaggle Capital bikeshare dataset 2020/05~2024/08](https://www.kaggle.com/datasets/taweilo/capital-bikeshare-dataset-202005202408?select=daily_rent_detail.csv). This dataset was almost 3 GB and had 16,086,672 data points, so I trimmed it down with pandas to data from June 2024. Even after doing that and restricting it to data points that had valid data in every column, I still had 40,000 rows. I then used a pandas script to randomly select 300 rentals from each day in June, leaving me with a much more manageable 9,000 data points. I chose June 2024 for the following reasons: - As a warm summer month, the weather is ideal for biking, making it a peak period for both locals and tourists to use the Capital Bikeshare system. - Summer is typically the busiest season for tourism in Washington, D.C., meaning the data will reflect high tourist activity. - Unlike July, June does not include the 4th of July holiday, which could disproportionately skew ridership data due to special events and celebrations. - June 2024 is the most recent full month available for analysis (excluding July), providing up-to-date insights while avoiding partial data. - It is one of the full months furthest removed from the disruptions of the COVID-19 pandemic, ensuring the data reflects normalized usage patterns rather than pandemic-related anomalies. --- 4c:T8e6,chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") svg .append("g") .append("clipPath") .attr("id", "clipo") .selectAll("path") .data(wards.features) .enter().append("path") .attr("d", path) .style("stroke", "#000") // streets svg.append("g") .selectAll("path") .data(mapData.features) .enter().append("path") .attr("d", path) .style("stroke", d3.rgb(200,200,200)) .style("fill", "none") // stroke around dc boundaries svg .append("g") .selectAll("path") .data(basemap.features) .enter().append("path") .attr("d", path) .style("stroke", borderColor) .style("fill", "none") // neighborhood labels const text = svg.append("g") .selectAll("text") .data(labelsEdit.filter(hood => labelsToDisplay.includes(hood.name))) // .data(labelsAll) .enter() // Plot start points from the CSV data svg.append("g") .selectAll("circle") .data(rides) .enter() .append("circle") .attr("cx", d => projection([+d.start_lng, +d.start_lat])[0]) .attr("cy", d => projection([+d.start_lng, +d.start_lat])[1]) .attr("r", 2) // Adjust the radius as needed .style("fill", "blue") .style("opacity", 0.1); text.append("text") .attr("x", d => projection([d.Longitude,d.Latitude])[0]) .attr("y", d => projection([d.Longitude,d.Latitude])[1]) .text(d => d.name) .style("text-anchor", "middle") .style("font", ".5em sans-serif") .style("fill", "white") .style("stroke", "white") .style("stroke-width", 4) .style("font-variant", "all-small-caps") .style("font-weight", 800) .style("opacity", .75) text.append("text") .attr("x", d => projection([d.Longitude,d.Latitude])[0]) .attr("y", d => projection([d.Longitude,d.Latitude])[1]) .text(d => d.name) .style("text-anchor", "middle") .style("font", ".5em sans-serif") .style("fill", "#666") .style("font-variant", "all-small-caps") .style("font-weight", 600) // .style("mix-blend-mode", "multiply") const legend = svg.append("g") .attr("transform", `translate(${width-225},${height - 125})`) return svg.node(); }4d:T57b,viewof map1 = { const mapDiv = document.createElement("div"); mapDiv.style.width = "1170px"; mapDiv.style.height = "950px"; const map = L.map(mapDiv).setView([38.9072, -77.0369], 12); // DC coordinates L.tileLayer("https://api.maptiler.com/maps/dataviz/{z}/{x}/{y}.png?key=Cx9IiXl93nW6IJKXP24c", { attribution: '© MapTiler © OpenStreetMap contributors', subdomains: 'abcd', maxZoom: 19 }).addTo(map); // Iterate through each row in the data rides.forEach(ride => { // Plot start_lat/lng in blue if (ride.start_lat && ride.start_lng) { L.circle([ride.start_lat, ride.start_lng], { radius: 30, // radius in meters color: 'transparent', // no border stroke: false, // disables the border fillColor: '#00224C', // fill color fillOpacity: 0.1 // transparency }).addTo(map); } // Plot end_lat/lng in red if (ride.end_lat && ride.end_lng) { L.circle([ride.end_lat, ride.end_lng], { radius: 30, // radius in meters color: 'transparent', // no border stroke: false, // disables the border fillColor: '#FFD80B', // fill color fillOpacity: 0.1 // transparency }).addTo(map); } }); return mapDiv; }4e:T6be,viewof map2 = { const mapDiv = document.createElement("div"); mapDiv.style.width = "1170px"; mapDiv.style.height = "950px"; const map = L.map(mapDiv).setView([38.9072, -77.0369], 12); // DC coordinates L.tileLayer("https://api.maptiler.com/maps/dataviz/{z}/{x}/{y}.png?key=Cx9IiXl93nW6IJKXP24c", { attribution: '© MapTiler © OpenStreetMap contributors', subdomains: 'abcd', maxZoom: 19 }).addTo(map); // Iterate through each row in the data rides.forEach(ride => { if (ride.start_lat && ride.start_lng && ride.end_lat && ride.end_lng) { // Draw a line from start to end const line = L.polyline( [[ride.start_lat, ride.start_lng], [ride.end_lat, ride.end_lng]], { color: 'black', weight: 0.3, opacity: 0.5 } ).addTo(map); // Bind tooltip to the line line.bindTooltip(` Ride Type: ${ride.rideable_type}
Started At: ${ride.started_at}
Ended At: ${ride.ended_at}
Start Station: ${ride.start_station_name}
End Station: ${ride.end_station_name} `); // Plot start and end points L.circle([ride.start_lat, ride.start_lng], { radius: 20, color: 'transparent', stroke: false, fillColor: 'blue', fillOpacity: 0.3 }).addTo(map); L.circle([ride.end_lat, ride.end_lng], { radius: 20, color: 'transparent', stroke: false, fillColor: 'red', fillOpacity: 0.3 }).addTo(map); } }); return mapDiv; }4f:T12bc,viewof map3 = { const mapDiv = document.createElement("div"); mapDiv.style.width = "1170px"; mapDiv.style.height = "950px"; const map = L.map(mapDiv).setView([38.9072, -77.0369], 12); // DC coordinates L.tileLayer("https://api.maptiler.com/maps/dataviz/{z}/{x}/{y}.png?key=Cx9IiXl93nW6IJKXP24c", { attribution: '© MapTiler © OpenStreetMap contributors', subdomains: 'abcd', maxZoom: 19 }).addTo(map); // Haversine formula to calculate distance in miles function calculateDistance(lat1, lon1, lat2, lon2) { const R = 3963.1; // Radius of the Earth in miles const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; } // Calculate ride duration in minutes function calculateDuration(start, end) { const startDate = new Date(start); const endDate = new Date(end); const durationMs = endDate - startDate; // Duration in milliseconds return Math.round(durationMs / 60000); // Convert to minutes } // Extract all durations to determine the domain for color scaling const durations = filteredRides.map(ride => calculateDuration(ride.started_at, ride.ended_at)); // Create a D3 color scale const minDuration = Math.min(...durations); const maxDuration = Math.max(...durations); const colorScale = d3.scaleSequentialSqrt(d3.interpolateCividis) .domain([Math.max(minDuration,1), maxDuration]); filteredRides.forEach(ride => { if (ride.start_lat && ride.start_lng && ride.end_lat && ride.end_lng) { // Calculate distance and duration const distance = calculateDistance(ride.start_lat, ride.start_lng, ride.end_lat, ride.end_lng); const duration = calculateDuration(ride.started_at, ride.ended_at); // Determine the color based on the duration const lineColor = colorScale(duration); // Draw a line from start to end const line = L.polyline( [[ride.start_lat, ride.start_lng], [ride.end_lat, ride.end_lng]], { color: lineColor, weight: 0.2, // Initial weight opacity: .3 // Increase opacity for better visuals } ).addTo(map); // Bind click event to the line line.on('click', () => { line.bindPopup(` Ride Type: ${ride.rideable_type}
Started At: ${ride.started_at}
Ended At: ${ride.ended_at}
Start Station: ${ride.start_station_name}
End Station: ${ride.end_station_name}
Distance: ${distance.toFixed(2)} miles
Duration: ${duration} minutes `).openPopup(); }); // Store the line in the ride object for later updates ride.line = line; // Plot start and end points const startPoint = L.circle([ride.start_lat, ride.start_lng], { radius: 20, color: 'transparent', stroke: false, fillColor: 'blue', fillOpacity: 0.1 }).addTo(map); const endPoint = L.circle([ride.end_lat, ride.end_lng], { radius: 20, color: 'transparent', stroke: false, fillColor: 'red', fillOpacity: 0.1 }).addTo(map); // Bind tooltips to start and end points startPoint.on('click', () => { startPoint.bindPopup(` Ride Type: ${ride.rideable_type}
Started At: ${ride.started_at}
End Station: ${ride.start_station_name}
Distance: ${distance.toFixed(2)} miles
Duration: ${duration} minutes `).openPopup(); }); endPoint.on('click', () => { endPoint.bindPopup(` Ride Type: ${ride.rideable_type}
Ended At: ${ride.ended_at}
Start Station: ${ride.end_station_name}
Distance: ${distance.toFixed(2)} miles
Duration: ${duration} minutes `).openPopup(); }); } }); // Adjust line thickness dynamically based on zoom level map.on('zoomend', () => { const zoomLevel = map.getZoom(); // Get current zoom level const weight = ( zoomLevel / 12); // Adjust thickness dynamically rides.forEach(ride => { if (ride.line) { ride.line.setStyle({ weight }); // Update line weight } }); }); return mapDiv; }50:T529,# Fourth Revision I think you can start to see some of my hypothesis shine through here. I colored each line on the Cividis color scheme, where dark blue lines are the shortest rentals and light yellow lines are the longest rentals. You can clearly see around the tourist hotspots (National Mall, Smithsonian, monuments/memorials, and Arlington Cemetery) that they are decidedly more yellow than the residential areas to the north and east of them. This is probably because of tourists riding their bikes around the mall and sightseeing as opposed to merely commuting with them. The points in that area also seem to be on the redder side of purple too, meaning people ride bikes there and drop them off. I did have to filter the dataset just a tiny bit, as there were some obscene outliers in rental time that were skewing the rest of my data. The longest rental in my randomly selected sample was 1477 minutes, just over 24.5 hours! That one point skewed my data so hard it made the colors of the rest of the lines almost indistinguishable. By limiting my data to rentals of 180 minutes (3 hours) or less, I lost a whopping 33 out of my 9000 data points and salvaged the color gradient for the rest of the less obscene rental times. This map is still too busy though, 9000 lines and 18000 points are a lot of ink. --- 51:T11cb,viewof map4 = { const mapDiv = document.createElement("div"); mapDiv.style.width = "1170px"; mapDiv.style.height = "950px"; const map = L.map(mapDiv).setView([38.9072, -77.0369], 12); L.tileLayer("https://api.maptiler.com/maps/dataviz/{z}/{x}/{y}.png?key=Cx9IiXl93nW6IJKXP24c", { attribution: '© MapTiler ' + '© ' + 'OpenStreetMap contributors', subdomains: 'abcd', maxZoom: 19 }).addTo(map); // Get selected ranges from checkboxes function getSelectedTimeRanges() { const checkboxes = document.querySelectorAll('input[name="timeRange"]:checked'); return Array.from(checkboxes).map(cb => cb.value); } // Haversine formula to calculate distance in miles function calculateDistance(lat1, lon1, lat2, lon2) { const R = 3963.1; // Radius of the Earth in miles const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; } // Calculate ride duration in minutes function calculateDuration(start, end) { const startDate = new Date(start); const endDate = new Date(end); const durationMs = endDate - startDate; // Duration in milliseconds return Math.round(durationMs / 60000); // Convert to minutes } // Extract all durations to determine the domain for color scaling const durations = filteredRides.map(ride => calculateDuration(ride.started_at, ride.ended_at)); const colorScale = d3.scaleSequentialSqrt(d3.interpolateCividis) .domain([Math.max(Math.min(...durations), 1), Math.max(...durations)]); // Redraw the map with filtered rides function redrawMap() { map.eachLayer(layer => { if (layer instanceof L.Polyline || layer instanceof L.Circle) { map.removeLayer(layer); // Remove existing lines and circles } }); const selectedRanges = getSelectedTimeRanges(); const timeFilteredRides = renderTimeFilteredRides(selectedRanges); // Use pre-filtered arrays from code blocks 4-9 // Draw all lines first timeFilteredRides.forEach(ride => { if (ride.start_lat && ride.start_lng && ride.end_lat && ride.end_lng) { const distance = calculateDistance(ride.start_lat, ride.start_lng, ride.end_lat, ride.end_lng); const duration = calculateDuration(ride.started_at, ride.ended_at); const lineColor = colorScale(duration); const line = L.polyline( [[ride.start_lat, ride.start_lng], [ride.end_lat, ride.end_lng]], { color: lineColor, weight: 1.1, opacity: 0.5 } ).addTo(map); line.bindPopup(` Ride Type: ${ride.rideable_type}
Started At: ${ride.started_at}
Ended At: ${ride.ended_at}
Start Station: ${ride.start_station_name}
End Station: ${ride.end_station_name}
Distance: ${distance.toFixed(2)} miles
Duration: ${duration} minutes `); } }); // Draw all points next timeFilteredRides.forEach(ride => { if (ride.start_lat && ride.start_lng) { const startPoint = L.circle([ride.start_lat, ride.start_lng], { radius: 20, color: 'transparent', stroke: false, fillColor: 'blue', fillOpacity: 0.2 }).addTo(map); } if (ride.end_lat && ride.end_lng) { const endPoint = L.circle([ride.end_lat, ride.end_lng], { radius: 20, color: 'transparent', stroke: false, fillColor: 'red', fillOpacity: 0.2 }).addTo(map); } }); } // Adjust line thickness dynamically based on zoom level map.on('zoomend', () => { const zoomLevel = map.getZoom(); // Get current zoom level const weight = ( zoomLevel / 8); // Adjust thickness dynamically rides.forEach(ride => { if (ride.line) { ride.line.setStyle({ weight }); // Update line weight } }); }); // Add event listener to checkboxes const checkboxes = document.querySelectorAll('input[name="timeRange"]'); checkboxes.forEach(cb => { cb.addEventListener('change', redrawMap); }); // Initial render redrawMap(); return mapDiv; }; 52:T8a3,# Fifth Revision This is where the money shot is. If you limit the display to be rides that started in the interval 6:00 AM-9:59 AM, you can clearly see a divide in color. D.C.'s residential areas are a sea of blue dots with dark blue lines leading to red dots in the business districts, while you can observe an opposite pattern in the dots with a similar pattern in the lines in the 4:00 PM to 7:59 PM interval, albeit less clearly. I would hypothesize that is due to intermingling of late afternoon tourists in that interval, as there aren’t as many tourists out and about in D.C between 6:00 AM-9:59 AM as there are from 4:00 PM to 7:59 PM. The vast majority of the yellow lines come in the tourist areas in the 10:00 AM - 3:59 PM and 4:00 PM to 7:59 PM intervals. I also changed it so that all the lines were drawn, and then the points were drawn on top of the lines, to make the blue-purple-red color clearer. Something interesting to note is that you can see where the spurs of the Metro that reach into Maryland and Virgina are, particularly the Orange and Silver Lines' westbound path through Arlington and the Red Line's northern line into Bethesda. --- # Conclusion The usage patterns of Capital Bikeshare bikes in Washington, D.C., reveal a dual-purpose system that serves both local commuters and tourists. During weekday peak hours, such as mornings and evenings, there is a clear commuter trend where bikes are heavily used for traveling to and from business districts and residential neighborhoods. This pattern highlights the reliance of Washingtonians on Capital Bikeshare as a practical and eco-friendly commuting option. However, an analysis of mid-day and weekend usage shows a distinct shift, with stations near tourist landmarks, parks, and cultural hotspots experiencing a significant increase in activity. This suggests that tourists utilize the service to explore the city, creating hotspots of activity around iconic areas like the National Mall, Georgetown, and Dupont Circle. These contrasting patterns underscore the system’s dual identity, catering to the daily needs of locals while also providing a convenient transportation option for visitors. --- # Setup Below ---53:[{"id":"07513c3daf9d9784dba45727c2c046b174ec952d6c28e84ef8c943330200ab875c8dc85014d8ac34625fefa4e5a6e78d6bc6e6d70051d271aaefd00988eb9f90","href":"https://static.observableusercontent.com/files/07513c3daf9d9784dba45727c2c046b174ec952d6c28e84ef8c943330200ab875c8dc85014d8ac34625fefa4e5a6e78d6bc6e6d70051d271aaefd00988eb9f90","name":"Washington_DC_Boundary2.json","type":"application/json","lastModified":1733752427170.64,"size":472602},{"id":"debd9967b6feeeb95adea0a0d639c3f8fc17e7674c34fe4549de03cc80f8cd04e86d334b314e20559755231f7483b580662179793341c994c86367bf28445a45","href":"https://static.observableusercontent.com/files/debd9967b6feeeb95adea0a0d639c3f8fc17e7674c34fe4549de03cc80f8cd04e86d334b314e20559755231f7483b580662179793341c994c86367bf28445a45","name":"bikeshare_june_2024_1.csv","type":"text/csv","lastModified":1733753571365.844,"size":1900923},{"id":"b35a2d34c9bd09559f434829238f7cb82f97cd7de58ee3f04256f2159ef72011cfb476d8efd77736a6a015d2a177160a6cf808875e18f10997e74897da7be2b1","href":"https://static.observableusercontent.com/files/b35a2d34c9bd09559f434829238f7cb82f97cd7de58ee3f04256f2159ef72011cfb476d8efd77736a6a015d2a177160a6cf808875e18f10997e74897da7be2b1","name":"Ward_from_2012.geojson","type":"application/geo+json","lastModified":1733752424695.399,"size":1036435}] 47:{"id":"6bcaff65573f9c59","slug":"project-5-higher-dimensional-data","title":"Do Washingtonians Actually Use Capital Bikeshare?","thumbnail":null,"access_level":"unlisted","create_time":"$D2024-12-09T13:43:39.085Z","update_time":"$D2024-12-13T12:54:39.449Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"146bb800b87ac42c","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/a23317358e59ce3f36c17b9cc6fb372b110b82005792fb60e51c7fd985ec9460","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":521,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"42973841b2b730da","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/b9ff4cb31ca9911e61c547136194e1473087214dd7ee051897935025ef6ab2d1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"146bb800b87ac42c","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/a23317358e59ce3f36c17b9cc6fb372b110b82005792fb60e51c7fd985ec9460","tier":"starter_2024","role":"editor"},{"type":"individual","id":"42973841b2b730da","login":"ben-oliver","name":"Ben Oliver","avatar_url":"https://avatars-next.observableusercontent.com/b9ff4cb31ca9911e61c547136194e1473087214dd7ee051897935025ef6ab2d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Do Washingtonians Actually Use Capital Bikeshare?","cells":[{"id":0,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"# First Revision\n\nI spent some time trying to get a zoomed in d3 map of D.C. working, only to remember that there are Capital Bikeshare locations outside of Washington D.C.... Whoops! That being said, I really like how this map turned out, and I wish I could have used a map in this style for my final project. Another thing I did in this version that I liked and was able to bring through to my final version was transparency for each start/stop location, so you can tell how frequently each one was used.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"# Second Revision\n\nI switched to an OpenStreetMap in Leaflet with a theme created by MapTiler meant specifically for data visualization. It’s not as slick as the first version, but it's not bad. I tried to color code the start and stop points of rentals according to the Cividis color scheme, but blue and yellow just did not work well. On the bright side, you can now zoom in and out as well as see Virgina and Maryland, so overall I think it is still a slight improvement.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"# Third Revision\n\nI added lines connecting the start and stop of each rental. This definitely has its drawbacks, as they are merely drawn as the crow flies, but I think it's a necessary step in the design process. Points are now also drawn blue and red, where blue represents a departure and red represents an arrival. Because of the way the opacity works, the bluer a point is, the more departure there are from that station, and the redder, the more arrivals. Purple stations will have similar amounts of arrivals and departures. You can now also hover over each line to get information about that particular rental. However, I am still lacking that multivariable flair, and the visualization is entirely too busy.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"

\n 12:00 AM - 5:59 AM\n 6:00 AM - 9:59 AM\n 10:00 AM - 3:59 PM\n 4:00 PM - 7:59 PM\n 8:00 PM - 11:59 PM\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"rides= FileAttachment(\"bikeshare_june_2024_1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"await FileAttachment(\"bikeshare_june_2024_1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"filteredRides = rides.filter(ride => {\n const duration = calculateDuration(ride.started_at, ride.ended_at);\n return duration <180;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"filteredRides","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"filteredRidesRange1 = filteredRides.filter(ride => getTimeRange(ride, \"range1\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"filteredRidesRange1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"filteredRidesRange2 = filteredRides.filter(ride => getTimeRange(ride, \"range2\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"filteredRidesRange2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"filteredRidesRange3 = filteredRides.filter(ride => getTimeRange(ride, \"range3\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"filteredRidesRange3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"filteredRidesRange4 = filteredRides.filter(ride => getTimeRange(ride, \"range4\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"filteredRidesRange4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"filteredRidesRange5 = filteredRides.filter(ride => getTimeRange(ride, \"range5\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"filteredRidesRange5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"wards = FileAttachment(\"Ward_from_2012.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"basemap = FileAttachment(\"Washington_DC_Boundary2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"mapData = d3.json(\"https://gist.githubusercontent.com/caseylabrack/198d95d29e8f7f00955adb51adf681ef/raw/ae40ae0c8313f1068587f27e738da214b79f5f1a/street-segments.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"labelsToDisplay = [\"Congress Heights\", \"Hillcrest\", \"Dupont Park\", \"Waterfront\", \"Lincoln Heights\", \"Cathedral Heights\", \"Chevy Chase\", \"Petworth\", \"Fort Lincoln\", \"Edgewood\", \"Columbia Heights\", \"Fort Totten\", \"Woodridge\", \"Petworth\", \"Downtown\", \"Brightwood\", \"Takoma\", \"Capitol Hill\", \"Georgetown\", \"Trinidad\", \"Palisades\", \"Colonial Village\", \"West End\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"labelsAll = d3.csv(\"https://gist.githubusercontent.com/caseylabrack/bacd6941807ba6aad29d243f1ac73d0f/raw/a48334caa911841965620c60be5f91adb288c747/neighborhood-labels.csv\", \n d => {\n d.Longitude = +d.x\n d.Latitude = +d.y\n delete d.x\n delete d.y\n return d\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// rename a neighborhood and move two labels\nlabelsEdit = {\n let clone = JSON.parse(JSON.stringify(labelsAll))\n const wf = clone.find(neighborhood => neighborhood.name==\"Southwest/Waterfront\")\n wf.name = \"Waterfront\"\n wf.Latitude += .001\n clone.find(neighborhood => neighborhood.name==\"Capitol Hill\").Latitude += .0025\n clone.find(neighborhood => neighborhood.name==\"Dupont Park\").Latitude -= .001\n clone.find(neighborhood => neighborhood.name==\"Chevy Chase\").Latitude -= .0015\n clone.find(neighborhood => neighborhood.name==\"Fort Totten\").Latitude -= .0015\n clone.find(neighborhood => neighborhood.name==\"Cathedral Heights\").Latitude += .0025\n //Cathedral Heights\n return clone\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"borderColor = d3.rgb(90,90,90)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"projection = d3.geoConicConformal()\n .parallels([38 + 18 / 60, 39 + 27 / 60])\n .rotate([77, 0]).fitSize([width,height], wards)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height=950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"leaflet = require(\"leaflet@1.9.4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":" function calculateDuration(start, end) {\n const startDate = new Date(start);\n const endDate = new Date(end);\n const durationMs = endDate - startDate; // Duration in milliseconds\n return Math.round(durationMs / 60000); // Convert to minutes\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"function getTimeRange(ride, range) {\n const startDate = new Date(ride.started_at);\n const hours = startDate.getHours();\n const totalSeconds = hours * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds();\n\n if (range === \"range1\") return totalSeconds >= 0 && totalSeconds < 21600; // 00:00:00 - 05:59:59\n if (range === \"range2\") return totalSeconds >= 21600 && totalSeconds < 36000; // 06:00:00 - 09:59:59\n if (range === \"range3\") return totalSeconds >= 36000 && totalSeconds < 57600; // 10:00:00 - 15:59:59\n if (range === \"range4\") return totalSeconds >= 57600 && totalSeconds < 72000; // 16:00:00 - 19:59:59\n if (range === \"range5\") return totalSeconds >= 72000 && totalSeconds < 86400; // 20:00:00 - 23:59:59\n\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"function renderTimeFilteredRides(selectedRanges) {\n const layersToRender = [];\n\n if (selectedRanges.includes(\"range1\")) layersToRender.push(...filteredRidesRange1);\n if (selectedRanges.includes(\"range2\")) layersToRender.push(...filteredRidesRange2);\n if (selectedRanges.includes(\"range3\")) layersToRender.push(...filteredRidesRange3);\n if (selectedRanges.includes(\"range4\")) layersToRender.push(...filteredRidesRange4);\n if (selectedRanges.includes(\"range5\")) layersToRender.push(...filteredRidesRange5);\n\n return layersToRender;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 42:null