This chapter is from the book
This chapter is from the book
This chapter is from the book
Create the Views
We can turn our attention to creating the chord diagram now that we have our data in place. We need a controller, view, and routes to support the view and asynchronous data call.
Departures Controller and Routes
We need two routes and actions for the view and the AJAX data callback. Just as with the other apps and charts before, the index action does not need to do anything. The real work happens when the JavaScript function calls back to the server and asks for the data. Let’s start by creating a controller (rails g controller departures --skip-helper). Put these actions in the DeparturesController.
def index; end
def departure_matrix
airports, matrix = Departure.departure_matrix
render :json => {
:airports => airports,
:matrix => matrix
}
end
In order to make the controller actions do anything, we need to define some routes. Here is the cleaned up routes file:
Rails.application.routes.draw do root 'departures#index' get 'departures/index' get 'departures/departure_matrix' end
Departures View
The view looks a lot like all the other views in this book. I pass the data route into the makeChordChart() function so we can use that it for multiple chord diagrams. This code goes in app/views/departures/index.html.erb:
<div id="chart"></div>
<script>
$(document).on('ready page:load', function(event) {
// apply non-idempotent transformations to the body
makeChordChart('/departures/departure_matrix.json');
});
</script>
We also need to include the D3 library in the application layout (app/views/layouts/application.html.erb). Put this before the application’s JavaScript is loaded:
<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js' %>
Departures Style
The stylesheet looks very similar to the other stylesheets. Put this code in app/assets/stylesheets/departures.scss:
@import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif: i|PT+Sans|PT+Sans:b);
body {
background: #fcfcfa;
color: #333;
font-family: "PT Serif", serif;
margin: 1em auto 4em auto;
position: relative;
width: 960px;
}
svg {
font: 10px sans-serif;
}
#circle circle {
fill: none;
pointer-events: all;
}
.group path {
fill-opacity: .5;
}
path.chord {
stroke: #000;
stroke-width: .25px;
}
#circle:hover path.fade {
display: none;
}