Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master' into display-invalid-m…
Browse files Browse the repository at this point in the history 
…arkers

* upstream/master:
  small word changes to about page
  made the 3rd paragraph of the about this project more vague
  Created rough draft of about page; feel free to add to this
  Jumpstarted the about page for issue pittcsc#65
  Added extra statement to enforce the 'month' button changes to white
  Added functionality to allow users to change the default view of the application to month, week, or day; shipped with week as default
  Added to documentation about changing default checkboxes for including in an external site
  Added functionality so users can choose the default ticked checkboxes
  Added notification animation
  Removed vanish css (for PR)
  Adjusted button positioning
  Remove feedback button
  Add feedback link
  Add feedback button
  Big overhaul. MVP for TPN integration
  • Loading branch information
@mbilker
mbilker committed Jun 2, 2017
2 parents 83b94c6 + 212b8ed commit c13897a
Show file tree
Hide file tree
Showing 13 changed files with 466 additions and 190 deletions.
30 changes: 25 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,38 @@ Thanks to @alexandrabush for the logo!
Since our project is just an HTML file, you can simply load the file into your browser.
Once you make edits, commit the changes, and push, your changes will be updated on GitHub.

## Including in an external Site:
In order to include this project in an existing HTML page you will need to first download the `main.css`, `ui.js`, `map.js`, and `data.js` files (we don't yet have them on a CDN). Then, you will need to add
```
<!-- necessary style -->
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://use.fontawesome.com/07694042f8.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- end necessary style -->
```
to the `head` tag, as well as
```
<!-- necessary HTML -->
<div id="ui"></div>
<div id="mapid"></div>
<script src="./ui.js"></script>
<script src="./map.js"></script>
<script src="./data.js"></script>
<!-- end necessary HTML -->
```
somewhere in the `body`.

In order to turn on or off default checkboxes, open up `map.js`, CTRL+F 'DEFAULT_CHECKS', and change a value to `false` to turn it off by default and `true` to turn it on by default.

In order to change the default view (currently shipped with weekly data as default) to the past month, week, or day, open `map.js`, CTRL+F 'DEFAULT_VIEW', and read the documentation. You can change the value to "month", "week", or "day"; anything else will default to weekly data.

## Getting started:
1. Fork the project
2. Add your name to `contributors.md`
3. Submit a pull request
4. Take a look at the Issues for more things to do

## Getting started (machine learning):
1. Do all the steps above
2. `cd` to the `ml` directory
3. Ensure you have Python 3.5.X installed, then run `pip install -r requirements.txt` (depending on config, may be `pip3` instead)

## Helpful links:

### Git and Github links:
Expand Down
72 changes: 72 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PantherView</title>
<meta name="description" content="Map for Oakland data.">
<link rel="icon" href="favicon.ico" />
<!--favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

</head>

<body>
<hr/><h1>Contributors</h1><hr/>
<p>JJ Naughton</p>
<p>John Linahan - <b>CSC President</b></p>
<p>Alexis John Aquiatan</p>
<p>Matt Bilker <a href="mailto:[email protected]">[email protected]</a></p>
<p>Chandler Yocca</p>
<p>Kai Dawkins</p>
<p>Simon Cao</p>
<p>Matthew Duing</p>
<p>Daniel Zheng - <b>CSC Business Manager</b></p>
<p>Chris Seifried</p>
<p>Colton Blake</p>
<p>Austin Marcus</p>
<p>Sriram Iyer</p>
<p>Sai Xu</p>
<p>Benjamin Lodi</p>
<p>Jeffrey Willis</p>
<p>Chris Skowronski</p>
<p>Brandon Palonis</p>
<p>Neha Abraham</p>
<p>Sam Nigh - <b>CSC Events Coordinator</b></p>
<p>Franklin Ty</p>
<p>Kyle Amoroso</p>
<p>Benjamin Muscato</p>
<p>James Hahn - <b>CSC Vice-President</b></p><hr/>

<h1>University of Pittsburgh Computer Science Club (Pitt CSC)</h1><hr/>
<p>We are a group of dedicated students showcasing our shared passion for computer science. During weekly meetings, there are speakers, workshops, and field trips throughout the school year. This organization hopes to bridge the gap between computer science education in the classroom and practical experience in the real world. This not only produces students with valuable skills for employers, but also allows us to portray Pitt's CS department as willing and able to produce useful software for real world applications. Our website can be found at <a href="www.pittcsc.org" target="_blank">pittcsc.org</a>. If you're curious about talking to any of the contributors on this project or how to support our club in the production of even cooler projects, please contact any of our officers.</p>
<hr/>

<h1>About this Project</h1><hr/>
<p>This project aims to gather useful data around the Oakland area of Pittsburgh to inform students and other occupants about libraries, computer labs, police data, and more. With the help of WPRDC (Western Pennsylvania's Regional Data Center), several JavaScript libraries, and hardwork, this group of volunteers was able to successfully visualize several large datasets in a web interface.</p>
<p>This started as a small club project but has grown to include tens of people contributing in a plethora of ways, whether it's graphic design, connecting to the datasets, or visualization in the actual map applet.</p>
<p>By far the best part of this project is that anybody can contribute! Any interested person can contribute by designing logos, suggesting improvements, or learning how to code and contributing directly to the application. The process is simplified and easy; grab an issue or mess around with PantherView to find bugs/improvements and send a pull request to the repository! No matter your skill level, background, or school, we can always use more hands to make PantherView even more polished and useful for the Oakland community.</p>
<p>Users can filter map pins in Oakland for more dire city functions such as police involvement, arrests, code violations, 311s, and non-traffic violations. In addition, general everyday useful functions like locations of libraries, computer labs, and laundry facilities are available. One can view data from the previous day, week, or month, which greatly displays the changing atmosphere of Oakland to stay up-to-date on the happenings of the area. If you feel like viewing all data at once, there is the option to view a data table instead of the interactive map. The table shows the category of the activity, date it occurred, location (which specific part of Oakland), and a description of what happened.</p>
<p>From small club project to city-wide utility, this project has potentional for more. Visions for the future involve adding City of Pittsburgh police data rather than solely Pitt police, expanding it to nearby universities (namely CMU), and also providing useful utility information such as specific university buildings, printers, and restaurant vacancy. Obviously, these are just a couple of ideas, so please leave any feedback you have!</p>
<hr/>
</body>

</html>
2 changes: 2 additions & 0 deletions contributors.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,5 @@ Franklin Ty
Kyle Amoroso

Benjamin Muscato

James Hahn
94 changes: 63 additions & 31 deletions data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,17 +150,29 @@
}
};

// generate a pop-up based on object map provided
// object simply contains the property values as found in the data set
// mapped to the corresponding human-readable text

function generatePopup(record, mapping) {
return Object.keys(mapping).map(property => `<p class="marker-text">
<span class="marker-key">${mapping[property]}</span>:
<span class="marker-value">${record[property]}</span></p>`)
.join("");
}

const WPRDC_DATA_SOURCES = {
"Police": {
id: "1797ead8-8262-41cc-9099-cbc8a161924b",
primaryFiltering: "WHERE \"INCIDENTNEIGHBORHOOD\" LIKE '%Oakland' AND \"INCIDENTTIME\" >= (NOW() - '30 day'::INTERVAL) ORDER BY \"INCIDENTTIME\" DESC",
latLong: ["Y", "X"],
icon: iconTypes.CITY_POLICE,
updateTime: 12*HOUR,

// TODO: Better title and popup messages?
title: (record) => record["OFFENSES"],
popup: (record) => record["OFFENSES"],
title: (record) => record["INCIDENTHIERARCHYDESC"],
popup: (record) => generatePopup(record, {
INCIDENTHIERARCHYDESC: "Description",
OFFENSES: "Offenses"
}),
table: (record) => `<td class="col1">Police</td>
<td class="col2">${record["OFFENSES"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -181,9 +193,10 @@
icon: iconTypes.CITY_ARREST,
updateTime: 12*HOUR,

// TODO: Better title and popup messages?
title: (record) => record["OFFENSES"],
popup: (record) => record["OFFENSES"],
popup: (record) => generatePopup(record, {
OFFENSES: "Offenses"
}),
table: (record) => `<td class="col1">Arrest</td>
<td class="col2">${record["OFFENSES"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -203,12 +216,13 @@
latLong: ["Y", "X"],
icon: iconTypes.CODE_VIOLATION,
updateTime: 12*HOUR,

// TODO: Better title and popup messages?
title: (record) => record["VIOLATION"],
popup: (record) => `<strong>${record["VIOLATION"]}:</strong>
${record["LOCATION"]}<br>
${record["STREET_NUM"]} ${record["STREET_NAME"]}`,
popup: (record) => generatePopup(record, {
VIOLATION: "Violation",
LOCATION: "Location",
CORRECTIVE_ACTION: "Description",
INSPECTION_RESULT: "Result"
}),
table: (record) => `<td class="col1">Code Violation</td>
<td class="col2">${record["VIOLATION"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -229,11 +243,11 @@
latLong: ["Y", "X"],
icon: iconTypes.CITY_311_ICON,
updateTime: 10*MINUTE,

title: (record) => record["REQUEST_TYPE"],
popup: (record) => `
<strong>${record["DEPARTMENT"]}</strong>
<br> ${record["REQUEST_TYPE"]}`,
popup: (record) => generatePopup(record, {
REQUEST_TYPE: "Type",
DEPARTMENT: "Department"
}),
table: (record) => `<td class="col1">311</td>
<td class="col2">${record["DEPARTMENT"]} - ${record["REQUEST_TYPE"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand All @@ -246,8 +260,6 @@
record.incidentDay = parseInt(record.CREATED_ON.substring(8,10));
}
},

// Calls from the library db
"Library": {
id: "2ba0788a-2f35-43aa-a47c-89c75f55cf9d",
primaryFiltering: "WHERE \"Name\" LIKE '%OAKLAND%'",
Expand All @@ -256,20 +268,38 @@
updateTime: 24*HOUR*30,

title: (record) => record["Name"],
popup: (record) => `
<strong>${record.Name}</strong>
<br> Address: ${record.Address}
<br> Phone: ${record.Phone}
<br> Monday: ${record.MoOpen.substring(0, 5)} - ${record.MoClose.substring(0, 5)}
<br> Tuesday: ${record.TuOpen.substring(0, 5)} - ${record.TuClose.substring(0, 5)}
<br> Wednesday: ${record.WeOpen.substring(0, 5)} - ${record.WeClose.substring(0, 5)}
<br> Thursday: ${record.ThOpen.substring(0, 5)} - ${record.ThClose.substring(0, 5)}
<br> Friday: ${record.FrOpen.substring(0, 5)} - ${record.FrClose.substring(0, 5)}
<br> Saturday: ${record.SaOpen.substring(0, 5)} - ${record.SaClose.substring(0, 5)}
<br> Sunday: ${record.SuOpen.substring(0, 5)} - ${record.SuClose.substring(0, 5)}
`
popup: (record) => `<p class="marker-text">${record.Name}</p>
<p class="marker-text">${record.Address}</p>
<p class="marker-text">${record.Phone}</p>
<p class="marker-text">
<span class="marker-key">Monday</span>:
<span class="marker-value">${record.MoOpen.substring(0, 5)} - ${record.MoClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Tuesday</span>:
<span class="marker-value">${record.TuOpen.substring(0, 5)} - ${record.TuClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Wednesday</span>:
<span class="marker-value">${record.WeOpen.substring(0, 5)} - ${record.WeClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Thursday</span>:
<span class="marker-value">${record.ThOpen.substring(0, 5)} - ${record.ThClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Friday</span>:
<span class="marker-value">${record.FrOpen.substring(0, 5)} - ${record.FrClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Saturday</span>:
<span class="marker-value">${record.SaOpen.substring(0, 5)} - ${record.SaClose.substring(0, 5)}</span>
</p>
<p class="marker-text">
<span class="marker-key">Sunday</span>:
<span class="marker-value">${record.SuOpen.substring(0, 5)} - ${record.SuClose.substring(0, 5)}</span>
</p>`
},

"Non-Traffic Violation": {
id: "6b11e87d-1216-463d-bbd3-37460e539d86",
primaryFiltering: "Where \"NEIGHBORHOOD\" LIKE '%Oakland'",
Expand All @@ -278,7 +308,9 @@
updateTime: 12*HOUR,

title: (record) => record["OFFENSES"],
popup: (record) => record["OFFENSES"],
popup: (record) => generatePopup(record, {
OFFENSES: "Offenses"
}),
table: (record) => `<td class="col1">Non-Traffic Violation</td>
<td class="col2">${record["OFFENSES"]}</td>
<td class="col3">${record.incidentMonth}/${record.incidentDay}/${record.incidentYear}</td>
Expand Down
Loading

0 comments on commit c13897a

Please sign in to comment.