Sha256: 7554ef25ee6b762a2e7c28b550a3203332eef44288ee438ddc14a7c6c25ced4c
Contents?: true
Size: 1.77 KB
Versions: 6
Compression:
Stored size: 1.77 KB
Contents
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")`)
Version data entries
6 entries across 6 versions & 1 rubygems