We will use gem “d3-rails” (see https://github.com/iblue/d3-rails) in this project. Add this line to your Gemfile:

gem "d3-rails"

D3.js will be provided via the asset pipeline and you don’t need to copy their files into your application. Rails will get them from d3-rails automatically. Then add it to your manifest file at app/assets/javascripts/application.js:

//= require d3

2. Customise rails assets pipeline for “data folder” in assets folder

Usually we only store images, JavaScripts and CSS in “Assets folder”. To store “data” in assets, we have to add this line in “application.rb” to customize the assets pipeline.

 config.assets.paths << Rails.root.join(“data”)

3. Basic concept of D3.js

D3.js is a library to bind datas and DOMs. There are three basic stages for our data.
1. Enter: Import the data which will create DOMs later.
2. Update: Update the data and change DOMs.
3. Exit: Remove DOMs when less data is shown after update.

Generally speaking, a common pattern is to break the initial selection into three parts: the updating nodes to modify, the entering nodes to add, and the exiting nodes to remove. In most cases, if you don’t remove unnecessary DOMs, performance will be increasingly poor.

4. Draw with SVG

1. SVG area
2. scale
3. Import data
4. coerce to number

<body>
<h1>D3 TEST</h1>
<div id=”line-chart”></div>
<style>
.chart {
 border: 1px solid red;
}
.chart rect {
 fill: steelblue;
}

.chart text {
 fill: white;
 font: 10px sans-serif;
 text-anchor: end;
}

</style>
<svg class=”chart”></svg>
<script>

// Data
// var data = [4, 8, 15, 16, 23, 42];

var width = 420,
 barHeight = 20;

// Set the scale
var x = d3.scale.linear()
 // .domain([0, d3.max(data)])
 .range([0, width]);
var chart = d3.select(“.chart”)
 .attr(“width”, width);

d3.tsv(“<%= asset_path ‘example_data.tsv’ %>”, type, function(error, data) {
 x.domain([0, d3.max(data, function(d) { return d.value; })]);

chart.attr(“height”, barHeight * data.length);

var bar = chart.selectAll(“g”)
 .data(data)
 .enter().append(“g”)
 .attr(“transform”, function(d, i) { return “translate(0,” + i * barHeight + “)”; });

bar.append(“rect”)
 .attr(“width”, function(d) { return x(d.value); })
 .attr(“height”, barHeight — 1);

bar.append(“text”)
 .attr(“x”, function(d) { return x(d.value) — 3; })
 .attr(“y”, barHeight / 2)
 .attr(“dy”, “.35em”)
 .text(function(d) { return d.value; });
});

function type(d) {
 d.value = +d.value; // coerce to number
 return d;
}

</script>

Before you start to read this article, you have to know basic things in advance. here’s the list:

1. Register on Heroku and setup the ssh keys
2. Setup basic Rails development environment ( Ruby on Rails, Terminal )
3. Setup your development tools ( your favorite text editor and browser)
4. Know basic git command line and usage of Terminal

Ok, let’s get started. You just need only 15 minutes to go through the steps

1. Create your project named “skywalker”

Open your Terminal and simply type as below.

rails new skywalker

2. Go to “skywalker” project folder

Don’t forget this step or you’ll code like a stupid in the next steps.

cd skywalker

3. Setup templates and router

Generate the “controller” for your website “pages”. The controller defines the methods which connect to your templates. In this case, we will generate a controller called “main”, and several 5 pages called “index”, “about”, “service”, “product” and “contact”.

rails generate controller main

Then open your file “app/controllers/main_controller.rb” and modified the file like this…

class MainController < ApplicationController
    def index
 
    end
    def about
 
    end
    def service
 
    end
    def product
 
    end
    def contact
 
    end
end

Now the controller is ready. Next, you have to add templates to present your pages. Add files “index.html.erb”, “about.html.erb”, “service.html.erb”, “product.html.erb” and “contact.html.erb” in “app/views/main”.

Now the controller and templates are ready. Next, you have to tell Rails which page you are going to present in the browser when you type in the Url. Open the file “config/routes.rb” which is used to setup your Url. Modify the file like this…

Rails.application.routes.draw do
    get ‘about’ => ‘main#about’
    get ‘service’ => ‘main#service’
    get ‘product’ => ‘main#product’
    get ‘contact’ => ‘main#contact’
    root ‘main#index’
end

Let’s look at “ get ‘about’ => ‘main#about’ ”. This line means when you add ‘about’ to your url, Rails will go to “main” controller to find ‘about’ method which will call the template “view/main/about.html.erb” and you will see the “about” page in browser.

Then look at “ root ‘main#index’ ”. This line means when you add nothing after your Url , Rails will go to “main” controller and find the “index” to represent as your home page.

The last step before you run the server, open file “app/views/layouts/application.html.erb” and modify the file to add the navigation menu.

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’ => true %>
    <%= javascript_include_tag ‘application’, ‘data-turbolinks-track’ => true %>
    <%= csrf_meta_tags %>
</head>
<body>
    <%= link_to ‘index’ , root_path %>
    <%= link_to ‘about’ , about_path %>
    <%= link_to ‘service’ , service_path %>
    <%= link_to ‘product’ , product_path %>
    <%= link_to ‘contact’ , contact_path %>
    <%= yield %>
</body>
</html>

Now run the Rails server. Open your Terminal and run this…

rails s

Go to http://localhost:3000/ in your browser. You should see you home page and the navigation links. Try to click the links to go to different pages.

4. Setup your production environment

Open the “gemfile” in your project. You’ll see a list of gems you are using.

Notice that there’s a gem called “sqlite” which is used in “development” environment. While we are going to deploy our site to “production” enviroment which is different from local “development” environment, we have to assign gems to different environment. In production environment, we use “pg” instead of “sqlite3”. In addition, we have to add a heroku-specific gem called “rails_12factor” which enables serving assets in production and setting your logger to standard out.

Now, your code should be like this…

group :development do
 gem 'sqlite3'
end
group :production do
 gem 'pg'
 gem 'rails_12factor'
end

Then open “config/environments/production.rb” and modify the “config.assets.compile” from “false” to “true”, which is for setting up assets for production environment. This setting is for serving assets on Heroku.
By default Rails 4 will not serve the assets.

config.assets.compile = true

Open Terminal, leave server mode and type:

rake assets:precompile

This procedure is important for express the “looking”, i.e CSS, of your site correctly.

5. Deploy on Heroku

Open your Terminal and type as below to initialize and assign commit to your project.

git init
$ git add .
$ git commit -m "init"

Before you push your code, we have to create a heroku project which links to your local files. Type a little more codes in Terminal…

heroku create
git push heroku master

Heroku will automatically assign you a random Url. Type “heroku open” in Terminal to open it.

heroku open

Boooooom! Skywlker is right there!

Now you can play with your website and share with friends on the internet. If you have any question, feel free to contact me. I speak English or basic Chinese. Here’s my email address: hguotblog@gmail.com