8 |
15 |
9 |
10 | 
11 |
12 |
13 |
11 |
12 | 6 | Crash Mapper has no legal bearing and is intended for informational purposes only. 7 |
8 |9 | NYC Crash Mapper © CHECKPEDS {year} 10 |
11 |
11 |
12 | Data last updated on:
17 |{lastUpdated}
18 |22 | {message} 23 |
24 | ); 25 | }; 26 | 27 | FilterByAreaMessage.defaultProps = { 28 | }; 29 | 30 | FilterByAreaMessage.propTypes = { 31 | geo: PropTypes.string.isRequired, 32 | }; 33 | 34 | export default FilterByAreaMessage; 35 | -------------------------------------------------------------------------------- /scss/components/_filter-button.scss: -------------------------------------------------------------------------------- 1 | .filter-options-button { 2 | height: 25px; 3 | line-height: 25px; 4 | background-color: $btn-bg; 5 | border-color: rgba(0,0,0,0); 6 | color: $marine-light; 7 | padding: 0 10px; 8 | text-align: left; 9 | text-transform: capitalize; 10 | letter-spacing: 0.5px; 11 | border: none; 12 | 13 | &:hover, 14 | &.active { 15 | color: $marine; 16 | border: none; 17 | } 18 | 19 | &:hover { 20 | background-color: $btn-hover; 21 | } 22 | 23 | &.active { 24 | background-color: $btn-active; 25 | } 26 | 27 | &.wide { 28 | width: 135px; 29 | } 30 | 31 | &.med { 32 | width: 125px; 33 | } 34 | 35 | &.narrow { 36 | width: 90px; 37 | } 38 | 39 | &.auto { 40 | width: auto; 41 | } 42 | 43 | &.link { 44 | border: none; 45 | border-radius: 0; 46 | background-color: $transparent; 47 | color: $btn-bg; 48 | 49 | &:hover { 50 | color: $btn-hover; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/containers/AppConnected.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | 3 | import { 4 | fetchCrashStatsData, 5 | fetchCrashesYearRange, 6 | fetchCrashesMaxDate, 7 | fetchCrashesDateRange, 8 | fetchContributingFactors, 9 | openModal, 10 | } from '../actions/'; 11 | 12 | import App from '../components/App'; 13 | 14 | const mapStateToProps = ({ browser, filterDate, filterType, filterVehicle, filterArea }) => { 15 | const { startDate, endDate } = filterDate; 16 | const { identifier, geo, lngLats } = filterArea; 17 | const { height, width } = browser; 18 | return { 19 | startDate, 20 | endDate, 21 | filterType, 22 | filterVehicle, 23 | identifier, 24 | geo, 25 | lngLats, 26 | height, 27 | width, 28 | }; 29 | }; 30 | 31 | export default connect(mapStateToProps, { 32 | fetchCrashStatsData, 33 | fetchCrashesDateRange, 34 | fetchCrashesMaxDate, 35 | fetchCrashesYearRange, 36 | fetchContributingFactors, 37 | openModal, 38 | })(App); 39 | -------------------------------------------------------------------------------- /scss/components/_stats-contributing-factors-list.scss: -------------------------------------------------------------------------------- 1 | .contributing-factors-list { 2 | height: calc(100% - #{$padding-5}); 3 | border: 1px solid $hr-border; 4 | 5 | ul, li { 6 | padding: 0; 7 | margin: 0; 8 | list-style-type: none; 9 | } 10 | 11 | li { 12 | width: calc(100% - 10px); 13 | margin: 0 5px 0 5px; 14 | border-bottom: 0.5px dashed $hr-border; 15 | 16 | &:last-of-type { 17 | border: none; 18 | } 19 | } 20 | 21 | p { 22 | padding: 2px 5px; 23 | height: 100%; 24 | font-size: 1.3rem; 25 | } 26 | 27 | .factor-count, 28 | .factor-type { 29 | display: inline-flex; 30 | flex-direction: row; 31 | justify-content: flex-start; 32 | align-items: center; 33 | } 34 | 35 | .factor-count { 36 | width: 60px; 37 | max-width: 60px; 38 | text-align: right; 39 | } 40 | 41 | .factor-type { 42 | max-width: calc(100% - 60px - 20px); 43 | padding-left: $padding-5; 44 | overflow-x: hidden; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /scss/skeleton/base/_typography.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | //–––––––––––––––––––––––––––––––––––––––––––––––––– 3 | 4 | h1, h2, h3, h4, h5, h6 { 5 | margin-top: 0; 6 | margin-bottom: 2rem; 7 | font-weight: 300; 8 | } 9 | 10 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; } 11 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 12 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 13 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 14 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 15 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 16 | 17 | // Larger than phablet 18 | @media only screen 19 | and (#{$bp-larger-than-phablet}) { 20 | h1 { font-size: 5.0rem; } 21 | h2 { font-size: 4.2rem; } 22 | h3 { font-size: 3.6rem; } 23 | h4 { font-size: 3.0rem; } 24 | h5 { font-size: 2.4rem; } 25 | h6 { font-size: 1.5rem; } 26 | } 27 | 28 | p { 29 | margin-top: 0; 30 | } 31 | -------------------------------------------------------------------------------- /src/actions/index.js: -------------------------------------------------------------------------------- 1 | export { 2 | fetchCrashStatsData, 3 | fetchContributingFactors, 4 | fetchCrashesYearRange, 5 | fetchCrashesDateRange, 6 | fetchCrashesMaxDate, 7 | fetchGeoPolygons, 8 | } from './async_actions'; 9 | export { startDateChange, endDateChange } from './filter_by_date_actions'; 10 | export { 11 | filterByTypeInjury, 12 | filterByTypeFatality, 13 | filterByNoInjFat 14 | } from './filter_by_type_actions'; 15 | export { 16 | filterByVehicleCar, 17 | filterByVehicleTruck, 18 | filterByVehicleMotorcycle, 19 | filterByVehicleBicycle, 20 | filterByVehicleSuv, 21 | filterByVehicleBusVan, 22 | filterByVehicleScooter, 23 | filterByVehicleOther 24 | } from './filter_by_vehicle_actions'; 25 | export { 26 | filterByAreaType, 27 | filterByAreaIdentifier, 28 | filterByAreaCustom, 29 | toggleCustomAreaDraw, 30 | } from './filter_by_area_actions'; 31 | export filterByContributingFactor from './filter_contributing_factor_actions'; 32 | export { openModal, closeModal } from './modal_actions'; 33 | -------------------------------------------------------------------------------- /src/containers/LeafletMapConnected.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | 3 | import { filterByAreaIdentifier, filterByAreaCustom, fetchGeoPolygons } from '../actions/'; 4 | import LeafletMap from '../components/LeafletMap/'; 5 | 6 | const mapStateToProps = ({ filterDate, filterType, filterVehicle, filterArea }, ownProps) => { 7 | const { startDate, endDate } = filterDate; 8 | const { location: { query } } = ownProps; 9 | const { lat, lng, zoom } = query; 10 | const { geo, geojson, identifier, lngLats, drawEnabeled } = filterArea; 11 | return { 12 | zoom: zoom ? Number(zoom) : undefined, 13 | lat: lat ? Number(lat) : undefined, 14 | lng: lng ? Number(lng) : undefined, 15 | startDate, 16 | endDate, 17 | filterType, 18 | filterVehicle, 19 | drawEnabeled, 20 | geo, 21 | geojson, 22 | identifier, 23 | lngLats, 24 | }; 25 | }; 26 | 27 | export default connect(mapStateToProps, { 28 | filterByAreaIdentifier, 29 | filterByAreaCustom, 30 | fetchGeoPolygons, 31 | })(LeafletMap); 32 | -------------------------------------------------------------------------------- /src/components/Modal/ShareURL.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import CopyToClipboard from 'react-copy-to-clipboard'; 3 | 4 | // TO DO: create dl button using URL & SQL API query, e.g. 5 | // https://username.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20table_name&format=CSV 6 | class ShareURL extends Component { 7 | constructor() { 8 | super(); 9 | this.state = { 10 | copied: false, 11 | value: window.location.href 12 | }; 13 | } 14 | 15 | 16 | render() { 17 | const { value, copied } = this.state; 18 | 19 | return ( 20 |The current map view and any active filters may be shared using this URL:
22 | e.target.select()} readOnly /> 23 |13 | {count_factor.toLocaleString()} 14 |
15 |16 | { 17 | factor !== '' ? factor.replace(/\//g, ' / ') : 'None Recorded' 18 | } 19 |
20 |{cyclist.toLocaleString()}
11 |Cyclist
12 |{ped.toLocaleString()}
15 |Ped
16 |{driver.toLocaleString()}
19 |Motorist
20 |{other.toLocaleString()}
23 |Unknown
24 |{total.toLocaleString()}
27 |Total
28 |Any active filters will be applied to your download.
34 |Choose from one of the following data formats:
35 |Fatality
10 |Injury
14 |None
18 || 9 | 17 | | 18 |
19 | Crashmapper Navigation20 |21 | Analyze crash data like a pro. With a few clicks, master the information contained in 22 | the NYC Open Data Collision dataset, collected by NYPD. Choose a data view, filter by 23 | dates, geographies and crash type and get maps, charts and information summaries. 24 | Share with others. 25 | 26 | |
27 |
| 30 | 38 | | 39 |
40 | Crashmapper Custom Map41 |42 | How is my area of focus (corridor, school zone, business improvement district) faring 43 | in terms of traffic safety? 44 | 45 | |
46 |
| 49 | 57 | | 58 |
59 | Crashmapper Trend60 |61 | How does my neighborhood compare to others and to the borough in terms of traffic 62 | safety? 63 | 64 | |
65 |
| 68 | 76 | | 77 |
78 | Crashmapper Compare79 |80 | How has traffic safety changed in my neighborhood since a past period? Are the traffic 81 | calming measures working? 82 | 83 | |
84 |
| 87 | 95 | | 96 |
97 | Crashmapper Rank98 |99 | How is this dangerous intersection ranked in the district, borough or city overall? 100 | Are we concentrating our efforts on the most dangerous intersections? 101 | 102 | |
103 |
| 106 | 114 | | 115 |
116 | Crashmapper Vehicle Filter117 |118 | Do many crashes involve certain type of vehicles? 119 | Is there a category of vehicles more dangerous 120 | to vulnerable users as they cause more fatalities and injuries? 121 | Is it specific to an area when enforcement should be increased? 122 | 123 | |
124 |
25 | {label} 26 |
27 | 33 | 34 | ); 35 | } 36 | return null; 37 | }; 38 | 39 | return ( 40 |9 | Start a{' '} 10 | 11 | PETITION 12 | {' '} 13 | to raise the profile of your traffic problems 14 |
15 |18 | Start a{' '} 19 | 20 | CAMPAIGN 21 | {' '} 22 | to obtain the installation of traffic safety features in your area 23 |
24 |27 | Get traffic safety{' '} 28 | 29 | EDUCATION 30 | {' '} 31 | for your school 32 |
33 |36 | 37 | JOIN 38 | {' '} 39 | families of other victims to seek traffic justice 40 |
41 |44 | Report a crash to the{' '} 45 | 46 | PRESS 47 | . 48 |
49 |55 | 56 | TRAFFIC CALMING 57 | {' '} 58 | features installed in your neighborhood 59 |
60 |63 | Vision Zero (zero traffic deaths) Pedestrian Safety Action{' '} 64 | 65 | PLANS 66 | 67 |
68 |71 | Vision Zero{' '} 72 | 73 | REPORT CARDS 74 | 75 |
76 |79 | 80 | CONTACT 81 | {' '} 82 | the Department of Transportation 83 |
84 |87 | Get{' '} 88 | 89 | ANSWERS 90 | {' '} 91 | to any question on NYC Crash Mapper 92 |
93 |97 | MAPPING WITH CUSTOMIZED FILTERING: The map allows a user to create a 98 | customized filter of any area and track it over time. This is particularly helpful to see the 99 | impact of Vision Zero improvements on a corridor, a slow zone, a school zone, etc. This is in 100 | addition to other more traditional filters like Borough, Community Boards, NYPD Precincts and 101 | more. Any active filters may easily be shared with others using the website's URL. 102 |
103 |104 | ANALYZING: TREND allows you to compare two selected areas’ performance 105 | against each other and to a citywide or borough-wide reference, while filtering by date range 106 | or type of crash. COMPARE lets you compare two time periods for a given area. RANK shows 107 | where one area or intersection ranks in terms of safety in the context of all similar areas 108 | over the most recent two-year period. 109 |
110 |111 | ENHANCED DATA: Collision data is updated from the NYC Open Data Portal daily 112 | or as soon as new data becomes available, with a sweep back one month to catch recently 113 | updated data. NYC Crash Mapper uses vehicle collision data for New York City from August 2011 114 | to the present. The data was aggregated and normalized from the NYC Open Data Portal{' '} 115 | 116 | NYPD Motor Vehicle Collisions 117 | {' '} 118 | and{' '} 119 | 120 | John Krauss's NYPD Crash Data Bandaid 121 | . 122 |
123 |124 | As a result of some of the source data not being geocoded, the statistics (total crashes, 125 | fatalities, and injuries) displayed in the bottom of the map view may differ from what 126 | is shown on the map when Filter By Boundary is set to "Citywide." When a Filter By 127 | Boundary other than "Citywide" is used, such as a "Community Board", the stats will 128 | only display counts for crashes that have been geocoded and are located within a 129 | selected boundary. 130 |
131 |132 | In the NYPD motor vehicles collisions dataset, some injuries and fatalities do not have a 133 | role/vehicle ascribed to them. “Other” includes crashes in the source data that are not 134 | labeled by category (pedestrian, cyclists or motorists). In our experience they include 135 | mostly crashes where the victims are e-bike users. 136 |
137 |138 | NYPD captures up to five (5) vehicles included in a crash. As long as any one of these 139 | vehicles matches the filter selected, the related injuries and fatalities will be counted 140 | – even if the vehicle is potentially not directly responsible for the fatalities/injuries. 141 |
142 |143 | NYC CRASH MAPPER was made possible by{' '} 144 | 145 | CARTO 146 | {' '} 147 | for hosting the data and making the creation of this tool possible through their Grants For 148 | Good program; by The Lily Auchincloss and PEPSI foundations, the Manhattan Borough President 149 | and the New York City Council. The{' '} 150 | 151 | LILY AUCHINCLOSS FOUNDATION 152 | {' '} 153 | generous grant helped to write the vehicular analysis modules. 154 |
155 |156 | This application is the result of four iterations of a mapping initiative started by 157 | Transportation Alternatives in 2006 and continued by John Kraus.The current version of the 158 | application with charts was built in 2017 by Chris Henrick and {' '} 159 | 160 | GreenInfo Network 161 | . 162 |
163 |164 | 165 | CHECKPEDS{' '} 166 | is a 501(c)(3) non-profit organization founded in 2005 that advocates for pedestrian 167 | safety, primarily focusing on the west side of Manhattan. Data has played a critical role in 168 | the coalition's success in highlighting the concentration of fatalities and injuries to the 169 | authorities. This resulted in the DOT installing traffic calming features in the area, 170 | including bike lanes, protected pedestrian crossings and traffic calming measures. It is 171 | CHEKPEDS’ hope that this easy-to-use tool will empower many other activists and individuals in 172 | New York City to gain an understanding of how dangerous their streets are and obtain the 173 | installation of safety features. 174 |
175 |176 | You may{' '} 177 | 178 | email CHEKPEDS 179 | {' '} 180 | regarding any questions or concerns about NYC Crash Mapper. 181 |
182 |