opengovernment/askthem

<h1 class='map-title'>Questions in All 50 U.S. States</h1>
<p>Click on a state below to view its elected officials, popular questions, and petitions awaiting a public response.</p>

<div id='map'></div>

<div class='state-links'>
  <%- @states.each do |name, details| %>
    <% state_classes = "state-link" %>
    <% if @current_state && @current_state == details[:abbr] %>
      <% state_classes += " current-state" %>
    <% end %>
    <%= link_to "#{name} (#{details[:count]})", "/#{details[:abbr]}/questions/recent?gov=state", id: "#{details[:abbr]}-target", class: state_classes, data: { count: details[:count] } %>
  <%- end %>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>

function showTooltip(el, data) {
  var center = path.centroid(data);

  tooltip.style("display", "block")
         .style('left', center[0] + el.parentNode.offsetLeft - 40 + 'px')
         .style('top', center[1] + el.parentNode.offsetTop - 60 + 'px');

  stateId = data.id.toLowerCase();
  stateCount = jQuery("#" + stateId +"-target").attr("data-count");
  tooltip.select(".map-tooltip-state-name").text(data.properties.name + " (" + stateCount + ")");
}

var width = 960,
    height = 500,
    centered;

var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("class", "map-background")
    .attr("width", width)
    .attr("height", height)
    ;

var tooltip = d3.select("#map").append("div")
                 .attr("class", "map-tooltip");

tooltip.append("div")
      .attr("class", "map-tooltip-state-name")
      ;

tooltip.on("mouseout", function(el) {
  tooltip.style("display", "none");
});

var g = svg.append("g");

d3.json("/us.json", function(error, us) {
  g.append("g")
      .attr("id", "states")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.usa).features)
    .enter().append("path")
      .attr("d", path)
      .on("mouseover", function(data) {
        showTooltip(this, data);
      })
      .on("click", function(data) {
        location.href = data.id.toLowerCase() + "/questions/recent?gov=state";
      })
      ;

  g.append("path")
      .datum(topojson.mesh(us, us.objects.usa, function(a, b) { return a !== b; }))
      .attr("id", "state-borders")
      .attr("d", path);
});

</script>

<div class="city-questions">
  <h2>City Questions</h3>
  <ul class="state-with-cities-list">
    <%- current_state = @cities.first.id.split("-").first %>
    <li><%= current_state.upcase %></li>

    <ul class="cities-for-state-list">

      <%- @cities.each do |city| %>
        <%- state_for_city = city.id.split("-").first %>
        <%- if state_for_city != current_state %>
          <%- current_state = state_for_city %>
    </ul>
    <li><%= current_state.upcase %></li>
    <ul class="cities-for-state-list">
        <%- end %>

        <%- question_count = city.questions.count %>

        <li>
          <%= link_to "#{city.name} (#{question_count})", "/#{city.id}/questions/recent", class: "city-link", id: "#{city.id}-target", data: { count: question_count } %>
        </li>

      <%- end %>
    </ul>
  </ul>
</div>

<%- if staff_member? %>
  <div class="stats">
    <h4>Stats</h4>

    <ul class="stats">
      <li>Users: <span class="stat"><%= User.count -%></span></li>
      <li>Questions: <span class="stat"><%= Question.count -%></span></li>
      <li>Signatures: <span class="stat"><%= Signature.count -%></span></li>
      <li>Answers: <span class="stat"><%= Answer.count -%></span></li>
      <li>Elected Officials and Public Figures: <span class="stat"><%= Person.count -%></span></li>
      <li>Jurisdictions: <span class="stat"><%= Metadatum.count -%></span></li>
    </ul>
  </div>
<%- end %>