smartcity_codeplay

This github repo contains the work of Jacob Shelton and Samuel (Jack) Bentley

Note from Jacob: I gotta comment up the code for you guys still but this is the start of the documentation updates.

General word of warning: The code in tools is really redundant. This was to make it easy for anyone to come here, grab a folder, and have the code work but the downside to that is if you want to modify a tool you're going to need to look through these projects and make sure that tool isn't used in another project. If you want to you could update all the files here to pull from a general tool folder to get around that.

Here's a breakdown of the work on here. If you want more specific information, check the folder for a project specific README.

website

Folder for storing website work. Has the following sub folders.

Site Raw Exports:

Work done by Jack. Exports based off Muse design.

styled-webPage:

Jack's conversion of Site Raw Exports to Bootstrap.

webPage:

This is where I stored my example code for using Bootstrap, grid usage, and accessibility accommodations. You can copy paste the blocks of code and quickly get a webpage up. The stuff in here isn't styled through so be prepared to add some css to the customCss file. I'd recommend hitting up Shayan for pointers on how to actually start putting the pieces together into a webpage.

visualization

Folder for storing Jacob's visualizatin work. Has the following sub folders.

Bar graph on map - gitpages edition:

This is basically just of copy of Bar graph but the image being rendered on the rectangle is now a link to the image hosted on the github pages website. This is a quick fix of mine due to the way three.js handles sprites. You cannot use local images, they must be hosted somewhere online. For whatever reason gitpages was throwing a 404 error on the png stored in the images folder so I just changed the local path to a http address of the image being hosted on gitpages.

Bar graph on map:

A visualization that takes the crime data json generated by the python script found in Safety Map. It takes that data and positions it on an image based on a dictionary of postions. You can take a look at imageConfig if you want an easier time modifying this dictionary of values

Safety Map:

This visualization takes a json of data and makes an overlay on top of a map tile set ofthat data. My first visualization which means it's probably the most janky. I followed a couple of tutorials to make this and some of the code in this final project reflects that.I'll try to comment up this guy more throughly to make it clear how it do. This guy has the python script that generates a json that's used by the other visualizations.

Spheres - clicks:

A visualization that served to be more visually appealing and playful than Safety map. This version of that code uses an on-click version of selecting a given point. probably a good visualization for showing time data or abstracting a dataset.

Spheres - hover:

Same visualization as Spheres - clicks just this time with an on-hover method of selecting a given point. This version feels better to me and is the version I prefer but on-click might be easier to use on a mobile device (if these visualizations work for mobile, I never got around to testing that side of three.js)

Template:

This was the byproduct of Safety Map. This is a template for a similar map overlay visualization as Safety Map.

XYZ coordinate finder:

Host this on a python server or something for the image to load. A tool similar to imageConfig but this tool only functions to give you world coordinates of your mouse cursor. If you open the console you'll see that hitting enter will output world coordinates and relative coordinates of the given object. I feel like imageConfig is a better tool but maybe this could be used like a template for a later visualization.

imageConfig - gitpages edition:

This is a tool used to generate a dictionary of locations for Bar graph on map. hitting a key will record the position and it reads through imageMapping.js to know what keys to output. change the keys there to change what the dictionary of locations will be. To change the image I'd recommend just changing the png in image and keeping the name if you don't want to change any code.

imageConfig:

Same as the tool above but this one doesn't rely on the github pages server being there. Just run this on a python server and it'll work. Doesn't have to be a python server but as mentioned above, three.js wants the image for sprites to be hosted somewhere so setting up a local server gets around that.

mouseover support:

A demo I made to test how three.js handles mouseover. I believe I found a better way to do detection so the method in this demo isn't used anywhere else and can be a bit clunky. I'd recommend taking a look at Sphere - hover if you want to see a smoother way of raycaster usage in three.js