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