// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart( data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (categorical) y-value z = () => 1, // given d in data, returns the (categorical) z-value title = "", // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20 + 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30 + 50, // bottom margin, in pixels marginLeft = 40 + 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] xxDomain, // reversed xDomain to show ranks from top to bottom yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color, // colors = d3.interpolateBlues, // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.25, // stroke width of line strokeOpacity = 0.3, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi, // show a Voronoi overlay? (for debugging) scores_distribution = [], rank_boundaries = [] } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); // if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); if (defined === undefined) defined = (d, i) => !isNaN(X[i]); const D = d3.map(data, defined); // console.log(X); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = Y; if (xxDomain === undefined) xxDomain = [1, d3.max(X)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // const color = d3.scaleSequential(xDomain, colors) // Omit any data not present in the z-domain. const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = d3.scalePoint(yDomain, yRange); const xxScale = xType(xxDomain, xRange); // const xAxis = d3.axisBottom(xxScale).ticks(width / 80).tickSizeOuter(0); // const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); const xAxis = d3 .axisBottom(xxScale) .ticks(width / 30) .tickPadding(5) .tickSize(15); const yAxis = d3.axisLeft(yScale).ticks(height / 60); //.tickSizeOuter(0); const score_histogram_axis = d3 .axisTop(xxScale) .ticks(width / 30) .tickSize(0) .tickFormat((d) => ""); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const brush = d3 .brushX() .extent([ [marginLeft, height - (marginBottom + 30)], [width - (marginRight - 20), height - (marginBottom - 80)] ]) .on("brush", brushed) .on("end", ended); const score_brush = d3 .brushX() .extent([ [marginLeft - 10, 0], [width - (marginRight - 20), marginTop + 20] ]) .on("brush", score_brushed) .on("end", ended); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("dblclick", dblclicked); svg .append("text") .attr("x", width / 2) .attr("y", 10) .attr("text-anchor", "middle") .style("font-size", "14px") .text(title); const container = svg .append("g") .classed("label-container", true) .attr("display", "none"); svg.append("g").classed("brush", true).call(brush); svg.append("g").classed("score_brush", true).call(score_brush); // An optional Voronoi display (for fun). if (voronoi) svg .append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr( "d", d3.Delaunay.from( I, (i) => xScale(X[i]), (i) => yScale(Y[i]) ) .voronoi([0, 0, width, height]) .render() ); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) // .style("font", "10px times") .call(xAxis); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .style("font", "20px times") .call(yAxis) .call((g) => g.select(".domain").remove()) .call( voronoi ? () => {} : (g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); svg .append("g") .classed("score_histogram_axis", true) .attr("transform", `translate(0,${marginTop})`) .call(score_histogram_axis); const path = svg .append("g") .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, (i) => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", "#c0c0c0") .attr("d", ([, I]) => line(I)); function get_score_x_coordinates() { let res = {}; let starting_x_coords_lst = []; let html_string_1 = path["_groups"][0][0]["outerHTML"].substring( path["_groups"][0][0]["outerHTML"].indexOf("d") ); let rank_y1 = html_string_1.substring( html_string_1.indexOf(",") + 1, html_string_1.indexOf("L") ); let score_y1 = html_string_1.substring( html_string_1.indexOf(",", html_string_1.indexOf("L")) + 1, html_string_1.indexOf("s", html_string_1.indexOf("L")) - 2 ); for (let i = 0; i < path["_groups"][0].length; i++) { let html_string = path["_groups"][0][i]["outerHTML"]; starting_x_coords_lst[i] = html_string.substring( html_string.indexOf("L") + 1, html_string.indexOf(",", html_string.indexOf("L")) ); } return { coords: starting_x_coords_lst, rank_y1: parseInt(rank_y1), score_y1: parseInt(score_y1) }; } const scores_dist_values = scores_distribution.map((d) => d.dist); const scores_dist_scale = d3 .scaleLinear() .domain([0, d3.max(scores_dist_values)]) .range([40, 15]); const axis_coords = get_score_x_coordinates(); const coords = axis_coords.coords; const score_lines_data = scores_distribution; const score_lines = svg .append("g") .selectAll("line") .data(score_lines_data) .classed("score_lines", true) .join("line") .attr("x1", (d) => xScale(d.key)) .attr("x2", (d) => xScale(d.key)) .attr("y1", scores_dist_scale(0)) .attr("y2", (d) => scores_dist_scale(d.dist)) .attr("stroke", "grey"); const rank_boundary_lines = svg .append("g") .selectAll("line") .data(rank_boundaries) .join("line") .attr("x1", (d) => xScale(d)) .attr("x2", (d) => xScale(d)) .attr("y1", axis_coords.rank_y1) .attr("y2", axis_coords.rank_y1 + 10) .attr("stroke", "grey"); var selected_ranks = []; var s_ranks = []; function get_labels(selected_ranks, selection, ranges) { let x_max = xScale(d3.max(selected_ranks)); let x_min = xScale(d3.min(selected_ranks)); console.log("x_max: " + x_max + "\nx_min: " + x_min); container.attr( "transform", `translate(${(x_max + x_min) / 2},${height - (marginBottom - 35)})` ); container.attr("display", null); const box = container .selectAll("path") .data([,]) .join("path") .attr("class", "tooltip") .attr("fill", "#d58a3c") .attr("opacity", "0.5"); const label = container .selectAll("text") .data([,]) .join("text") .attr("class", "tooltip") .call((text) => text .selectAll("tspan") .data(`${ranges}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .text("Rank ranges: " + ranges[0] + " - " + ranges[1]) ) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); const vals = { x: -55, y: -9, height: 11, width: 110 }; box.attr( "d", `M${-vals.width / 2 - 10}, 5H-5l5,-5l5, 5H${vals.width / 2 + 10}v${ vals.height + 25 }h-${vals.width + 20}z` ); const limitW = xScale(X[data.length - 1]); const hbw = vals.width / 2 + 10; const hbh = vals.height / 2 + 10; const switchHW = limitW - hbw; const tooltipOver = `M${-hbw},-5H-5l5,5l5,-5H${hbw}v${-hbh * 2}h-${ 2 * hbw }z`; const tooltipUnder = `M${-hbw},5H-5l5,-5l5,5H${hbw}v${hbh * 2}h-${ 2 * hbw }z`; const tooltipLeft = `M-5,${-hbh}V-5l5,5l-5,5V${hbh}H${-hbw * 2}V-${hbh}z`; const tooltipRight = `M5,${-hbh}V-5l-5,5l5,5V${hbh}H${hbw * 2}V-${hbh}z`; box.attr( "d", selection[0] > switchHW ? tooltipLeft : selection[1] < hbw ? tooltipRight : tooltipUnder ); const shiftLabelX = selection[0] > switchHW ? -hbw : selection[1] < hbw ? hbw : 0; const shiftLabelY = selection[0] > switchHW || selection[1] < hbw ? vals.y - vals.height / 2 + 15 : 15 - vals.y; label.attr("transform", `translate(${shiftLabelX},${shiftLabelY})`); } if (unique_highlighted_ids.length != 0) { path.classed("selected", function (d) { if (unique_highlighted_ids.includes(d[0])) { s_ranks.push(X[d[1][0]]); } return unique_highlighted_ids.includes(d[0]); }); let s_rank_range = d3.extent(s_ranks); let [init_x, init_y] = [xScale(s_rank_range[0]), xScale(s_rank_range[1])]; setTimeout(get_labels(s_ranks, [init_x, init_y], s_rank_range), 3000); } function score_brushed({ selection }) { if (selection) { updateChart_score_brush(selection); } } function updateChart_score_brush(sel, d) { path.classed("selected", function (d) { return isBrushed_score_brush(sel, d); }); } function isBrushed_score_brush(brush_coords, d) { let cx = xScale(data[d[1][1]]["value"]); var x0 = brush_coords[0], x1 = brush_coords[1]; //console.log(d[1][0]); if (x0 <= cx && cx <= x1) { highlighted_ids.push(d[0]); selected_ranks.push(X[d[1][0]]); } return x0 <= cx && cx <= x1; } function brushed({ selection }) { if (selection) { updateChart(selection); } } function updateChart(sel, d) { path.classed("selected", function (d) { return isBrushed(sel, d); }); } function isBrushed(brush_coords, d) { //console.log(data[d[1][1]]); let cx = xScale(X[d[1][0]]); var x0 = brush_coords[0], x1 = brush_coords[1]; if (x0 <= cx && cx <= x1) { highlighted_ids.push(d[0]); selected_ranks.push(X[d[1][0]]); } return x0 <= cx && cx <= x1; } function ended({ selection }) { if (selection) { let ranges = d3.extent(selected_ranks); get_labels(selected_ranks, selection, ranges); } } function dblclicked(event, d) { highlighted_ids.length = 0; selected_ranks.length = 0; path.classed("selected", false); container.attr("display", "none"); } const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); return Object.assign(svg.node(), { value: null }); }