opal-d3 0.0.20170205

data/demo/app/london_population_area.rb

@@ -0,0 +1,42 @@
+require "opal"
+require "opal-d3"
+require "data/london_population"
+
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "500px")
+        .attr("width", "100%")
+width = svg.style("width").to_i
+
+x = D3.scale_linear.domain([1801, 2011]).range([0, width-60])
+y = D3.scale_linear.domain([0, 9_000_000]).range([400, 0])
+
+greater_area = D3.area
+            .x{|d| x.(d.year) }
+            .y0(400)
+            .y1{|d| y.(d.greater)}
+            .curve(D3.curve_natural)
+
+inner_area = D3.area
+            .x{|d| x.(d.year) }
+            .y0(400)
+            .y1{|d| y.(d.inner)}
+            .curve(D3.curve_natural)
+
+graph_area = svg.append("g")
+    .attr("transform", "translate(60, 20)")
+graph_area.append("path")
+    .attr("d", greater_area.(LondonPopulation))
+    .attr("fill", "pink")
+graph_area.append("path")
+    .attr("d", inner_area.(LondonPopulation))
+    .attr("fill", "steelblue")
+
+axis_bottom = D3.axis_bottom(x).tick_format(D3.format("d"))
+axis_left = D3.axis_left(y).tick_format{|d| "#{d/1_000_000}M"}
+graph_area.call(axis_left)
+graph_area.append("g").attr("transform", "translate(0, 400)").call(axis_bottom)
+
+list = D3.select("#visualization").append("table")
+list.append("tr").append("td").text("Outer London").style("background", "pink")
+list.append("tr").append("td").text("Inner London").style("background", "steelblue")

data/demo/app/man_vs_horse.rb

@@ -0,0 +1,53 @@
+require "opal"
+require "opal-d3"
+require "data/man_vs_horse"
+
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "1200px")
+        .attr("width", "100%")
+width = svg.style("width").to_i
+
+max_time = ManVsHorse.flat_map{|d| [d.horse_time, d.human_time]}.max
+min_year = ManVsHorse.map(&:year).min
+max_year = ManVsHorse.map(&:year).max
+
+x = D3.scale_linear.domain([0, max_time]).range([0,width-90]).nice
+y = D3.scale_linear.domain([min_year, max_year+1]).range([0, 1160])
+c = D3.scale_ordinal.range(D3.scheme_category_10)
+
+graph_area = svg.append("g")
+  .attr("transform", "translate(60, 20)")
+
+graph_area.append("g")
+  .select_all("rect")
+  .data(ManVsHorse).enter
+  .append("rect")
+    .attr("x"){|d| 0 }
+    .attr("y"){|d| y.(d.year) }
+    .attr("width"){|d| x.(d.horse_time) }
+    .attr("height"){|d,i| 0.35 * (y.(i+1) - y.(i)) }
+    .attr("fill"){|d| c.("horse") }
+
+graph_area.append("g")
+  .select_all("rect")
+  .data(ManVsHorse).enter
+  .append("rect")
+    .attr("x"){|d| 0 }
+    .attr("y"){|d| y.(d.year+0.45) }
+    .attr("width"){|d| x.(d.human_time) }
+    .attr("height"){|d,i| 0.35 * (y.(i+1) - y.(i)) }
+    .attr("fill"){|d| c.("man") }
+
+svg.append("g")
+  .attr("transform", "translate(0, 20)")
+  .select_all("text")
+  .data(ManVsHorse).enter
+  .append("text")
+    .attr("x"){|d| 0 }
+    .attr("y"){|d| y.(d.year+0.5) }
+    .text{|d| (d.winner == "Horse" ? "🐎" : "🏃") + " #{d.year}" }
+
+axis_bottom = D3.axis_bottom(x)
+  .tick_format{|v| h = (v / 60).floor; m  = (v % 60).floor; "%d:%02d" % [h,m] }
+graph_area.append("g").attr("transform", "translate(0, 1160)").call(axis_bottom)

data/demo/app/mtg_modern_colors.rb

@@ -0,0 +1,49 @@
+require "opal"
+require "opal-d3"
+require "data/mtg_modern_colors"
+
+flex = D3.select("#visualization")
+  .append("div")
+  .style("display", "flex")
+  .style("flex-wrap", "wrap")
+
+MtgModernColors.group_by(&:cmc).sort.each do |cmc, cards|
+  svg = flex.append("svg")
+    .attr("height", "200px")
+    .attr("width", "200px")
+  graph_area = svg
+    .append("g")
+    .attr("transform", "translate(100,100)")
+  graph_area.append("text")
+    .attr("text-anchor", "middle")
+    .attr("y", 10)
+    .text(cmc)
+    .attr("font-size", "30px")
+
+  cards.sort_by!{|c| "wubrgxm".index(c.color)}
+  pie = D3.pie.value(&:count).sort(nil)
+
+  pie.(cards).each do |arc_data|
+    arc = D3.arc
+      .inner_radius(40)
+      .outer_radius(90)
+      .start_angle(arc_data[:start_angle])
+      .end_angle(arc_data[:end_angle])
+
+    color = {
+      w: "white",
+      u: "blue",
+      b: "black",
+      r: "red",
+      g: "green",
+      x: "grey",
+      m: "yellow",
+    }[arc_data[:data].color]
+
+    graph_area.append("path")
+      .attr("d", arc.())
+      .attr("fill", color)
+      .attr("stroke", "black")
+      .attr("stroke-width", "1px")
+  end
+end

data/demo/app/mtg_modern_creatures.rb

@@ -0,0 +1,63 @@
+require "opal"
+require "opal-d3"
+require "data/mtg_modern_creatures"
+
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "600px")
+        .attr("width", "600px")
+
+# Use one scale not two so it's a square
+min, max = MtgModernCreatures.flat_map{|c| [c.power, c.toughness]}.minmax
+
+pt = D3.scale_linear.domain([min-1, max+1]).range([0, 580])
+box_size = pt.(1) - pt.(0)
+c = D3.scale_log
+  .domain([1, MtgModernCreatures.map(&:count).max])
+  .range(["rgb(128, 255, 128)", "rgb(128, 128, 255)"])
+
+graph_area = svg.append("g").attr("transform", "translate(0,0)")
+
+MtgModernCreatures.each do |cards|
+  graph_area.append("rect")
+    .attr("x", pt.(cards.toughness))
+    .attr("y", pt.(cards.power))
+    .attr("height", box_size)
+    .attr("width", box_size)
+    .attr("fill", c.(cards.count))
+  graph_area.append("text")
+    .attr("x", pt.(cards.toughness) + box_size/2)
+    .attr("y", pt.(cards.power) + box_size/2 + 5)
+    .attr("text-anchor", "middle")
+    .text(cards.count)
+end
+
+(min..max).each do |v|
+  graph_area.append("text")
+    .attr("x", pt.(v) + box_size/2)
+    .attr("y", pt.(min-1) + box_size/2 + 5)
+    .attr("text-anchor", "middle")
+    .text(v)
+
+  graph_area.append("text")
+    .attr("y", pt.(v) + box_size/2 + 5)
+    .attr("x", pt.(min-1) + box_size/2)
+    .attr("text-anchor", "middle")
+    .text(v)
+end
+
+(min..max+1).each do |v|
+  graph_area.append("line")
+    .attr("x1", pt.(min))
+    .attr("x2", pt.(max+1))
+    .attr("y1", pt.(v))
+    .attr("y2", pt.(v))
+    .attr("stroke", "black")
+
+  graph_area.append("line")
+    .attr("y1", pt.(min))
+    .attr("y2", pt.(max+1))
+    .attr("x1", pt.(v))
+    .attr("x2", pt.(v))
+    .attr("stroke", "black")
+end

data/demo/app/olympics_2016_medals.rb

@@ -0,0 +1,54 @@
+require "opal"
+require "opal-d3"
+require "data/olympics_2016_medals"
+
+height = Olympics2016Medals.size * 24
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "#{height}px")
+        .attr("width", "100%")
+
+width = svg.style("width").to_i
+max_medals = Olympics2016Medals.map(&:total).max
+
+x = D3.scale_linear.domain([0, max_medals]).range([0, width-50])
+y = D3.scale_linear.domain([0, Olympics2016Medals.size]).range([0, height])
+
+svg.append("g").attr("transform", "translate(50, 0)")
+  .select_all("rect")
+  .data(Olympics2016Medals)
+  .enter.append("rect")
+    .attr("height", 20)
+    .attr("width"){|d| x.(d.gold)}
+    .attr("x", 0)
+    .attr("y"){|d,i| y.(i)}
+    .attr("fill", "gold")
+
+svg.append("g").attr("transform", "translate(50, 0)")
+  .select_all("rect")
+  .data(Olympics2016Medals)
+  .enter.append("rect")
+    .attr("height", 20)
+    .attr("width"){|d| x.(d.silver)}
+    .attr("x"){|d| x.(d.gold) }
+    .attr("y"){|d,i| y.(i)}
+    .attr("fill", "silver")
+
+svg.append("g").attr("transform", "translate(50, 0)")
+  .select_all("rect")
+  .data(Olympics2016Medals)
+  .enter.append("rect")
+    .attr("height", 20)
+    .attr("width"){|d| x.(d.bronze)}
+    .attr("x"){|d| x.(d.gold + d.silver) }
+    .attr("y"){|d,i| y.(i)}
+    .attr("fill", "#CD7F32")
+
+svg.append("g")
+  .select_all("text")
+  .data(Olympics2016Medals)
+  .enter.append("text")
+    .attr("x", 0)
+    .attr("y"){|d,i| y.(i) + 16}
+    .text{|d| d.acronym}
+    .style("font-size", "20px")

data/demo/app/paradox.rb

@@ -0,0 +1,57 @@
+require "opal"
+require "opal-d3"
+require "data/paradox"
+
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "600px")
+        .attr("width", "100%")
+width = svg.style("width").to_i
+
+min_date, max_date = ParadoxGames.map(&:time).minmax
+count = ParadoxGames.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)")
+
+ParadoxGames.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)

data/demo/app/polish_pms.rb

@@ -0,0 +1,53 @@
+require "opal"
+require "opal-d3"
+require "data/polish_pms"
+
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "600px")
+        .attr("width", "100%")
+width = svg.style("width").to_i
+
+min_date = PolishPMs.map(&:start).min
+max_date = PolishPMs.map(&:end).max
+
+x = D3.scale_linear.domain([min_date, max_date]).range([100,width-90])
+y = D3.scale_linear.domain([0, PolishPMs.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(PolishPMs).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(PolishPMs).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(PolishPMs).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)

data/demo/app/star_trek_voyager.rb

@@ -0,0 +1,39 @@
+require "opal"
+require "opal-d3"
+require "data/star_trek_voyager"
+
+svg = D3.select("#visualization")
+        .append("svg")
+        .attr("height", "600px")
+        .attr("width", "100%")
+width = svg.style("width").to_i
+
+x = D3.scale_linear.domain([0, StarTrekVoyager.size-1]).range([40, width-20])
+y = D3.scale_linear.domain(StarTrekVoyager.map(&:rating).minmax).range([550, 50])
+c = D3.scale_ordinal.range(D3.scheme_category_10)
+
+(1..7).each do |season|
+  episodes = StarTrekVoyager.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
+
+StarTrekVoyager.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)

data/demo/app/weather_in_london.rb

@@ -0,0 +1,62 @@
+require "opal"
+require "opal-d3"
+require "data/weather_in_london"
+
+row = D3.select("#visualization").append("div").attr("class", "row")
+
+min_temp = WeatherInLondon.map(&:min).min
+max_temp = WeatherInLondon.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")
+
+  data = WeatherInLondon.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.(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.(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.(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