TRC Timeline

.block

license: mit

README.md

forked from mmazanec22's block: TRC Timeline

data.js

const trcData = {
  2018: [
    {
      "Project Name": "Crayton Park",
      "Record Number": "17-09935PZ",
      "Street Address": "86 Crayton Road",
      "Project Type": "Major Sub",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the review of a 16 lot subdivision on the property known as 86 Crayton Road and PIN 9657-46-3875. The project contact is Marty Kocot and the property owner is AMARX Construction, LLC.",
      "Project Materials": "https://docs.google.com/a/ashevillenc.gov/document/d/1EWDGOL0sqsXKFA8sbzmh8f_agaRQZ2PoV_Gvb9GUioM/edit?usp=sharing",
      "Submission Date": "12/13/2017",
      "Initial TRC Meeting Date": "1/8/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": 153331,
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "P&Z Review",
      "": ""
    },
    {
      "Project Name": "17 N. Market Street",
      "Record Number": "17-09941PZ",
      "Street Address": "17 North Market Street",
      "Project Type": "Level II",
      "Project Modifier": "CBD",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the Level II review to allow the redevelopment of 12 condominiums at the address known as 17 North Market Street and PIN 9649-40-4876. The owner of the property is Lawyers Bldg of Ashev, Inc and the project contact is Greg Hoffman.",
      "Project Materials": "https://drive.google.com/drive/folders/1doeaLbtRUU-KzYk2sGHPdcGmE509aDee?usp=sharing",
      "Submission Date": "12/13/2017",
      "Initial TRC Meeting Date": "1/8/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "3/19/2018",
      "Gross Floor Area": 27052,
      "Residential Units": 12,
      "Estimated Cost": "",
      "Status": "TRC Approved",
      "": ""
    },
    {
      "Project Name": "Burton Street Apartments",
      "Record Number": "18-00293PZ",
      "Street Address": "99999 Burton Street",
      "Project Type": "Level II",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the Level II review of a 49-unit, 57,000 square foot apartment complex on the 1.44 acres known as 99999 Burton Street and PINs 9638-45-5312 and 9638-45-5108. The property owner is MB Land Investors, LLC and Safe and Secure Storage, LLC and the project contact is Suzanne Godsey.",
      "Project Materials": "https://drive.google.com/drive/folders/1rvoV3_fEAvaaOPFJgU7ySMdJNjbADk5-?usp=sharing",
      "Submission Date": "1/10/2018",
      "Initial TRC Meeting Date": "2/5/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": 57000,
      "Residential Units": 49,
      "Estimated Cost": "",
      "Status": "Withdrawn",
      "": ""
    },
    {
      "Project Name": "Seritage Redevelopment at Asheville Mall",
      "Record Number": "17-10157PZ",
      "Street Address": "1 South Tunnel Road",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Shannon Tuch",
      "Description": "A request for the Conditional Zoning review of the redevelopment of the Sears property at the Asheville Mall to include restaurants, retail stores, outlets, multiplex movie theater and 204 units of multi-family residential space to create a mixed-use development on 15.88 acres known as 1 South Tunnel Road and PIN 9658-15-2679. The property owner is Seritage SRC Finance, LLC and the project contact is Tony Gosetti.",
      "Project Materials": "https://drive.google.com/drive/folders/1mLiRfEUIYMfOB_jcPcZub886ch_tJegu?usp=sharing",
      "Submission Date": "1/10/2018",
      "Initial TRC Meeting Date": "2/5/2018",
      "Revision Meeting Date": "5/21/2018",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": 204,
      "Estimated Cost": "$45,000,000.00",
      "Status": "P&Z Review",
      "": ""
    },
    {
      "Project Name": "Amaranth Apartments",
      "Record Number": "18-00729 PZ",
      "Street Address": "1 Brookside Circle",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Sasha Vrtunski",
      "Description": "A request for the Conditional Zoning review of a 70-unit affordable housing multifamily apartment complex. The property is located on 5.89 acres at the property known as 1 Brookside Circle and PIN 9617-34-3650. The owner of the property is Douglas Glenn Nicholson and Lisa Kay Nicholson and the project contact is Jim Yamin.",
      "Project Materials": "https://drive.google.com/drive/folders/1ywhVhYlOjzO7gw0PLulLtamjZttJcFmV?usp=sharing",
      "Submission Date": "1/24/2018",
      "Initial TRC Meeting Date": "2/19/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": 70,
      "Estimated Cost": "$10,400,000.00",
      "Status": "TRC Review",
      "": ""
    },
    {
      "Project Name": "Princess Anne Hotel Amendment",
      "Record Number": "18-01123 PZ",
      "Street Address": "301 E Chestnut Street",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Shannon Tuch",
      "Description": "A request to review an amendment to a previously approved Conditional Zoning to allow a 32 seat dining room for hotel guests to be converted to a 44 seat dining room open to the public. No site development is currently proposed. The subject property is 0.59 acres known as 301 East Chestnut Street and PIN 9649-63-6041. The project contact is Samantha Fann and the property owner is Michael Eden and Colleen Eden.",
      "Project Materials": "https://drive.google.com/open?id=1l_T6CqYQd9w1LFhConuiF7nyq5AAWyWv",
      "Submission Date": "2/14/2018",
      "Initial TRC Meeting Date": "3/5/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "P&Z Review",
      "": ""
    },
    {
      "Project Name": "Franklin School of Innovation",
      "Record Number": "18-01129 PZ",
      "Street Address": "61 Innovation Drive",
      "Project Type": "Level II",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for a level II review to construct a two-story, 78,000 square foot education building on the property known as 61 Innovation Drive and PIN 9627-01-2917. The property owner is Franklin School of Innovation, Inc and the project contact is Bryan Moffitt.",
      "Project Materials": "https://drive.google.com/open?id=1NDiVVGHAbtpy41AQ8z_aI-CiYTXYOVrr",
      "Submission Date": "2/14/2018",
      "Initial TRC Meeting Date": "3/5/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "$13,000,000.00",
      "Status": "TRC Approved",
      "": ""
    },
    {
      "Project Name": "Hilliard Avenue Apartments",
      "Record Number": "18-01137 PZ",
      "Street Address": "363 Hilliard Avenue",
      "Project Type": "Level II",
      "Project Modifier": "CBD",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the Level II review of a mixed-use, five-story building with 80 residential units and 5200 square feet of commercial space in the CBD. The project is located on 0.65 acres known as 99999 and 363 Hilliard Avenue and PINs 9648-19-3115 and 9648-19-4116. The property owner is Future Doc Management, Inc and the project contact is Mike Vance.",
      "Project Materials": "https://drive.google.com/open?id=1Wc623p1A_5J8qrtPT2WkMrLH6eRVncWk",
      "Submission Date": "2/14/2018",
      "Initial TRC Meeting Date": "3/5/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": 80,
      "Estimated Cost": "$8,000,000.00",
      "Status": "TRC Review",
      "": ""
    },
    {
      "Project Name": "Sweetgrass Apartments",
      "Record Number": "18-01514 PZ",
      "Street Address": "39 Bradley Branch Road",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the Conditional Zoning review of a 255 unit multi-family apartment complex on 11.69 acres known as 39 Bradley Branch Road and PIN 9643-98-6338. The property owner is Mtn-Comm, LLC and the project contact is Hobie Orton.",
      "Project Materials": "https://drive.google.com/drive/folders/1kvOd0HB8RwD4kUL1Cbs_Xhwk9s-JgETo",
      "Submission Date": "2/29/2018",
      "Initial TRC Meeting Date": "3/19/2018",
      "Revision Meeting Date": "4/16/2018",
      "Final Meeting Date": "7/2/2018",
      "Gross Floor Area": "",
      "Residential Units": 255,
      "Estimated Cost": "$35,000,000.00",
      "Status": "Final TRC Review",
      "": ""
    },
    {
      "Project Name": "Alice Drive Subdivision",
      "Record Number": "18-01900 PZ",
      "Street Address": "1 Shakedown Street",
      "Project Type": "Major Sub",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the review of a Major Subdivision to create 19 lots on 4.84 acres known as 1 Shakedown Street and PIN 9657-88-4092. The property owner is The Juna Group, Inc. and the project contact is Matthew Campbell.",
      "Project Materials": "https://drive.google.com/open?id=1IYCuOXcdUxwtcGoOlxHLTCCLHSgVu83l",
      "Submission Date": "3/14/2018",
      "Initial TRC Meeting Date": "4/2/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "TRC Approved",
      "": ""
    },
    {
      "Project Name": "Whitney Drive Subdivision",
      "Record Number": "18-01904 PZ",
      "Street Address": "99999 Whitney Drive",
      "Project Type": "Major Sub",
      "Project Modifier": "",
      "Planner": "Shannon Tuch",
      "Description": "A request for the review of a major subdivision to create 19 lots on 2.09 acres known as 99999 Whitney Drive and PIN 9628-15-2294. The property owner is VC Property Holdings, LLC and the project contact is Marcus Barksdale.",
      "Project Materials": "https://drive.google.com/open?id=1atKmVJZPbswKrbemTF_V2e9__eIVFzNe",
      "Submission Date": "3/14/2018",
      "Initial TRC Meeting Date": "4/2/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "TRC Approved",
      "": ""
    },
    {
      "Project Name": "UNCA MultiPurpose Building",
      "Record Number": "18-02332 PZ",
      "Street Address": "290 University Heights",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the review of a Conditional Zoning request to allow the construction of a Multipurpose Building at a site previously reviewed and approved as a Level II project under permit 17-05552PZ. The project is located on 86.1 acres known as 2900 University Heights and PIN 9649-07-2895. The property owner is University of NC Asheville Foundation and the project contact is David Toms.",
      "Project Materials": "https://drive.google.com/open?id=1kQiN96W6st2xIlMtRuJycFqN5Sgni_6-",
      "Submission Date": "3/28/2018",
      "Initial TRC Meeting Date": "4/16/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "$33,000,000.00",
      "Status": "TRC Approved",
      "": ""
    },
    {
      "Project Name": "842 Haywood Road STVR",
      "Record Number": "18-02334 PZ",
      "Street Address": "842 Haywood Road",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "",
      "Description": "A request for the review of a Conditional Zoning request to allow short-term vacation rental use on the second floor of a 1920 square foot building with retail use on the first floor. The subject property is located on 0.11 acres known as 842 Haywood Road and PIN 9638-05-7296. The project contact is Jeremy Phillips and Elise Olson and the property owner is Philson Group, LLC.",
      "Project Materials": "https://drive.google.com/drive/folders/1mSbxdOC5-xqs66kYRZwNOcJH4LXWvKw5?usp=sharing",
      "Submission Date": "3/28/2018",
      "Initial TRC Meeting Date": "4/16/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "TRC Review",
      "": ""
    },
    {
      "Project Name": "Parkway Court",
      "Record Number": "18-00132 PZ",
      "Street Address": "28 and 32 Maxwell Street",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the review of a Conditional Zoning request to allow short-term vacation rental use in two units. The subject properties are located on two lots known as 28 and 32 Maxwell Street and PINs 9649-33-4037 and 9649-33-4069. The property owner is Parkway Court, LLC and the project contact is Joe Minicozzi.",
      "Project Materials": "https://drive.google.com/open?id=1YzsFTm1er3HDgBjyrZm-bAQMw6FVW6aJ",
      "Submission Date": "3/28/2018",
      "Initial TRC Meeting Date": "4/16/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "TRC Review",
      "": ""
    },
    {
      "Project Name": "Top Notch Tree Care Operations Center",
      "Record Number": "18-03606 PZ",
      "Street Address": "99999 N Bear Creek Road",
      "Project Type": "CZ",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A Conditional Zoning request to allow the construction of a 2,400 square foot commercial operations building on a property currently zoned HB and RM-8. The project is located on 1.42 acres known as 99999 N Bear Creek Road and PIN 9628-54-8656. The property owner is Top Notch Tree Care, LLC and the project contact is Stephen Bellich",
      "Project Materials": "https://drive.google.com/open?id=1Vmnb0xlCm7CNDpQud9TY3a6t-Qgu62Md",
      "Submission Date": "3/15/2018",
      "Initial TRC Meeting Date": "6/4/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "P&Z Review",
      "": ""
    },
    {
      "Project Name": "The Parisian Residences",
      "Record Number": "18-04614 PZ",
      "Street Address": "32 Buncombe Street",
      "Project Type": "CZ",
      "Project Modifier": "CBD",
      "Planner": "",
      "Description": "A request for the Conditional Zoning review of a ten-story structure including 39 residential units, 16 hotel units, and associated parking located on .48 acres known as 32 Buncombe Street and PIN 9648-39-6776. The project contact is Michael Krieger and the property owner is MRK 68 Patton Asheville, LLC.",
      "Project Materials": "https://drive.google.com/open?id=1PrSdZVJonVz-WuPtBoe9EIEqahP1JzNZ",
      "Submission Date": "6/13/2018",
      "Initial TRC Meeting Date": "7/2/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": 39,
      "Estimated Cost": "$26,500,000.00",
      "Status": "TRC Review",
      "": ""
    },
    {
      "Project Name": "Reynolds Road Subdivision",
      "Record Number": "18-04599PZ",
      "Street Address": "50 and 99999 Reynolds Road",
      "Project Type": "Major Sub",
      "Project Modifier": "",
      "Planner": "Jessica Bernstein",
      "Description": "A request for the review of a 7-lot major subdivision on 0.812 acres known as 50 and 99999 Reynolds Road and PINs 9638-76-7897, 9638-76-8926, and 9638-77-8058. The project contact is Brad Howell and the property owner is Reasonable Development, LLC.",
      "Project Materials": "https://drive.google.com/open?id=1aAiIbrQ2aO0fkxSei87Td-FRyt2IDt2D",
      "Submission Date": "6/13/2018",
      "Initial TRC Meeting Date": "7/2/2018",
      "Revision Meeting Date": "",
      "Final Meeting Date": "",
      "Gross Floor Area": "",
      "Residential Units": "",
      "Estimated Cost": "",
      "Status": "TRC Review",
      "": ""
    },
  ],
}

index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/semiotic@1.11.12/dist/semiotic.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script type="text/javascript" src="./data.js"></script>
  <style type="text/css">
    html, body {
      height: 100%;
      width: 100%;
      font-family: 'Alegreya Sans', sans-serif;
      margin: 0;
      overflow: none;
      padding: 0;
    }
    .parent {
      width: 100%;
      height: 100%;
    }
    .background-graphics {
      opacity: 0.25;
    }
  </style>
</head>
<body>
  <script type="text/babel">
  const xAccessor = (stringDate) => {
    const arrDate = stringDate.split('/');
    return new Date(arrDate[2], arrDate[0], arrDate[1]);
  }

  const dateTypes = [
    {
      name: 'Submission Date',
      color: 'red'
    },
    {
      name: 'Initial TRC Meeting Date',
      color: 'orange'
    },
    {
      name: 'Revision Meeting Date',
      color: 'green'
    },
    {
      name: 'Final Meeting Date',
      color: 'blue'
    }
  ]

  const allData = trcData['2018'].map(e => {
    e.coordinates =[]
    dateTypes.forEach(type => {
      if (e[type.name]) {
        e.coordinates.push(
          {
            date: xAccessor(e[type.name]),
            color: type.color,
            eventType: type.name,
          }
        )
      }
    })
    return e;
  })

  assignLayersToEvents(allData)

  function assignLayersToEvents(eventList) {
    eventList.map(function(e, i) {
      e.layerNum = 0
      e.numConflicts = overlapIndices(e, i, eventList).length
      return e
    })

    eventList.sort((a, b) => a.numConflicts - b.numConflicts)
    let overlaps = true;

    while (overlaps) {
      let currentOverlaps = false;
      eventList.forEach(function (e, eIndex) {
        const theseOverlaps = overlapIndices(e, eIndex, eventList)
        if (theseOverlaps.length !== 0) {
          e.layerNum += 1
          currentOverlaps = true
        }
      })
      overlaps = currentOverlaps;
    }

    eventList.forEach(e => {
      e.coordinates.map(coord => {coord.layerNum = e.layerNum})
    })
  }

  function overlapIndices(d, inputIndex, eventList) {
    return eventList.filter(function(e, eventIndex) {
      if (eventIndex === inputIndex) {
        // Return false if you're comparing it to itself
        return false;
      }
      e.index = eventIndex
      return e.coordinates[0].date < d.coordinates[d.coordinates.length - 1].date && d.coordinates[0].date < e.coordinates[e.coordinates.length - 1].date && d.layerNum === e.layerNum
    }).map((e) => e.index)
  }

  // hover for tooltip showing project name and street address
  // click for rest of details in a modal
  const container = document.body.appendChild(document.createElement('div'));
  container.className += 'parent'

  ReactDOM.render(
    <div style={{ width: '100%', height: '100%', textAlign: 'center' }}>
      <Semiotic.ResponsiveXYFrame
        responsiveWidth
        responsiveHeight
        margin={{ top: 70, left: 30, right: 30, bottom: 70}}
        lines={allData}
        lineType={ 'line' }
        xAccessor="date"
        yAccessor="layerNum"
        axes={[
          {
            orient: 'top',
            rotate: -45,
            tickFormat: d => `${new Date(d).toLocaleDateString('en-US', {month: "short", year: '2-digit'})}`,
            ticks: 5,
          }
        ]}
        lineStyle={{
          stroke: 'black',
          strokeWidth: '1.5'
        }}
        showLinePoints
        customPointMark={(d) => {
          return <circle
            r={7}
          />
        }}
        pointStyle={d => ({
          stroke: d.color,
          strokeWidth: 3,
          fill: 'white',
        })}
        hoverAnnotation
        tooltipContent={d => `${d.parentLine['Project Name']} ${d.eventType}: ${d.date.toLocaleDateString()}`
        }
      />
    </div>,
    container
  );
  </script>
</body>
</html>