Create a Dashboard

TechDiversified Technical Workshop

Created by Ryan Whitley / @apollolm

What is a Dashboard?

• Example 1
• Example 2

What we'll do

• Review Project
• Identify DataSource
• Choose .js Libraries
• Ponder Layout
• Get ta' Building

It'll be OK

Throughout this exercise I'd like to explain some of the thought process behind building a site like this.

Knowing what to do regardless of the technology/language is key.

You can always look up a language's syntax.

Project Overview

"The Boss" wants to see which Seattle police beats have the highest crime rates in the last 24 hours.

She'll share it with her executive team.

She wants a dashboard.

Oh, Also...

• "Don't have much money." Use free libraries.
• "I want to be able to change the type of crime."
• "I want a map with red/green/yellow categories."
• "I'd like a bar chart showing relative levels of crime."
• "I Need something to show at a board meeting."
• "Oh, the meeting is tomorrow morning..."

Show Me The Data!

First, need to see if the data exists to support this request.

• Need Seattle crime data that covers the last 24 hours.
• Need to have crime type in the dataset (so we can filter)
• Ideally will contain the police beat name
• Also, need a police beat boundary dataset to show on map

Try data.seattle.gov -
http://data.seattle.gov/resource/3k2p-39jp.json

Let's go looking.

Ok. Find .js Libraries

Let's find free-to-use .js libraries for

• Mapping
• Charting
• Tabling?
• UI

Mapping

Let's use Leaflet (leafletjs.com)

• Free
• Open Source
• Use for any purpose

Charting

Let's use Highcharts

• Free - for non-commercial purposes
• Flexible
• Good examples

Tables

We could use HTML Tables

But a library would allow for nicer viz

Bootstrap

A User Interface (UI) Library

Helps you make better looking sites

Sketch a Layout

Time for a whiteboard!

This is a great time to interact with client
Use their input and ideas for design, mix with yours

If you work with a designer, this is where they create mockups/wireframes

Let's Build

At some point, you need to just start building

Helps to have a mockup to build against

Rough Sketch

Start Project

Clone the repo in Git (if you know how/prefer)

or

Download a .zip file of it and open it on your machine.

https://github.com/tech-diversified/resources

Folder is called dashboard-workshop

Open in IDE or Editor

Such as Sublime, Brackets, Visual Studio, Eclipse, Webstorm, etc.

You can reference the various completed stages of this project here.

(Click on Dashboard Workshop)

Type or copy the bare bones step1.html into your index.html.

It contains basic HTML framework, plus jQuery and Boostrap references.

(You may often start a project by copying pieces of older projects you've worked on)

Step 2

Rough frame

Let's create a rough layout

Just get the broad strokes out on the page.

Think in terms of squares or rectangles (everything is a box!)

1. Add a header div with id='header'
2. Add a mapTitle div with id='mapTitle'
3. Add a map div with id='mapContainer'
4. Add a table div with id='tableContainer'
5. Add a chart div with id='chartContainer'

Let's do it.

Step 3

Add Map

Pull in leaflet library.

Let's go to Leaflet's site to see how to do it.

I Googled and then downloaded the police beats map file.

Go to my gist and copy/download Seattle-Police-Beats.geojson. Put it in your data folder.

Your Turn!

Time: 10 mins.

Using step3.html/dashboard3.css, modify the header to have a dark background. Also, experiment with padding so the title isn't so crammed in there.

• background-color: black; - is CSS to change the background color of a specific element
• color: white; - CSS to change the text color of a specific element
• padding: 10px; - CSS to add space between the edge of a div(box) and the stuff inside

Your Turn! - Hints

    
        #header{
            background-color: black;
            color: white;
            padding: 10px;
        }
    

(By default, div elements are 100% the width of their parent box)

Step 4

Start a Table

Find the data URL for the API. (data.seattle.gov)

Let's use jQuery to $.getJSON and pull back the results.

Show them in a div for now, just to make sure we're connecting

Step 5

CSS & Summarizer

Yuck. Ugly. Let's clean up the UI.

The list is supposed to be on the right.

Let's add CSS to do that.

Also, let's summarize the crimes by beat and add a real table.

Step 6

Color Code map by crimes

We already have the counts by beat

Loop thru the map layer dataset and add in the counts

Next, create a style function that decides what color to use based on the crime count

Lastly, tell the map layer to update its style

You Try

Time: 10 mins.

In step6.html, alter the getColorByNumberOfCrimes function to add a new 'orange' color.

Try Changing the colors and/or ranges (0 - 15, 15 - 30, > 30)

Step 7

Add a bar chart

Check out the Highcharts Examples.

Highcharts Site

Turns out, they have an example of building a chart based on an HTML table...

Step 8

Clean up the style

Looks like our main components are in place, but spacing is off.

Let's use CSS to move stuff around

What else could we add?

Drop down for crime type.

Click on map boundary to highlight chart and table row.

Click district to filter all data by.

Highlight highest crime areas with a border, or a glow.

Links

...to some of the pages that helped me make the demo.

Recap

We just covered a lot.

• Libraries (HighCharts, Leaflet, jQuery, Bootstrap)
• API Calls
• JSON Data
• Callbacks
• Global Variables
• DOM manipulation (Document Object Model)
• Mapping Libraries
• Asynch Requests (Asynchronous)
• CSS Selectors

Continue Learning

To keep learning more about any of these libaries, read the docs and try examples!

• Leafletjs.com
• getbootstrap.com
• jquery.com
• Socrata API Endpoints
• highcharts.com

Questions?

This presentation can be found at http://tech-diversified.github.io/Workshops/CreateADashboard