chartDriverPoints = { const height = 500 // only height defined to width is defined responsive const margin = ({ top: 50, right: 150, bottom: 106, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-driver-points"; // chart ID to isolate d3 class selections to just this chart // filtering previous teams that haven't scored more than 2 points in a season. // let selectSeries = standings.series.filter(d => d.maxpoints > 2) let selectSeries = standings.dataDrivers.filter(d => d.points_total > 0) let lastgp = standings.gp_nos.at(-1) // Define SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); // Main chart group/area inset by top/left margin const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Define Scales let y = d3.scaleLinear() .domain([0, d3.max(standings.dataDrivers, d => d.points_total)]) .range([innerHeight, 0]) .nice(); let x = d3.scaleLinear() .domain([1, lastgp]) .range([20, innerWidth]); // Define and Call Axes let yAxis = d3.axisLeft(y); let xAxis = d3.axisBottom(x).tickFormat(d3.format("d")); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + (innerHeight + 20) + ")") .call(xAxis) .call(g => g.selectAll(".domain").remove()) group.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.selectAll(".domain").remove()) // Grid Lines let grid = (g) => {g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", 0) .attr("y2", innerHeight+20)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", 0) .attr("x2", innerWidth)); } group.append("g") .call(grid); // Axis Labels group.append("text") .text('Grand Prix Rounds') .attr("text-anchor", "middle") .attr("class", "x-axis-label") .attr("y", innerHeight + 64) .attr("x", innerWidth/2) .style('fill', '#999') .style('font-size', '14px') .style('font-family','sans-serif' ); group.append("text") .text('Total Season Points') .attr("text-anchor", "middle") .attr("class", "graph-title") .attr("transform", "translate(" + (0 - margin.left * 0.65) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#999') .style('font-size', '14px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Source Text group.append("text") .attr("class", "graph-source") .text("Data: Formula1.com Standings & Motorsport.com Results / Design: @benoldenburg") .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); // Custom Place Grid // The 11th and 12th places that don't run the full width are trimmed programmatically // Should be converted to an automated data subset. // Lines var lines = group.append("g") .attr("class", "team-lines") var line = d3.line() .defined(d => d > 0) .x(function(d, i) { return x(i+1); }) .y(function(d, i) { return y(d); }) let team = lines.selectAll("g") .data(selectSeries) .join("g") .attr("class", (d) => "driver-line line-" + d.driver_no) // Mask team.append("path") .attr("class", "line-background") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 6) .attr("stroke", "#FFFFFF") .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.points_c)) // Line with Team Color team.append("path") .attr("class", (d) => "line-primary") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) .attr("stroke", (d) => teamColors[d.teamClass]) .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.points_c)) // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d['driver_no']; obj.label = d['driver']; obj.color = teamColors[d['teamClass']]; obj.val = d['points_total']; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 20 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', x(lastgp) + 4) .attr('x2', x(lastgp) + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = x(lastgp) + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { console.log(d) d3.selectAll("#" + chartid + " .driver-line") .transition().style('opacity', g => { return g.driver_no === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.selectAll("#" + chartid + " .driver-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em') .style('font-size', '14px') .style('font-weight', 'bold'); forceLabel.append('rect') .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(x(lastgp) + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(8)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { //d.y = Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area d.x = x(lastgp) + forceLabelOffset; // constrain x for all labels return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Chart Area Tooltip // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all'); // .on('mousemove', tipAreaMouseOver) // .on('mouseout', tipAreaMouseOut ); function tipAreaMouseOver(event, d){ // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) console.log({invert}) // let bisect = d3.bisector(function(d) { return d; }).right; // let hoverDate = (data.years[bisect(data.years, invert)]); //it would return 2. let hoverDate = Math.round(invert); //it would return 2. console.log({hoverDate}) let lookup = standings.mapYear.get(hoverDate) console.log({lookup}) //.sort((a, b) => d3.ascending(a[place], b[place])); // Display and position vertical line d3.select("#" + chartid + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(lookup, d => d.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', function(d) { return `translate(${x(d.year)},${y(d.points)})` }) .attr('opacity', d => !isNaN(d.points) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 4) .attr('stroke-weight', 4) .attr('stroke', '#FFFFFF') .attr('fill', (d) => teamColors[d.id]), update => update .attr('transform', function(d) { return `translate(${x(d.year)},${y(d.points)})` }) .attr('opacity', d => !isNaN(d.points) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` tipContent += `` }); tipContent += `

	Place	Points
${d.name}	${d.place}	${d.points}

`; chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${hoverDate}
${tipContent}`); } function tipAreaMouseOut(event, d){ chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }; return svg.node(); }