python_notebooks/building-analysis.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "8b447fbe",
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "import pandas as pd"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "9c64a355",
   "metadata": {},
   "source": [
    "### Data Read-in"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "e2751c35",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Agency Name</th>\n",
       "      <th>Location Name</th>\n",
       "      <th>Address</th>\n",
       "      <th>City</th>\n",
       "      <th>Zip code</th>\n",
       "      <th>County</th>\n",
       "      <th>Congress Dist</th>\n",
       "      <th>Congressional Full Name</th>\n",
       "      <th>Rep Dist</th>\n",
       "      <th>Rep Full Name</th>\n",
       "      <th>...</th>\n",
       "      <th>Bldg Status</th>\n",
       "      <th>Year Acquired</th>\n",
       "      <th>Year Constructed</th>\n",
       "      <th>Square Footage</th>\n",
       "      <th>Total Floors</th>\n",
       "      <th>Floors Above Grade</th>\n",
       "      <th>Floors Below Grade</th>\n",
       "      <th>Usage Description</th>\n",
       "      <th>Usage Description 2</th>\n",
       "      <th>Usage Description 3</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>Department of Natural Resources</td>\n",
       "      <td>Anderson Lake Conservation Area - Fulton County</td>\n",
       "      <td>Anderson Lake C.a.</td>\n",
       "      <td>Astoria</td>\n",
       "      <td>61501</td>\n",
       "      <td>Fulton</td>\n",
       "      <td>17</td>\n",
       "      <td>Cheri Bustos</td>\n",
       "      <td>93</td>\n",
       "      <td>Hammond Norine K.</td>\n",
       "      <td>...</td>\n",
       "      <td>In Use</td>\n",
       "      <td>1975</td>\n",
       "      <td>1975</td>\n",
       "      <td>144</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Not provided</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>Department of Natural Resources</td>\n",
       "      <td>Anderson Lake Conservation Area - Fulton County</td>\n",
       "      <td>Anderson Lake C.a.</td>\n",
       "      <td>Astoria</td>\n",
       "      <td>61501</td>\n",
       "      <td>Fulton</td>\n",
       "      <td>17</td>\n",
       "      <td>Cheri Bustos</td>\n",
       "      <td>93</td>\n",
       "      <td>Hammond Norine K.</td>\n",
       "      <td>...</td>\n",
       "      <td>In Use</td>\n",
       "      <td>2004</td>\n",
       "      <td>2004</td>\n",
       "      <td>144</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Not provided</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>Department of Natural Resources</td>\n",
       "      <td>Anderson Lake Conservation Area - Fulton County</td>\n",
       "      <td>Anderson Lake C.a.</td>\n",
       "      <td>Astoria</td>\n",
       "      <td>61501</td>\n",
       "      <td>Fulton</td>\n",
       "      <td>17</td>\n",
       "      <td>Cheri Bustos</td>\n",
       "      <td>93</td>\n",
       "      <td>Hammond Norine K.</td>\n",
       "      <td>...</td>\n",
       "      <td>In Use</td>\n",
       "      <td>2004</td>\n",
       "      <td>2004</td>\n",
       "      <td>144</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Not provided</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>Department of Natural Resources</td>\n",
       "      <td>Anderson Lake Conservation Area - Fulton County</td>\n",
       "      <td>Anderson Lake C.a.</td>\n",
       "      <td>Astoria</td>\n",
       "      <td>61501</td>\n",
       "      <td>Fulton</td>\n",
       "      <td>17</td>\n",
       "      <td>Cheri Bustos</td>\n",
       "      <td>93</td>\n",
       "      <td>Hammond Norine K.</td>\n",
       "      <td>...</td>\n",
       "      <td>In Use</td>\n",
       "      <td>2004</td>\n",
       "      <td>2004</td>\n",
       "      <td>144</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Not provided</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>Department of Natural Resources</td>\n",
       "      <td>Anderson Lake Conservation Area - Fulton County</td>\n",
       "      <td>Anderson Lake C.a.</td>\n",
       "      <td>Astoria</td>\n",
       "      <td>61501</td>\n",
       "      <td>Fulton</td>\n",
       "      <td>17</td>\n",
       "      <td>Cheri Bustos</td>\n",
       "      <td>93</td>\n",
       "      <td>Hammond Norine K.</td>\n",
       "      <td>...</td>\n",
       "      <td>In Use</td>\n",
       "      <td>2004</td>\n",
       "      <td>2004</td>\n",
       "      <td>144</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Unusual</td>\n",
       "      <td>Not provided</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>5 rows × 22 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "                       Agency Name  \\\n",
       "0  Department of Natural Resources   \n",
       "1  Department of Natural Resources   \n",
       "2  Department of Natural Resources   \n",
       "3  Department of Natural Resources   \n",
       "4  Department of Natural Resources   \n",
       "\n",
       "                                     Location Name             Address  \\\n",
       "0  Anderson Lake Conservation Area - Fulton County  Anderson Lake C.a.   \n",
       "1  Anderson Lake Conservation Area - Fulton County  Anderson Lake C.a.   \n",
       "2  Anderson Lake Conservation Area - Fulton County  Anderson Lake C.a.   \n",
       "3  Anderson Lake Conservation Area - Fulton County  Anderson Lake C.a.   \n",
       "4  Anderson Lake Conservation Area - Fulton County  Anderson Lake C.a.   \n",
       "\n",
       "      City  Zip code  County  Congress Dist Congressional Full Name  Rep Dist  \\\n",
       "0  Astoria     61501  Fulton             17            Cheri Bustos        93   \n",
       "1  Astoria     61501  Fulton             17            Cheri Bustos        93   \n",
       "2  Astoria     61501  Fulton             17            Cheri Bustos        93   \n",
       "3  Astoria     61501  Fulton             17            Cheri Bustos        93   \n",
       "4  Astoria     61501  Fulton             17            Cheri Bustos        93   \n",
       "\n",
       "       Rep Full Name  ...  Bldg Status Year Acquired Year Constructed  \\\n",
       "0  Hammond Norine K.  ...       In Use          1975             1975   \n",
       "1  Hammond Norine K.  ...       In Use          2004             2004   \n",
       "2  Hammond Norine K.  ...       In Use          2004             2004   \n",
       "3  Hammond Norine K.  ...       In Use          2004             2004   \n",
       "4  Hammond Norine K.  ...       In Use          2004             2004   \n",
       "\n",
       "   Square Footage  Total Floors  Floors Above Grade  Floors Below Grade  \\\n",
       "0             144             1                   1                   0   \n",
       "1             144             1                   1                   0   \n",
       "2             144             1                   1                   0   \n",
       "3             144             1                   1                   0   \n",
       "4             144             1                   1                   0   \n",
       "\n",
       "   Usage Description  Usage Description 2 Usage Description 3  \n",
       "0            Unusual              Unusual        Not provided  \n",
       "1            Unusual              Unusual        Not provided  \n",
       "2            Unusual              Unusual        Not provided  \n",
       "3            Unusual              Unusual        Not provided  \n",
       "4            Unusual              Unusual        Not provided  \n",
       "\n",
       "[5 rows x 22 columns]"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "bldg_url = 'https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2022/main/data/building_inventory.csv'\n",
    "df = pd.read_csv(bldg_url)\n",
    "df.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "20c3928e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['Agency Name', 'Location Name', 'Address', 'City', 'Zip code', 'County',\n",
       "       'Congress Dist', 'Congressional Full Name', 'Rep Dist', 'Rep Full Name',\n",
       "       'Senate Dist', 'Senator Full Name', 'Bldg Status', 'Year Acquired',\n",
       "       'Year Constructed', 'Square Footage', 'Total Floors',\n",
       "       'Floors Above Grade', 'Floors Below Grade', 'Usage Description',\n",
       "       'Usage Description 2', 'Usage Description 3'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df.columns"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "893e1c9e",
   "metadata": {},
   "source": [
    "## Plot 1: Barplot"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3f82fdc7",
   "metadata": {},
   "source": [
    "```javascript\n",
    "var building1 = {\n",
    "  \"data\":{\"url\":'https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2022/main/data/building_inventory.csv'},\n",
    "  \"mark\":{\"type\":\"bar\"},\n",
    "  \"width\":\"500\",\n",
    "  \"height\":\"600\",\n",
    "  \"encoding\":{\n",
    "    \"x\":{\"field\":\"Square Footage\", \"type\":\"quantitative\"},\n",
    "    \"y\":{\"field\":\"Senator Full Name\", \"type\":\"nominal\"},\n",
    "  },\n",
    "};\n",
    "\n",
    "vegaEmbed('#building1Vega', building1);\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "97d2f267",
   "metadata": {},
   "source": [
    "### 1.1 Adding in the County and Building Status Indicator as Tooltip and Color"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "45d001ee",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-7d6bd73e38a44bcc85cb01c3946f3dbd\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-7d6bd73e38a44bcc85cb01c3946f3dbd\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-7d6bd73e38a44bcc85cb01c3946f3dbd\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.17.0?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}, \"axis\": {\"labelFontSize\": 13, \"titleFontSize\": 20}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2022/main/data/building_inventory.csv\"}, \"mark\": \"bar\", \"encoding\": {\"color\": {\"field\": \"Bldg Status\", \"scale\": {\"scheme\": \"set2\"}, \"type\": \"nominal\"}, \"tooltip\": {\"field\": \"County\", \"type\": \"nominal\"}, \"x\": {\"field\": \"Square Footage\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"Senator Full Name\", \"type\": \"nominal\"}}, \"height\": 600, \"selection\": {\"selector001\": {\"type\": \"single\", \"fields\": [\"Bldg Status\"], \"bind\": {\"input\": \"select\", \"options\": [\"In Use\", \"Abandon\", \"In Progress\"], \"name\": \"Building Status: \"}}}, \"transform\": [{\"filter\": {\"selection\": \"selector001\"}}], \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "plot1 = alt.Chart(bldg_url).mark_bar().encode(x='Square Footage:Q',\n",
    "                                              y='Senator Full Name:N',\n",
    "                                              color=alt.Color('Bldg Status:N', scale=alt.Scale(scheme='set2')),\n",
    "                                              tooltip='County:N'\n",
    ").properties(width=500,height=600).configure_axis(labelFontSize=13,titleFontSize=20)\n",
    "\n",
    "dropdown1 = alt.binding_select(options=df['Bldg Status'].unique(), name='Building Status: ')\n",
    "selection = alt.selection_single(fields=['Bldg Status'], bind = dropdown1)\n",
    "\n",
    "plot1 = plot1.add_selection(selection).transform_filter(selection)\n",
    "plot1"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1fb52fea",
   "metadata": {},
   "source": [
    "### 1.2 Saving it with Jekyll"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "858256d3",
   "metadata": {},
   "outputs": [],
   "source": [
    "myDir = '/Users/98768/Desktop/mengyuehuang.github.io/assets/json/'\n",
    "plot1.properties(width='container').save(myDir+'plot1.json')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f109f697",
   "metadata": {},
   "source": [
    "### 1.3 Reflection"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "35f903bc",
   "metadata": {},
   "source": [
    "<b>(1) what features you are highlighting with your viz;<b>\n",
    "    \n",
    "I used the Square Footage as the horizontal axis and Senator Full Name as vertical axis for this first illustration of bar plot. I wanted to see the distribution of total building Square Footage for senators. However, I also put in the factors of 'building status' and 'County' to make the plot more informative.\n",
    "    \n",
    "<b>(2) the design choices you made (scales, encoding types, colors, etc.) to visualize your data appropriately;<b> \n",
    "    \n",
    "I changed the code of “width”: “500”, “height”: “600” to rescale the plot in the originally JavaScript dictionary code to “.properties(width=500,height=600)” to fit in the “alt.Chart().mark_bar().encode()” instead of alt.Chart.from_dict() as a “pure” Altair plotting code. Besides, I choose our color scheme to be ‘set2’ from the vega color schemes since I want my colors for each building status group to be distinctive but also not too bright at the same time for aesthetic needs. I also used .configure_axis(labelFontSize=13,titleFontSize=20) to make the titles and labels in axis more readable.\n",
    "    \n",
    "<b>(3) Interactivity <b>\n",
    "\n",
    "I add in the factor of 'building status' as color and dropdown for the audience to choose and five further into. I also add 'County' as a tooltip result to give more information about the building and its senator."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "37b96915",
   "metadata": {},
   "source": [
    "## Plot 2: Histogram"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "c0164116",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0       289\n",
       "2000    265\n",
       "1974    256\n",
       "1935    235\n",
       "1970    219\n",
       "       ... \n",
       "1852      1\n",
       "1870      1\n",
       "1832      1\n",
       "1883      1\n",
       "1861      1\n",
       "Name: Year Constructed, Length: 179, dtype: int64"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df['Year Constructed'].value_counts()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e1fc1116",
   "metadata": {},
   "source": [
    "### 2.1 Plotting"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "58a5283d",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-7c0552bfe0c64dbe869ba00c5d0237d7\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-7c0552bfe0c64dbe869ba00c5d0237d7\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-7c0552bfe0c64dbe869ba00c5d0237d7\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.17.0?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}, \"axis\": {\"labelFontSize\": 20, \"titleFontSize\": 20}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_bcubcg_fall2022/main/data/building_inventory.csv\"}, \"mark\": \"bar\", \"encoding\": {\"tooltip\": [{\"field\": \"Year Constructed\", \"type\": \"temporal\"}, {\"field\": \"Total Floors\", \"type\": \"quantitative\"}, {\"field\": \"Square Footage\", \"type\": \"quantitative\"}], \"x\": {\"field\": \"Year Constructed\", \"type\": \"temporal\"}, \"y\": {\"field\": \"Total Floors\", \"type\": \"quantitative\"}}, \"height\": 400, \"width\": 700, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "plot2 = alt.Chart(bldg_url).mark_bar().encode(x='Year Constructed:T',\n",
    "                                              y='Total Floors:Q',\n",
    "                                              tooltip=['Year Constructed:T', 'Total Floors:Q', 'Square Footage:Q']\n",
    ").properties(width=700,height=400).configure_axis(labelFontSize=20,titleFontSize=20)\n",
    "plot2"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "75e95d9d",
   "metadata": {},
   "source": [
    "### 2.2 Saving it with Jekyll"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "2c1cb8b6",
   "metadata": {},
   "outputs": [],
   "source": [
    "plot2.properties(width='container').save(myDir+'plot2.json')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "da063aab",
   "metadata": {},
   "source": [
    "### 2.3 Reflection"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "3e537327",
   "metadata": {},
   "source": [
    "<b>(1) what features you are highlighting with your viz;<b>\n",
    "    \n",
    "For this visualization here, I are trying to plot a histogram between the ‘Year Constructed’ and ‘Total Floors’ variable for buildings to see if there exists an obvious pattern between these 2. I also add in the “Square Footage” of that building to help the audience read the plot more clearly.\n",
    "    \n",
    "<b>(2) the design choices you made (scales, encoding types, colors, etc.) to visualize your data appropriately;<b>\n",
    "    \n",
    "I also pay attention to the rescale of the plot size and text size in titles and scales. I use “.properties(width=700,height=400)” and “.configure_axis(labelFontSize=20,titleFontSize=20)” to take care of the readability of the plot.\n",
    "    \n",
    "<b>(3) Interactivity <b>\n",
    "    \n",
    "For this 2nd plot, I use tooltip to help the reader to read the tendency between “Year Constructed” and “Total Floors” more clearly with additional information about “Square Footage” as an extra visualizing figure."
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "0e8a3818",
   "metadata": {},
   "source": [
    "## References\n",
    "\n",
    "Altair Interactive Examples: https://altair-viz.github.io/user_guide/interactions.html\n",
    "\n",
    "Vega Color Scheme: https://vega.github.io/vega/docs/schemes/\n",
    "\n",
    "Rescaling Titles and Labels: https://stackoverflow.com/questions/53401693/how-do-you-set-axis-fontsize-in-altair"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.8.13 ('DataViz')",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.13 | packaged by conda-forge | (default, Mar 25 2022, 05:59:45) [MSC v.1929 64 bit (AMD64)]"
  },
  "vscode": {
   "interpreter": {
    "hash": "d283346a0709c40b0142812cb5d56789a1b9eeff87f9a7e88e9ffa6202637955"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}