hyper-d3 1.0.0.lap23

data/spec/selection_data_spec.rb

@@ -0,0 +1,64 @@
+describe "d3 - selection - data" do
+  after(:each) do
+    D3.select("#test-area").html("")
+  end
+  let(:root) { D3.select("#test-area") }
+  let(:html) { root.html }
+
+  describe "list" do
+    let(:data) {[
+      {name: "A", value: 10},
+      {name: "B", value: 20},
+      {name: "C", value: 30},
+    ]}
+    it "enter" do
+      root
+        .append("ul")
+        .select_all("li")
+        .data(data)
+        .enter
+        .append("li")
+        .html{|d| "<b>#{d[:name]}</b>"}
+        .style("font-size"){|d| "#{d[:value]}px"}
+      expect(html).to eq([
+        %Q[<ul>],
+        %Q[<li style="font-size: 10px;"><b>A</b></li>],
+        %Q[<li style="font-size: 20px;"><b>B</b></li>],
+        %Q[<li style="font-size: 30px;"><b>C</b></li>],
+        %Q[</ul>],
+      ].join)
+    end
+  end
+
+  describe "matrix" do
+    let(:data) {
+      [
+        [11975,  5871, 8916, 2868],
+        [ 1951, 10048, 2060, 6171],
+        [ 8010, 16145, 8090, 8045],
+        [ 1013,   990,  940, 6907],
+      ]
+    }
+    it do
+      tr = root
+        .append("table")
+        .select_all("tr")
+        .data(data)
+        .enter
+        .append("tr")
+      tr.select_all("td")
+        .data{|d| d}
+        .enter
+        .append("td")
+        .text{|d| d}
+      expect(html).to eq([
+        %Q[<table>],
+        %Q[<tr><td>11975</td><td>5871</td><td>8916</td><td>2868</td></tr>],
+        %Q[<tr><td>1951</td><td>10048</td><td>2060</td><td>6171</td></tr>],
+        %Q[<tr><td>8010</td><td>16145</td><td>8090</td><td>8045</td></tr>],
+        %Q[<tr><td>1013</td><td>990</td><td>940</td><td>6907</td></tr>],
+        %Q[</table>],
+      ].join)
+    end
+  end
+end

data/spec/selection_manipulation_spec.rb

@@ -0,0 +1,166 @@
+describe "d3 - selection - DOM manipulation" do
+  after(:each) do
+    D3.select("#test-area").html("")
+  end
+  let(:root) { D3.select("#test-area") }
+  let(:html) { root.html }
+
+  describe do
+    before(:each) do
+      D3.select("div")
+        .select_all("span")
+        .data(%W[a b c d e])
+        .enter
+        .append("span")
+        .attr("class"){|d| d}
+    end
+    let(:classes) {
+      html.scan(/<span.*?<\/span>/).map{|x| x[/class="([^"]*)"/, 1] || "" }
+    }
+
+    it "selection.raise" do
+      D3.select(".c").raise
+      expect(classes).to eq(["a", "b", "d", "e", "c"])
+    end
+
+    it "selection.lower" do
+      D3.select(".c").lower
+      expect(classes).to eq(["c", "a", "b", "d", "e"])
+    end
+
+    it "selection.classed - add" do
+      D3.select_all("span").classed("a b", true)
+      expect(classes).to eq(["a b", "b a", "c a b", "d a b", "e a b"])
+    end
+
+    it "selection.classed - remove" do
+      D3.select_all("span").classed("a b", false)
+      expect(classes).to eq(["", "", "c", "d", "e"])
+    end
+
+    it "selection.classed - function" do
+      D3.select_all("span").classed("x"){|d,i| i.even?}
+      expect(classes).to eq(["a x", "b", "c x", "d", "e x"])
+    end
+
+    it "selection.classed - query" do
+      expect(D3.select(".c").classed("a")).to eq(false)
+      expect(D3.select(".c").classed("c")).to eq(true)
+      expect(D3.select(".c").classed("b c")).to eq(false)
+    end
+  end
+
+  it "selection.attr / selection.style" do
+    d = D3.select_all("div")
+    d.append("p").attr("class", "big").style("color", "red")
+    expect(d.html).to eq(%Q[<p class="big" style="color: red;"></p>])
+
+    p = d.select_all("p")
+    expect(p.attr("class")).to eq("big")
+    expect(p.style("color")).to eq("red")
+  end
+
+  it "selection.style priority" do
+    d = D3.select_all("div")
+    d.append("p").style("color", "red", "important")
+    expect(d.html).to eq(%Q[<p style="color: red !important;"></p>])
+  end
+
+  it "selection.property" do
+    d = D3.select_all("div")
+    d.html("<input type=radio name=a class=x><input type=radio name=a class=y>")
+    expect(D3.select(".x").property("checked")).to eq(false)
+    expect(D3.select(".y").property("checked")).to eq(false)
+
+    D3.select(".x").property("checked", true)
+    expect(D3.select(".x").property("checked")).to eq(true)
+    expect(D3.select(".y").property("checked")).to eq(false)
+
+    D3.select(".y").property("checked", true)
+    expect(D3.select(".x").property("checked")).to eq(false)
+    expect(D3.select(".y").property("checked")).to eq(true)
+
+    expect(d.html).to eq(
+      %Q[<input type="radio" name="a" class="x"><input type="radio" name="a" class="y">]
+    )
+  end
+
+  describe do
+    before(:each) do
+      D3.select("div")
+        .select_all("span")
+        .data(%W[a b c d e])
+        .enter
+        .append("span")
+        .attr("class"){|d| d}
+    end
+
+    it "selection.append name" do
+      D3.select_all("div").append("i")
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span><span class="e"></span><i></i>]
+      )
+    end
+
+    it "selection.append dom element" do
+      D3.select_all("div").append{ `document.createElement("b")` }
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span><span class="e"></span><b></b>]
+      )
+    end
+
+    it "selection.insert name" do
+      D3.select_all("div").insert("i")
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span><span class="e"></span><i></i>]
+      )
+    end
+
+    it "selection.insert dom element" do
+      D3.select_all("div").insert{ `document.createElement("b")` }
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span><span class="e"></span><b></b>]
+      )
+    end
+
+    it "selection.insert before" do
+      D3.select_all("div").insert("i", ".c")
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><i></i><span class="c"></span><span class="d"></span><span class="e"></span>]
+      )
+    end
+
+    it "selection.insert before dom element" do
+      D3.select_all("div").insert("i"){ `document.getElementsByClassName("d")[0]` }
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="c"></span><i></i><span class="d"></span><span class="e"></span>]
+      )
+    end
+
+    it "selection.insert before - two functions" do
+      D3.select_all("div").insert(
+        proc{`document.createElement("b")`},
+        proc{`document.getElementsByClassName("d")[0]`}
+      )
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="c"></span><b></b><span class="d"></span><span class="e"></span>]
+      )
+    end
+
+    it "selection.remove" do
+      D3.select(".c").remove
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"></span><span class="d"></span><span class="e"></span>]
+      )
+    end
+
+    # This interface is somewhat awkward
+    it "selection.remove and add back" do
+      sel = D3.select(".c").remove
+      D3.select(".b").append{ sel.node.to_n }
+      expect(html).to eq(
+        %Q[<span class="a"></span><span class="b"><span class="c"></span></span><span class="d"></span><span class="e"></span>]
+      )
+    end
+  end
+end

data/spec/selection_spec.rb

@@ -0,0 +1,187 @@
+describe "d3 - selection" do
+  after(:each) do
+    D3.select("#test-area").html("")
+  end
+
+  it "d3.selection" do
+    s = D3.selection
+    expect(s).to be_instance_of(D3::Selection)
+    expect(s.size).to eq(1)
+  end
+
+  it "d3.select" do
+    s = D3.select("div")
+    expect(s).to be_instance_of(D3::Selection)
+    expect(s.size).to eq(1)
+    expect(s.empty?).to eq(false)
+
+    s = D3.select("h6")
+    expect(s).to be_instance_of(D3::Selection)
+    expect(s.size).to eq(0)
+    expect(s.empty?).to eq(true)
+  end
+
+  it "d3.select_all" do
+    s = D3.select_all("div")
+    expect(s).to be_instance_of(D3::Selection)
+    expect(s.size).to eq(1)
+    expect(s.empty?).to eq(false)
+
+    s = D3.select_all("h6")
+    expect(s).to be_instance_of(D3::Selection)
+    expect(s.size).to eq(0)
+    expect(s.empty?).to eq(true)
+  end
+
+  describe "nested selections" do
+    before(:each) do
+      D3.select("div").html("
+        <p><b>1</b><b>2</b><b>3</b></p>
+        <p><b>4</b><b>5</b><b>6</b></p>
+      ")
+    end
+
+    it "selection.select" do
+      expect(D3.select("p").select("b").size).to eq(1)
+      expect(D3.select_all("p").select("b").size).to eq(2)
+    end
+
+    it "selection.select_all" do
+      expect(D3.select("p").select_all("b").size).to eq(3)
+      expect(D3.select_all("p").select_all("b").size).to eq(6)
+    end
+  end
+
+  describe "selection.filter - selector string" do
+    before(:each) do
+      D3.select("div").html("
+        <span class='a b'>1</span>
+        <span class='b c'>2</span>
+        <span class='c d'>3</span>
+      ")
+    end
+    let(:a) { D3.select_all("span.a") }
+    let(:b) { D3.select_all("span.b") }
+    let(:c) { D3.select_all("span.c") }
+    let(:d) { D3.select_all("span.d") }
+
+    it do
+      expect(b.filter(".c").size).to eq(1)
+    end
+  end
+
+  describe "selection.filter - filter" do
+    before(:each) do
+      D3.select("div")
+        .select_all("span")
+        .data(%W[a b c d])
+        .enter
+        .append("span")
+        .text{|d| d}
+    end
+
+    it "function" do
+      D3.select_all("span").filter{|d| d =~ /[bc]/}.attr("class", "x")
+      expect(D3.select("div").html).to eq(
+        %Q[<span class="x">a</span><span>b</span><span>c</span><span class="x">d</span>]
+      )
+    end
+
+    it "function with index" do
+      D3.select_all("span").filter{|d,i| i.even?}.attr("class", "y")
+      expect(D3.select("div").html).to eq(
+        %Q[<span class="y">a</span><span>b</span><span class="y">c</span><span>d</span>]
+      )
+    end
+  end
+
+  describe "selection.each" do
+    before(:each) do
+      D3.select("div")
+        .select_all("span")
+        .data(%W[a b c d])
+        .enter
+        .append("span")
+        .text{|d| d}
+    end
+    it do
+      results = []
+      D3.select_all("span").each do |n|
+        results << n
+      end
+      expect(results).to eq(["a", "b", "c", "d"])
+    end
+
+    it do
+      results = []
+      D3.select_all("span").each do |n,i|
+        results << [n,i]
+      end
+      expect(results).to eq([["a", 0], ["b", 1], ["c", 2], ["d", 3]])
+    end
+  end
+
+  it "selection.append" do
+    div = D3.select_all("div")
+    ul = div.append("ul")
+    ul.append("li")
+    ul.append("li")
+    expect(div.html).to eq("<ul><li></li><li></li></ul>")
+    ul.select_all("li").text = "WOW"
+    expect(div.html).to eq("<ul><li>WOW</li><li>WOW</li></ul>")
+  end
+
+  it "selection.html / selection.text" do
+    div = D3.select_all("div")
+    expect(div.html).to eq("")
+    expect(div.text).to eq("")
+
+    div.html = "<h1>Hello, World!</h1>"
+    expect(div.html).to eq("<h1>Hello, World!</h1>")
+    expect(div.text).to eq("Hello, World!")
+
+    h1 = div.select("h1")
+    expect(h1.text).to eq("Hello, World!")
+    h1.text = "Goodbye, World!"
+    expect(div.html).to eq("<h1>Goodbye, World!</h1>")
+    expect(div.text).to eq("Goodbye, World!")
+    expect(h1.html).to eq("Goodbye, World!")
+    expect(h1.text).to eq("Goodbye, World!")
+  end
+
+  it "svg" do
+    D3.select("div")
+      .append("svg")
+        .attr("width", 960)
+        .attr("height", 500)
+      .append("g")
+        .attr("transform", "translate(20,20)")
+      .append("rect")
+        .attr("width", 920)
+        .attr("height", 460)
+    expect(D3.select("div").html).to eq(
+      %Q[<svg width="960" height="500"><g transform="translate(20,20)"><rect width="920" height="460"></rect></g></svg>])
+  end
+
+  describe do
+    before(:each) do
+      D3.select("div").html("
+        <p><b>1</b><b>2</b><b>3</b></p>
+        <p><b>4</b><b>5</b><b>6</b></p>
+      ")
+    end
+
+    # These should use opal-browser, but that seems to be broken with phantomjs
+    # For now just expose raw js objects
+    it "selection.node" do
+      expect(D3.select_all("b").node).to be_instance_of(Native::Object)
+    end
+
+    it "selection.nodes" do
+      expect(D3.select_all("b").nodes).to be_instance_of(Array)
+      D3.select_all("b").nodes.each do |n|
+        expect(n).to be_instance_of(Native::Object)
+      end
+    end
+  end
+end

data/spec/sequential_scale_spec.rb

@@ -0,0 +1,90 @@
+describe "d3 - sequential scale" do
+  let(:scale) { D3.scale_sequential(&D3.send(interpolator)).domain([0, 100]) }
+  let(:curve_direct) { (0..20).map{|t| D3.send(interpolator, t/20.0)} }
+  let(:curve_scale) { (0..20).map{|t| scale.(t*100/20.0)} }
+
+  it "d3.scale_sequential" do
+    expect(D3.scale_sequential(&D3.interpolate_viridis)).to be_instance_of(D3::SequentialScale)
+    expect(D3.scale_sequential{|t| D3.hsl(t * 360, 1, 0.5) }).to be_instance_of(D3::SequentialScale)
+  end
+
+  it "basics" do
+    s = D3.scale_sequential{|t| D3.hsl(t * 360, 1, 0.5).to_s }
+    expect(s.domain).to eq([0,1])
+    s2 = s.copy.domain([0,100]).clamp(true)
+    expect(s.domain).to eq([0,1])
+    expect(s2.domain).to eq([0,100])
+    expect(s.clamp).to eq(false)
+    expect(s2.clamp).to eq(true)
+    expect(s.(0.2)).to eq("rgb(204, 255, 0)")
+    expect(s.(1.2)).to eq("rgb(204, 255, 0)")
+    expect(s2.(20)).to eq("rgb(204, 255, 0)")
+    expect(s2.(120)).to eq("rgb(255, 0, 0)")
+    expect(s.interpolator.(0.3)).to eq("rgb(51, 255, 0)")
+    expect(s2.interpolator.(0.3)).to eq("rgb(51, 255, 0)")
+  end
+
+  describe "viridis" do
+    let(:interpolator) { :interpolate_viridis }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["#440154", "#471365", "#482475", "#463480", "#414487", "#3b528b", "#355f8d", "#2f6c8e", "#2a788e", "#25848e", "#21918c", "#1e9c89", "#22a884", "#2fb47c", "#44bf70", "#5ec962", "#7ad151", "#9bd93c", "#bddf26", "#dfe318", "#fde725"])
+    end
+  end
+
+  describe "inferno" do
+    let(:interpolator) { :interpolate_inferno }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["#000004", "#07051b", "#160b39", "#2b0b57", "#420a68", "#57106e", "#6a176e", "#7f1e6c", "#932667", "#a82e5f", "#bc3754", "#cc4248", "#dd513a", "#ea632a", "#f37819", "#f98e09", "#fca50a", "#fbbe23", "#f6d746", "#f1ef75", "#fcffa4"])
+    end
+  end
+
+  describe "magma" do
+    let(:interpolator) { :interpolate_magma }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["#000004", "#06051a", "#140e36", "#251255", "#3b0f70", "#51127c", "#641a80", "#782281", "#8c2981", "#a1307e", "#b73779", "#ca3e72", "#de4968", "#ed5a5f", "#f7705c", "#fc8961", "#fe9f6d", "#feb77e", "#fecf92", "#fde7a9", "#fcfdbf"])
+    end
+  end
+
+  describe "plasma" do
+    let(:interpolator) { :interpolate_plasma }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["#0d0887", "#2a0593", "#41049d", "#5601a4", "#6a00a8", "#7e03a8", "#8f0da4", "#a11b9b", "#b12a90", "#bf3984", "#cc4778", "#d6556d", "#e16462", "#ea7457", "#f2844b", "#f89540", "#fca636", "#feba2c", "#fcce25", "#f7e425", "#f0f921"])
+    end
+  end
+
+  describe "warm" do
+    let(:interpolator) { :interpolate_warm }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["rgb(110, 64, 170)", "rgb(129, 62, 176)", "rgb(150, 61, 179)", "rgb(171, 60, 178)", "rgb(191, 60, 175)", "rgb(210, 62, 167)", "rgb(228, 65, 157)", "rgb(242, 69, 145)", "rgb(254, 75, 131)", "rgb(255, 84, 115)", "rgb(255, 94, 99)", "rgb(255, 106, 84)", "rgb(255, 120, 71)", "rgb(255, 135, 59)", "rgb(251, 150, 51)", "rgb(239, 167, 47)", "rgb(226, 183, 47)", "rgb(212, 199, 51)", "rgb(198, 214, 60)", "rgb(186, 228, 73)", "rgb(175, 240, 91)"])
+    end
+  end
+
+  describe "cool" do
+    let(:interpolator) { :interpolate_cool }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["rgb(110, 64, 170)", "rgb(104, 73, 186)", "rgb(96, 84, 200)", "rgb(87, 97, 211)", "rgb(76, 110, 219)", "rgb(65, 125, 224)", "rgb(54, 140, 225)", "rgb(44, 156, 223)", "rgb(35, 171, 216)", "rgb(29, 186, 206)", "rgb(26, 199, 194)", "rgb(26, 212, 179)", "rgb(29, 223, 163)", "rgb(37, 232, 146)", "rgb(48, 239, 130)", "rgb(64, 243, 115)", "rgb(82, 246, 103)", "rgb(103, 247, 94)", "rgb(127, 246, 88)", "rgb(151, 243, 87)", "rgb(175, 240, 91)"])
+    end
+  end
+
+  describe "rainbow" do
+    let(:interpolator) { :interpolate_rainbow }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["rgb(110, 64, 170)", "rgb(150, 61, 179)", "rgb(191, 60, 175)", "rgb(228, 65, 157)", "rgb(254, 75, 131)", "rgb(255, 94, 99)", "rgb(255, 120, 71)", "rgb(251, 150, 51)", "rgb(226, 183, 47)", "rgb(198, 214, 60)", "rgb(175, 240, 91)", "rgb(127, 246, 88)", "rgb(82, 246, 103)", "rgb(48, 239, 130)", "rgb(29, 223, 163)", "rgb(26, 199, 194)", "rgb(35, 171, 216)", "rgb(54, 140, 225)", "rgb(76, 110, 219)", "rgb(96, 84, 200)", "rgb(110, 64, 170)"])
+    end
+  end
+
+  describe "cubehelix_default" do
+    let(:interpolator) { :interpolate_cubehelix_default }
+    it do
+      expect(curve_direct).to eq(curve_scale)
+      expect(curve_scale).to eq(["rgb(0, 0, 0)", "rgb(18, 8, 23)", "rgb(26, 21, 48)", "rgb(26, 39, 68)", "rgb(22, 61, 78)", "rgb(22, 83, 76)", "rgb(31, 102, 66)", "rgb(52, 115, 53)", "rgb(84, 121, 47)", "rgb(122, 122, 53)", "rgb(160, 121, 73)", "rgb(190, 121, 106)", "rgb(208, 126, 147)", "rgb(212, 138, 186)", "rgb(207, 156, 218)", "rgb(199, 179, 237)", "rgb(193, 202, 243)", "rgb(197, 222, 242)", "rgb(210, 238, 239)", "rgb(232, 248, 242)", "rgb(255, 255, 255)"])
+    end
+  end
+end