{ const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, (numTypes * (rowHeight + rowPadding)) + margin.top + margin.bottom+50)); let chart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`) const tooltip_circle = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '5px') .style('float', 'left') .style('font-family', 'monospace') .style('font-size', '0.5px') .html(d =>`

Event Type: ${id_to_event[d.type]}
Time: ${d.min} : ${d.sec}
By: ${d.player_id}
Location: x: ${d.x} y: ${d.y}

`) svg.call(tooltip_circle) const tooltip_bar = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '5px') .style('float', 'left') .style('font-family', 'monospace') .style('font-size', '0.5px') .html(d =>`

Total number of events: ${d}

`) svg.call(tooltip_bar) const tooltip_rightbar = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '5px') .style('float', 'left') .style('font-family', 'monospace') .style('font-size', '0.5px') .html(d =>`

Event: ${d.key}
Total number of events: ${d.value.count}

`) svg.call(tooltip_rightbar) // let monthBars = chart.append("g") // .selectAll("rect") // .data(minute_stats) // .enter().append("rect") // .attr("x", d => x3(d.key)) // .attr("y", d => -y2(d.value)) // .attr("height", d => y2(d.value)) // .attr("width", d => x3(d3.timeMinute.offset(d.key, 1)) - x3(d.key) - 2) // .attr("fill", "firebrick") // .attr("opacity", 0.25) let monthBars = chart.append("g") .selectAll("rect") .data(minute_stats) .enter().append("rect") .attr("x", (d,i) => x3(i)) .attr("y", d => -y2(d)) .attr("height", d => y2(d)) .attr("width", d => x3(d+1) - x3(d)) .attr("fill", "green") .attr("opacity", 0.25) .on('mouseover', tooltip_bar.show) .on('mouseout', tooltip_bar.hide); // console.log(monthBars); //It is made but not sure why its unseen chart.append("g") .call(xAxis); let typeRows = chart.append("g") .selectAll("g") .data(event_typeEntries) .enter().append("g"); typeRows.append("text") .text(d => `${d.key} (${d.value.count})`) .attr("class", "label") .attr("x", -margin.left) .attr("y", d => y(d.key) + textOffset); typeRows.append("line") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("stroke", "rgba(0,0,0,0.05)") .attr("y1", d => y(d.key)) .attr("y2", d => y(d.key)) typeRows.append("rect") .attr("x", x2.range()[0]) .attr("y", d => y(d.key) - rowHeight / 2) .attr("height", rowHeight) .attr("width", d => x2(d.value.success) - x2.range()[0]) .attr("fill", "green") .attr("opacity", 0.25) .on('mouseover', tooltip_rightbar.show) .on('mouseout', tooltip_rightbar.hide); typeRows.append("text") .text(d => d.value.success) .attr("class", "label") .attr("text-anchor", "end") .attr("x", x2.range()[1] - 4) .attr("y", d => y(d.key) + textOffset); chart.append("g") .selectAll("circle") .data(UsaVsPortugal731796) .enter().append("circle") .attr("cx", d => x(d._ts)) .attr("cy", d => y(id_to_event[d.type])) .attr("r", d => event_types[id_to_event[d.type]].scale(d.outcome)) .attr("fill", d=>{ return (d.side=='H'?'blue':'red'); }) .attr("opacity", 0.25) .on('mouseover', tooltip_circle.show) .on('mouseout', tooltip_circle.hide); return svg.node(); }