Quality of Life Dashboard

Neighborhood indicators dashboard built with Vue and Mapbox GL JS.

🏠 Homepage

Prerequisites

git >= 1.0.0
npm >=5.5.0
node >=9.3.0

Install

git clone https://github.com/tobinbradley/quality-of-life-dashboard.git dashboard
cd dashboard
npm install
git clone https://github.com/tobinbradley/mecklenburg-quality-of-life-data.git data
npm install

You will have to add a data configuration folder for the Dashboard to work. An automatic data configuration for a US State or County can be achieved the quality-of-life-data-uscensus repo. From the dashboard directory:

git clone https://github.com/tobinbradley/quality-of-life-data-uscensus.git data
cd data
npm install

You can find out how to set a state or county FIPS code in the readme.

Alternately, you can use Mecklenburg County's data repo:

git clone https://github.com/tobinbradley/mecklenburg-quality-of-life-data.git data

Usage

For development:

npm run start

Build for production:

npm run build

Options

site.js has a number of customization settings you can set.

{
  // REQUIRED
  // The title of the app as it appears on the page and in the title meta
  title: 'Charlotte/Mecklenburg Quality of Life Explorer',
  // REQUIRED
  // Author meta tag
  author: 'Tobin Bradley',
  // REQUIRED
  // Key word meta tag
  keywords:
    'GIS,Mecklenburg County,parks,libraries,schools,environment,impervious surface,floodplain,zoning,assessment,tax,photos,government',
  // REQUIRED
  // Description meta tag
  description:
    'Exploring neighborhood character, economics, education, engagement, environment, health, housing, safety and transportation.',
  // OPTIONAL
  // Google analitics tracking key
  // Note if you don't want to use this, you can strip out the GA code in
  // public/index.html and public/embed.html
  gaKey: 'UA-48797957-1',
  // OPTIONAL
  // Location to post contact form. Requires 'submit', 'email', and 'message'
  // post arguments.
  contactForm: 'https://mcmap.org/utilities/mail-qol.php',
  // OPTIONAL
  // YouTube help video URL
  // Make sure to include ?enablejsapi=1 on the end or it won't stop playing
  // when the modal goes away.
  helpUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1',
  // OPTIONAL
  // Links for the left nav bar
  navLinks: [
    {
      title: 'About',
      url: 'http://charlottenc.gov/HNS/CE/CommunityInfo/Pages/QOL.aspx'
    },
    {
      title: 'Download Data',
      url: 'https://mcmap.org/qol/downloads/qol-data.zip'
    },
    {
      title: 'Charlotte Open Data Portal',
      url: 'http://clt.charlotte.opendata.arcgis.com/'
    },
    {
      title: 'Mecklenburg Open Mapping',
      url: 'http://maps.co.mecklenburg.nc.us/openmapping/'
    }
  ]
}

The page footer content can also be customized by editing src/components/Footer.vue. The left nav bar logo image is located at src/assets/logo.svg, the report page image is located at src/assets/report.jpg, and the footer image is located at src/assets/seals.png.

A PHP MVP for the contact form would look like this:

<?php
if (isset($_POST['submit'])) {
  $to = "you@email.com";
  $message = "From: " . $_POST['email'] . "\r\n" . $_POST['message'];
  $message = wordwrap($message, 70, "\r\n");
  $headers = 'From: Web Feedback <no-reply@yoursite.org>' . "\r\n";
  mail($to, "Quality of Life Feedback", $message, $headers);
}
?>

Author

👤 Tobin Bradley

Twitter: @fuzzytolerance
Github: @tobinbradley

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

This README was generated with ❤️ by readme-md-generator

yufernando/quality-of-life-dashboard