hyper-d3 1.0.0.lap23

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

@@ -0,0 +1,27 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/elections_2016"
+
+class ElectionComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection('DIV') do |selection, election_data|
+    list = selection.append("ul")
+    max_votes = election_data.map(&:votes).max
+
+    election_data.each do |candidate|
+      item = list.append("li")
+        .style("position", "relative")
+      item.append("span")
+        .style("background-color", candidate.color)
+        .style("position", "absolute")
+        .style("width", "#{100.0 * candidate.votes / max_votes}%")
+        .style("height", "100%")
+      item.append("span")
+        .style("position", "absolute")
+        .text("#{candidate.name} - #{candidate.votes} votes")
+    end
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(ElectionComponent, data: Elections2016), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,42 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/harry_potter"
+
+class HarryPotterComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, hp_data|
+    svg = selection
+        .attr("height", "400px")
+        .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    bar_size = (400-40-20) / (hp_data.size)
+
+    x = D3.scale_linear.domain(hp_data.map(&:date).minmax).range([200,width-90])
+    y = D3.scale_ordinal.range(hp_data.size.times.map{|i| 40+i*bar_size}.reverse)
+    s = D3.scale_sqrt.domain([0, hp_data.map(&:pages).max]).range([0,50])
+
+    hp_data.each do |book|
+      svg.append("text")
+        .attr("x", x.(book.date))
+        .attr("y", y.(book.title) + bar_size/2)
+        .attr("font-size", s.(book.pages))
+        .text("📖")
+        .attr("text-anchor", "middle")
+      svg.append("text")
+        .attr("x", 0)
+        .attr("y", y.(book.title) + bar_size/2)
+        .text(book.title)
+    end
+
+    axis_bottom = D3.axis_bottom(x)
+      .tick_format(D3.time_format("%Y-%m-%d"))
+      .tick_values(hp_data.map(&:date))
+    svg.append("g")
+      .attr("transform", "translate(0, 380)")
+      .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(HarryPotterComponent, data: HarryPotterBooks), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,54 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/iphones"
+
+class IPhonesComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, i_data|
+    svg = selection
+            .attr("height", "500px")
+            .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    x = D3.scale_linear.domain(i_data.map(&:released).minmax).range([20,width-90]).nice
+    y = D3.scale_log.domain(i_data.map(&:size).minmax).range([380,20])
+    c = D3.scale_ordinal.range(D3.scheme_category_20)
+
+    # If there are multiple points on same date/size combination,
+    # move any duplicates 15px right (or 30px for triplicates etc.)
+    duplicates = Hash.new(0)
+
+    graph_area = svg.append("g")
+        .attr("transform", "translate(60, 20)")
+    graph_area.select_all("circle")
+      .data(i_data).enter
+      .append("circle")
+        .attr("cx"){|d|
+          count = duplicates[[d.released, d.size]]
+          duplicates[[d.released, d.size]] += 1
+          x.(d.released) + 15 * count
+        }
+        .attr("cy"){|d| y.(d.size)}
+        .attr("r", 10)
+        .attr("fill"){|d| c.(d.name)}
+
+    axis_bottom = D3.axis_bottom(x)
+      .tick_format(D3.time_format("%Y-%m-%d"))
+    axis_left = D3.axis_left(y)
+      .tick_values([4,8,16,32,64,128,256])
+      .tick_format{|v| "#{v} GB"}
+    graph_area.call(axis_left)
+    graph_area.append("g").attr("transform", "translate(0, 400)").call(axis_bottom)
+
+    D3.select("#visualization").append("table")
+      .select_all("tr")
+      .data(IPhones).enter
+      .append("tr")
+        .append("td")
+        .text{|d| d.name}
+        .style("background"){|d| c.(d.name)}
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(IPhonesComponent, data: IPhoneVariants), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,53 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/london_population"
+
+class LondonPopComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, lp_data|
+    svg = selection
+            .attr("height", "400px")
+            .attr("width", "100%")
+
+    svg.append("g").select_all("rect")
+      .data(lp_data)
+      .enter().append("rect")
+        .attr("width", 30)
+        .attr("height"){|d| d.greater/100_000 }
+        .attr("y"){|d| 200 - d.greater/100_000 }
+        .attr("x"){|d| (d.year-1800)*4 }
+        .attr("fill", "pink")
+
+    svg.append("g").select_all("rect")
+      .data(lp_data)
+      .enter().append("rect")
+        .attr("width", 30)
+        .attr("height"){|d| d.inner/100_000 }
+        .attr("y"){|d| 200 - d.inner/100_000 }
+        .attr("x"){|d| (d.year-1800)*4 }
+        .attr("fill", "steelblue")
+
+    svg.append("g").select_all("circle")
+      .data(lp_data)
+      .enter().append("circle")
+        .attr("fill", "pink")
+        .attr("cx"){|d| 15 + (d.year-1800)*4 }
+        .attr("cy", 300)
+        .attr("r"){|d| (d.greater**0.5)/150.0 }
+
+    svg.append("g").select_all("circle")
+      .data(lp_data)
+      .enter().append("circle")
+        .attr("fill", "steelblue")
+        .attr("cx"){|d| 15 + (d.year-1800)*4 }
+        .attr("cy", 300)
+        .attr("r"){|d| (d.inner**0.5)/150.0 }
+
+    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")
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(LondonPopComponent, data: LondonPopulation), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,49 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/london_population"
+
+class LondonPopAreaComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, lp_data|
+    svg = selection
+            .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.(lp_data))
+        .attr("fill", "pink")
+    graph_area.append("path")
+        .attr("d", inner_area.(lp_data))
+        .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")
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(LondonPopAreaComponent, data: LondonPopulation), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,60 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/man_vs_horse"
+
+class ManHorseComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, mh_data|
+    svg = selection
+            .attr("height", "1200px")
+            .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    max_time = mh_data.flat_map{|d| [d.horse_time, d.human_time]}.max
+    min_year = mh_data.map(&:year).min
+    max_year = mh_data.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(mh_data).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(mh_data).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(mh_data).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)
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(ManHorseComponent, data: ManVsHorse), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,56 @@
+require "hyper-d3"
+require "data/mtg_modern_colors"
+
+class ModernColorsComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection('DIV') do |selection, colors_data|
+    flex = selection
+      .style("display", "flex")
+      .style("flex-wrap", "wrap")
+
+      colors_data.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
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(ModernColorsComponent, data: MtgModernColors), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,70 @@
+require "hyper-d3"
+require "data/mtg_modern_creatures"
+
+class ModernCreaturesComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, creatures_data|
+    svg = selection
+            .attr("height", "600px")
+            .attr("width", "600px")
+
+    # Use one scale not two so it's a square
+    min, max = creatures_data.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, creatures_data.map(&:count).max])
+      .range(["rgb(128, 255, 128)", "rgb(128, 128, 255)"])
+
+    graph_area = svg.append("g").attr("transform", "translate(0,0)")
+
+    creatures_data.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
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(ModernCreaturesComponent, data: MtgModernCreatures), `document.body.querySelector("#visualization")`)

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

@@ -0,0 +1,62 @@
+require "react/test/utils" # just for mounting manually here, please ignore
+require "data/olympics_2016_medals"
+
+class OlympicsMedalsComponent
+  include Hyperloop::D3::Mixin
+
+  render_with_selection do |selection, medals2016_data|
+    height = medals2016_data.size * 24
+    svg = selection
+            .attr("height", "#{height}px")
+            .attr("width", "100%")
+
+    width = svg.style("width").to_i
+    max_medals = medals2016_data.map(&:total).max
+
+    x = D3.scale_linear.domain([0, max_medals]).range([0, width-50])
+    y = D3.scale_linear.domain([0, medals2016_data.size]).range([0, height])
+
+    svg.append("g").attr("transform", "translate(50, 0)")
+      .select_all("rect")
+      .data(medals2016_data)
+      .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(medals2016_data)
+      .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(medals2016_data)
+      .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(medals2016_data)
+      .enter.append("text")
+        .attr("x", 0)
+        .attr("y"){|d,i| y.(i) + 16}
+        .text{|d| d.acronym}
+        .style("font-size", "20px")
+  end
+end
+
+# manual mount of component, usually you would use the react_component view helper for example
+React.render(React.create_element(OlympicsMedalsComponent, data: Olympics2016Medals), `document.body.querySelector("#visualization")`)
+