D3 Examples - Project 5

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top ZIP Codes in Ohio History Connection Visitation</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
    <style>
        html, body, #vis {
            height: 100%;
            margin: 0;
        }
        form, select {
            text-align: center;
        }
        .indented {
            padding-left: 50pt;
            padding-right: 50pt;
        }
    </style>
</head>
<body>
  <h1 align="center"><font color="midnightblue">OHC Visitor ZIP Code Analysis</font></h1>
<div class="indented">
  <h3><font color="steelblue">Hypothesis:</font></h3>
<p>People come to view Ohio History Center's exhibits and participate in museum events from all over Ohio. But where do they come from? Membership could be a potential indicator. Historically, the ZIP codes with the most members have been:</p>
<ol type="1">
    <li>Clintonville</li>
    <li>Gahanna</li>
    <li>Westerville</li>
    <li>Worthington</li>
    <li>Upper Arlington</li>
    <li>Delaware</li>
    <li>Powell</li>
    <li>Bexley</li>
    <li>Hilliard</li>
    <li>Grove City</li>
</ol>
<p>With this in mind, using visitation ZIP code data from the most recent fiscal year, we can determine whether there is a correlation between membership and ticket sales for all programs. </p>
  <h3 align="center"><font color="midnightblue">Top 10 ZIP Codes in FY 2018</font></h3>
</div>
<div id="vis">
</div>
<script> 
  
  
var width = document.getElementById('vis')
    .clientWidth;
var height = document.getElementById('vis')
    .clientHeight;
var margin = {
    top: 10,
    bottom: 80,
    left: 70,
    right: 20
};
var svg = d3.select('#vis')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
var x_scale = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.4);
var y_scale = d3.scaleLinear()
    .range([height, 0]);
var x_axis = d3.axisBottom(x_scale);
var y_axis = d3.axisLeft(y_scale);
svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
svg.append("text")             
.attr("transform",
      "translate(" + (width/2) + " ," + 
                     (height + margin.top + 40) + ")")
.style("text-anchor", "middle")
.text("Zip");
svg.append('g')
    .attr('class', 'y axis');
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Number of Tickets"); 
var colour_scale = d3.scaleQuantile()
    .range(["#ffffff","#d5bedd","#c8a4d6", "#8e639e","#52325e"]);
    d3.csv('Top_10_FY_Comb_Sorted.csv', function(csv_data) {
        var t = d3.transition()
            .duration(1500);
        var zips = csv_data.map(function(d) {
            return d.Zip;
        });
        x_scale.domain(zips);
        var max_value = d3.max(csv_data, function(d) {
            return d.Num_Tickets;
        });
        y_scale.domain([0, max_value]);
        colour_scale.domain([0, max_value]);
        var bars = svg.selectAll('.bar')
            .data(csv_data);
        
        //exit
        bars
            .exit()
            .remove();
        //enter
        var new_bars = bars
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('height', 0)
            .attr('y', height)
            .attr('width', x_scale.bandwidth());
        //update
        new_bars.merge(bars)
            .transition(t)
            .attr('x', function(d) {
                return x_scale(d.Zip);
            })
            .attr('y', function(d) {
                return y_scale(d.Num_Tickets);
            })
            .attr('height', function(d) {
                return height - y_scale(d.Num_Tickets);
            })
            .attr('fill', function(d) {
                return colour_scale(d.Num_Tickets);
            });
        svg.select('.x.axis')
            .transition(t)
            .call(x_axis);
        svg.select('.y.axis')
            .transition(t)
            .call(y_axis);
    });
  
</script>
<div class="indented">
  <h3><font color="steelblue">Results</font></h3>
<p>There are some differences between the counties containing the highest membership versus those with the most visitation. <i>Delaware</i> was absent from the top 10, as was <i>Bexley</i> and <i>Grove City</i>, replaced by <i>Dublin</i>, <i>the Short North</i>, and <i>Urbancrest</i>.
Furthermore, the order has changed, with <i>Upper Arlington</i>, <i>Westerville</i>, and <i>Dublin</i> all boasting a ticket count exceeding 2800 for all programs.</p>
  <h3><font color="steelblue">Recommendation</font></h3>
<p>Data spanning a longer period of time could reveal trends not reflected in the current dataset. Based solely on fiscal year 2018, more marketing resources need to be directed towards growing audiences in the aforementioned counties, as membership does not accurately correlate with general visitation for all programs.</p>
  <h3><font color="steelblue">Future Benefits</font></h3>
  <ul>
    <li>Increasing attendance from targeted ZIP codes.</li>
    <li>Meeting FY 2019 attendance goals.</li>
    <li>Increasing attendance at underperforming signature events using <a href="https://bl.ocks.org/mwalks/raw/76999cb7a687a10b9cc6bb91ea128668/">monthly breakdown.</a></li>
  </ul>
</div>
</body>
</html>
    