Commit 8a7a75d0 authored by amarcic's avatar amarcic
Browse files

added labels to period bars; segmented d3 spaghetti code

parent 503bf1ce
......@@ -18,6 +18,7 @@ export const Timeline = (props) => {
const svgRef = useRef();
//const [data, setData] = useState(binnedData);
const [scale, setScale] = useState();
useEffect(() => {
const svg = select(svgRef.current);
......@@ -51,6 +52,7 @@ export const Timeline = (props) => {
.domain(periodIds)
.range([height,0])
.padding(0.2)
//console.log(yScale("nKJfE4h8ViFn"));
//todo: remove this temporary cleanup of the background svg group
svg.select(".background").selectAll("rect").remove();
......@@ -62,75 +64,90 @@ export const Timeline = (props) => {
.call(axisBottom(xScale))
//add y axis to svg
svg.select(".yAxis")
/*svg.select(".yAxis")
.call(axisLeft(yScale))
.selectAll("text")
.text( value => value&&byPeriodData.get(value).periodName )
.text( value => value&&byPeriodData.get(value).periodName )*/
//calculate and append histogram bars for each bin
svg.select(".bars")
const bars = svg.select(".bars")
.attr("transform",`translate(${margin.left}, ${margin.top})`)
.selectAll("rect").data([...byPeriodData.values()]).join(
enter => enter.append("rect")
enter => enter.append("g").attr("class", "barGroup").append("rect")
).attr("class","bar")
.attr("y", (value,index) => yScale(periodIds[index]))
.attr("x", value => xScale(value.periodSpan?.[0]))
.attr("height", yScale.bandwidth())
/*.selectAll("text")
.text( value => value&&byPeriodData.get(value).periodName )*/
/*.on("click", function(event, value) {
svg.select(this)
.style("fill", "orange")
})*/
.on("click", (event, value) => {
console.log(value)
const element = svg.selectAll(".bar").nodes(),
index = element.indexOf(event.currentTarget);
const itemDatingMin = min(value.items, item => item.spanDated?.[0]),
itemDatingMax = max(value.items, item => item.spanDated?.[1]);
const xScaleDetail = scaleLinear()
.domain([itemDatingMin,itemDatingMax])
.range([0,width])
const yScaleDetail = scaleLinear()
.domain([0, value.items.length])
.range([height,0]);
//remove bars
svg.select(".bars").selectAll(".bar").remove();
//remove axis
svg.select(".xAxis").selectAll("*").remove();
svg.select(".yAxis").selectAll("*").remove();
//remove backgruond
svg.select(".background").selectAll("rect").remove();
svg.select(".xAxis")
.attr("transform", `translate(0,${height})`)
.call(axisBottom(xScaleDetail))
svg.select(".yAxis")
.call(axisLeft(yScaleDetail))
svg.select(".bars")
.selectAll("rect").data(value.items).join(
enter => enter.append("rect")
).attr("class","bar")
.attr("x", value => xScaleDetail(value.spanDated?.[0]))
.attr("y", (value,index) => yScaleDetail(index))
.attr("width", value => Math.abs(xScaleDetail(value.spanDated?.[0])-xScaleDetail(value.spanDated?.[1]))+1||0)
.attr("height", 5)
svg.select(".background")
.append("rect")
.attr("width", Math.abs(xScaleDetail(value.periodSpan?.[0])-xScaleDetail(value.periodSpan?.[1]))||0)
.attr("height", height)
.attr("x", xScaleDetail(value.periodSpan[0]))
.attr("opacity", 0.3)
})
.transition()
.attr("width", value => Math.abs(xScale(value.periodSpan?.[0])-xScale(value.periodSpan?.[1]))||0)
.attr("fill", "#69b3a2");
const barGroups = bars.select( function() {return this.parentNode} );
bars.on("click", (event, value) => {
console.log(value)
const element = svg.selectAll(".bar").nodes(),
index = element.indexOf(event.currentTarget);
const itemDatingMin = min(value.items, item => item.spanDated?.[0]),
itemDatingMax = max(value.items, item => item.spanDated?.[1]);
const xScaleDetail = scaleLinear()
.domain([itemDatingMin,itemDatingMax])
.range([0,width])
const yScaleDetail = scaleLinear()
.domain([0, value.items.length])
.range([height,0]);
//remove bars
svg.select(".bars").selectAll(".bar").remove();
//remove axis
svg.select(".xAxis").selectAll("*").remove();
svg.select(".yAxis").selectAll("*").remove();
//remove background
svg.select(".background").selectAll("rect").remove();
svg.select(".xAxis")
.attr("transform", `translate(0,${height})`)
.call(axisBottom(xScaleDetail))
/*svg.select(".yAxis")
.call(axisLeft(yScaleDetail))*/
svg.select(".bars")
.selectAll("rect").data(value.items).join(
enter => enter.append("rect")
).attr("class","bar")
.attr("x", value => xScaleDetail(value.spanDated?.[0]))
.attr("y", (value,index) => yScaleDetail(index))
.attr("height", 5)
.transition()
.attr("width", value => Math.abs(xScaleDetail(value.spanDated?.[0])-xScaleDetail(value.spanDated?.[1]))+1||0)
svg.select(".background")
.selectAll("rect").data([value]).join("rect")
.attr("width", Math.abs(xScaleDetail(value.periodSpan?.[0])-xScaleDetail(value.periodSpan?.[1]))||0)
.attr("height", height)
.attr("x", xScaleDetail(value.periodSpan[0]))
.transition()
.attr("opacity", 0.3)
})
bars.transition()
.attr("width", value => Math.abs(xScale(value.periodSpan?.[0])-xScale(value.periodSpan?.[1]))||0)
.attr("fill", "#69b3a2");
barGroups
.append("text")
.text( value => value.periodName)
.attr("y", (value, index) => yScale(periodIds[index]))
.attr("x", value => xScale(value.periodSpan?.[0]))
console.log(bars);
}
}, [byPeriodData])
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment