Changes to lcp-button

This commit is contained in:
Jeremy Rangel
2024-12-31 18:53:46 -08:00
parent 2df16e37a8
commit 741d39a962
94 changed files with 1159 additions and 138 deletions

View File

@ -0,0 +1 @@
console.log("Hello World! (from lcp-visualizer)"),document.addEventListener("DOMContentLoaded",(function(){const t=[{date:"2023-01-01",team:"Manchester City",goals:2},{date:"2023-01-01",team:"Liverpool",goals:1},{date:"2023-02-01",team:"Manchester City",goals:3},{date:"2023-02-01",team:"Liverpool",goals:2},{date:"2023-03-01",team:"Manchester City",goals:4},{date:"2023-03-01",team:"Liverpool",goals:3},{date:"2023-04-01",team:"Manchester City",goals:3},{date:"2023-04-01",team:"Liverpool",goals:4},{date:"2023-05-01",team:"Manchester City",goals:5},{date:"2023-05-01",team:"Liverpool",goals:4}],a=d3.timeParse("%Y-%m-%d");t.forEach((t=>{t.date=a(t.date),t.goals=+t.goals}));const e=Array.from(new Set(t.map((t=>t.team)))),l=d3.scaleOrdinal().domain(e).range(d3.schemeCategory10),r=d3.select(".lcp-visualizer").attr("width",800).attr("height",400).append("g").attr("transform","translate(40,20)"),o=d3.scaleTime().domain(d3.extent(t,(t=>t.date))).range([0,730]),s=d3.scaleLinear().domain([0,d3.max(t,(t=>t.goals))]).nice().range([340,0]),n=d3.line().x((t=>o(t.date))).y((t=>s(t.goals)));r.append("g").attr("transform","translate(0,340)").call(d3.axisBottom(o)),r.append("g").call(d3.axisLeft(s));const d=e.map((a=>({team:a,values:t.filter((t=>t.team===a))})));r.selectAll(".line").data(d).enter().append("path").attr("class","line").attr("d",(t=>n(t.values))).attr("stroke",(t=>l(t.team))),d.forEach((t=>{r.selectAll(`circle.${t.team}`).data(t.values).enter().append("circle").attr("class",t.team).attr("cx",(t=>o(t.date))).attr("cy",(t=>s(t.goals))).attr("r",4).attr("fill",l(t.team)).on("mouseover",(function(t,a){d3.select(this).transition().duration(200).attr("r",6).attr("fill","orange"),d3.select(`path.${a.team}`).classed("hover-line",!0)})).on("mouseout",(function(t,a){d3.select(this).transition().duration(200).attr("r",4).attr("fill",l(a.team)),d3.select(`path.${a.team}`).classed("hover-line",!1)}))}))}));