hyper-d3 1.0.0.lap23

data/spec/test_app/app/assets/javascripts/paradox.rb

@@ -0,0 +1,64 @@
+require "hyper-d3"
+require "data/paradox"
+
+class ParadoxComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, paradox_data|
+    svg = selection
+            .attr("height", "600px")
+            .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    min_date, max_date = paradox_data.map(&:time).minmax
+    count = paradox_data.map{|g| [g.series, g.number]}.uniq.size
+    bar_height = 580 / count
+
+    x = D3.scale_linear.domain([min_date, max_date]).range([0,width-220])
+    y = D3.scale_ordinal.range(count.times.map{|x| bar_height * x})
+    c = D3.scale_ordinal.range(D3.scheme_category_10)
+    stripes = D3.scale_ordinal.range([0,1])
+
+    graph_area = svg.append("g")
+        .attr("transform", "translate(200, 20)")
+
+    paradox_data.each do |game|
+      dlc = (game.dlc != "")
+      full_game = "#{game.series} #{game.number}"
+
+      graph_area.append("circle")
+        .attr("cx", x.(game.time))
+        .attr("cy", y.(full_game))
+        .attr("r", dlc ? 8 : 12)
+        .attr("fill", c.("#{game.series}"))
+        .attr("opacity", 0.6)
+        .attr("stroke-width", "1px")
+        .attr("stroke", "black")
+
+      unless dlc
+        graph_area.append("text")
+          .attr("x", -200 + 5)
+          .attr("y", y.(full_game) + 4)
+          .text(full_game)
+
+        color = D3.color(c.("#{game.series}"))
+        color = color.brighter(stripes.("#{full_game}"))
+        graph_area.append("rect")
+          .attr("x", -200)
+          .attr("width", width)
+          .attr("y", y.(full_game) - bar_height/2)
+          .attr("height", bar_height)
+          .attr("fill", color)
+          .attr("opacity", 0.2)
+      end
+    end
+
+
+    axis_bottom = D3.axis_bottom(x)
+      .tick_format(D3.time_format("%B %Y"))
+    graph_area.append("g").attr("transform", "translate(0, 560)").call(axis_bottom)
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(ParadoxComponent, data: ParadoxGames), `document.body.querySelector("#visualization")`)

data/spec/test_app/app/assets/javascripts/polish_pms.rb

@@ -0,0 +1,60 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/polish_pms"
+
+class PolishPMsComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, pm_data|
+    svg = selection
+            .attr("height", "600px")
+            .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    min_date = pm_data.map(&:start).min
+    max_date = pm_data.map(&:end).max
+
+    x = D3.scale_linear.domain([min_date, max_date]).range([100,width-90])
+    y = D3.scale_linear.domain([0, pm_data.size+1]).range([0, 580])
+    c = D3.scale_ordinal.range(D3.scheme_category_20)
+
+    graph_area = svg.append("g")
+        .attr("transform", "translate(60, 20)")
+
+    graph_area.append("g")
+      .select_all("rect")
+      .data(pm_data).enter
+      .append("rect")
+        .attr("x"){|d| x.(d.start) }
+        .attr("y"){|d,i| y.(i) }
+        .attr("width"){|d| x.(d.end) - x.(d.start) }
+        .attr("height"){|d,i| 0.8 * (y.(i+1) - y.(i)) }
+        .attr("fill"){|d| c.(d.party)}
+
+    graph_area.append("g")
+      .select_all("text")
+      .data(pm_data).enter
+      .append("text")
+        .text{|d| d.name}
+        .attr("x"){|d| x.(d.start) - 4 }
+        .attr("y"){|d,i| y.(i+0.5) }
+        .attr("text-anchor", "end")
+        .style("font-size", "12px")
+
+    graph_area.append("g")
+      .select_all("text")
+      .data(pm_data).enter
+      .append("text")
+        .text{|d| d.party }
+        .attr("x"){|d| x.(d.start) + 4 }
+        .attr("y"){|d,i| y.(i+0.5) }
+        .attr("text-anchor", "begin")
+        .style("font-size", "12px")
+
+    axis_bottom = D3.axis_bottom(x)
+      .tick_format(D3.time_format("%B %Y"))
+    graph_area.append("g").attr("transform", "translate(0, 560)").call(axis_bottom)
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(PolishPMsComponent, data: PolishPMs), `document.body.querySelector("#visualization")`)

data/spec/test_app/app/assets/javascripts/star_trek_voyager.rb

@@ -0,0 +1,44 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/star_trek_voyager"
+
+class StarTrekVoyagerComponent < Hyperloop::D3::Component
+  render_with_selection('DIV') do |selection, voyager_data|
+    svg = selection.append("svg")
+            .attr("height", "600px")
+            .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    x = D3.scale_linear.domain([0, voyager_data.size-1]).range([40, width-20])
+    y = D3.scale_linear.domain(voyager_data.map(&:rating).minmax).range([550, 50])
+    c = D3.scale_ordinal.range(D3.scheme_category_10)
+
+    (1..7).each do |season|
+      episodes = voyager_data.select{|episode| episode.season == season }
+      avg = D3.mean(episodes.map(&:rating))
+      svg.append("line")
+        .attr("x1", x.(episodes.map(&:number).min))
+        .attr("x2", x.(episodes.map(&:number).max))
+        .attr("y1", y.(avg))
+        .attr("y2", y.(avg))
+        .attr("stroke", c.(season))
+        .attr("stroke-width", 2)
+        .attr("opacity", 0.4)
+    end
+
+    voyager_data.each do |episode|
+      svg.append("circle")
+        .attr("cx", x.(episode.number))
+        .attr("cy", y.(episode.rating))
+        .attr("r", 4)
+        .attr("fill", c.(episode.season))
+        .attr("opacity", 0.6)
+    end
+
+    axis = D3.axis_left(y)
+    svg.append("g").attr("transform","translate(30, 0)")
+      .call(axis)
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(StarTrekVoyagerComponent, data: StarTrekVoyager), `document.body.querySelector("#visualization")`)

data/spec/test_app/app/assets/javascripts/weather_in_london.rb

@@ -0,0 +1,69 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/weather_in_london"
+
+class WeatherInLondonComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection('DIV') do |selection, data|
+    row = selection.append("div").attr("class", "row")
+    min_temp = data.map(&:min).min
+    max_temp = data.map(&:max).max
+    
+    x = D3.scale_linear.domain([1,31]).range([30, 190])
+    y = D3.scale_linear.domain([min_temp, max_temp]).range([180, 20])
+
+    (1..12).each do |month|
+      header = D3.time_format("%B").(Time.parse("2016-#{month}-01"))
+      panel = row.append("div").attr("class", "col-xs-6 col-sm-4")
+      panel.append("h3").text(header)
+      svg = panel.append("svg")
+        .attr("height", "200px")
+        .attr("width", "200px")
+
+      svg.append("rect")
+        .attr("x", 20)
+        .attr("y", 10)
+        .attr("width", 180)
+        .attr("height", 180)
+        .attr("fill", "lightgrey")
+
+      m_data = data.select{|row| row.month == month}
+
+      max_temp = D3.line
+                    .x{|d| x.(d.day) }
+                    .y{|d| y.(d.max) }
+                    .curve(D3.curve_natural)
+      svg.append("path")
+          .attr("d", max_temp.(m_data))
+          .attr("stroke", "red")
+          .attr("stroke-width", "2px")
+          .attr("fill", "none")
+
+      mean_temp = D3.line
+                    .x{|d| x.(d.day) }
+                    .y{|d| y.(d.mean) }
+                    .curve(D3.curve_natural)
+      svg.append("path")
+          .attr("d", mean_temp.(m_data))
+          .attr("stroke", "black")
+          .attr("stroke-width", "2px")
+          .attr("fill", "none")
+
+      min_temp = D3.line
+                    .x{|d| x.(d.day) }
+                    .y{|d| y.(d.min) }
+                    .curve(D3.curve_natural)
+      svg.append("path")
+          .attr("d", min_temp.(m_data))
+          .attr("stroke", "blue")
+          .attr("stroke-width", "2px")
+          .attr("fill", "none")
+
+      axis_left = D3.axis_left(y).tick_size(2)
+      svg.append("g").attr("transform", "translate(20,0)").call(axis_left)
+    end
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(WeatherInLondonComponent, data: WeatherInLondon), `document.body.querySelector("#visualization")`)

data/spec/test_app/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/spec/test_app/app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

data/spec/test_app/app/channels/application_cable/connection.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+  end
+end

data/spec/test_app/app/controllers/application_controller.rb

@@ -0,0 +1,27 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery with: :exception
+
+  @@visualizations = {
+    elections_2016: "Elections 2016",
+    london_population: "London Population",
+    london_population_area: "London Population - Area Chart",
+    olympics_2016_medals: "Olympics 2016 Medals",
+    iphones: "iPhones",
+    polish_pms: "Polish Prime Ministers",
+    man_vs_horse: "Man versus Horse Marathon",
+    paradox: "Paradox Interactive Games",
+    weather_in_london: "Weather in London",
+    harry_potter: "Harry Potter Books",
+    mtg_modern_creatures: "MTG: Creatures in Modern",
+    mtg_modern_colors: "MTG: Spell Cards in Modern",
+    star_trek_voyager: "Star Trek: Voyager",
+  }
+
+  def index
+    @visualizations = @@visualizations
+  end
+
+  def visualization
+    @visualizations = @@visualizations
+  end
+end

data/spec/test_app/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/spec/test_app/app/jobs/application_job.rb

@@ -0,0 +1,2 @@
+class ApplicationJob < ActiveJob::Base
+end

data/spec/test_app/app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: 'from@example.com'
+  layout 'mailer'
+end

data/spec/test_app/app/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  self.abstract_class = true
+end

data/spec/test_app/app/views/application/index.erb

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demos</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+</head>
+<body>
+  <div class="container">
+    <h1>Hyper-D3 Demos</h1>
+    <ul>
+      <% @visualizations.sort.each do |script, title| %>
+        <li><%= link_to title, "/visualizations/#{script}" %></li>
+      <% end %>
+    </ul>
+  </div>
+</body>
+</html>

data/spec/test_app/app/views/application/visualization.erb

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title><%= @visualizations[params[:id].to_sym] %></title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+  <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css' rel='stylesheet'/>
+  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js'></script>
+  <%= javascript_include_tag 'application' %>
+  <script>hljs.initHighlightingOnLoad();</script>
+</head>
+<body>
+  <div class="container">
+    <h1><%= @visualizations[params[:id].to_sym] %></h1>
+    <div id="visualization"></div>
+    <div id="code">
+      <h1>Code</h1>
+      <pre><code><%=
+        open("#{__dir__}/../../assets/javascripts/#{params[:id]}.rb").read
+      %></code></pre>
+    </div>
+    <script src="../assets/<%= params[:id] %>.js"></script>
+    <script>
+      window.onload = function() { Opal.load("<%= params[:id] %>"); }
+    </script>
+  </div>
+</body>
+</html>

data/spec/test_app/app/views/layouts/application.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TestApp</title>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/spec/test_app/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+load Gem.bin_path('bundler', 'bundle')

data/spec/test_app/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path('../config/application', __dir__)
+require_relative '../config/boot'
+require 'rails/commands'

data/spec/test_app/bin/rake

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run

data/spec/test_app/bin/setup

@@ -0,0 +1,38 @@
+#!/usr/bin/env ruby
+require 'pathname'
+require 'fileutils'
+include FileUtils
+
+# path to your application root.
+APP_ROOT = Pathname.new File.expand_path('../../', __FILE__)
+
+def system!(*args)
+  system(*args) || abort("\n== Command #{args} failed ==")
+end
+
+chdir APP_ROOT do
+  # This script is a starting point to setup your application.
+  # Add necessary setup steps to this file.
+
+  puts '== Installing dependencies =='
+  system! 'gem install bundler --conservative'
+  system('bundle check') || system!('bundle install')
+
+  # Install JavaScript dependencies if using Yarn
+  # system('bin/yarn')
+
+
+  # puts "\n== Copying sample files =="
+  # unless File.exist?('config/database.yml')
+  #   cp 'config/database.yml.sample', 'config/database.yml'
+  # end
+
+  puts "\n== Preparing database =="
+  system! 'bin/rails db:setup'
+
+  puts "\n== Removing old logs and tempfiles =="
+  system! 'bin/rails log:clear tmp:clear'
+
+  puts "\n== Restarting application server =="
+  system! 'bin/rails restart'
+end