// Next steps/feedback: // check out using css classes within svgs // to highlight a specific point, like "if data is X, use Y class" // use a hover-over interaction as a next step // put numbers on the empty dots, or some kind of minimalist "y-axis" // color gradient on the dots, 1 light and 10 dark // chart = { // // Specify the chart’s dimensions. // const width = 928; // const height = 400; // const marginTop = 40; // const marginRight = 50; // const marginBottom = 10; // const marginLeft = 50; // const padding = 7; // // Prepare the positional scales. // // Creates an x-scale using d3.scalePoint to map the start and end times to points on the x-axis. // const x = d3.scalePoint() // .domain([0, 1]) // .range([marginLeft, width - marginRight]) // .padding(0.5); // // Creates a y-scale using d3.scaleLinear to map the data values to points on the y-axis. // const yExtent = d3.extent(data.flatMap(d => [d["start_rating"], d["end_rating"]])) // const y = d3.scaleLinear() // .domain(yExtent) // .range([height - marginBottom, marginTop]); // // Creates a range to append points for all numbers on the y-axis from 1 to 10 // const yPoints = d3.range(1, 11); // // Creates a line generator to draw lines for each country based on the provided data. // const line = d3.line() // .x((d, i) => x(i)) // .y(y); // // Creates a number formatter for the y-axis values. // const formatNumber = d3.format(".0f"); // Format numbers as integers // // Create the SVG container. // const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, height]) // .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // // Appends an x-axis with text labels for the start and end times // svg.append("g") // .attr("text-anchor", "middle") // .selectAll("g") // .data([0, 1]) // .join("g") // .attr("transform", (i) => `translate(${x(i)},20)`) // .call(g => g.append("text").text((i) => i ? "Now" : "Then")); // // Create a line for each country. // svg.append("g") // .attr("fill", "none") // .attr("stroke", "currentColor") // .selectAll("path") // .data(data) // .join("path") // .attr("d", (d) => line([d.start_rating, d.end_rating])); // // Plot circles from the start to end range of the y axis, left side // svg.append("g") // .selectAll("circle") // .data(yPoints) // .join("circle") // .attr("cx", x(0)) // x position where the lines start // .attr("cy", d => y(d)) // .attr("r", 3) // Radius of the circle // .attr("fill", "currentColor"); // // Append labels for each point on the y-axis, left side // svg.append("g") // .selectAll("text") // .data(yPoints) // .join("text") // .attr("x", x(0) - 10) // Adjust x position to place labels next to the points // .attr("y", d => y(d)) // .attr("dy", "0.35em") // .attr("text-anchor", "end") // .text(d => formatNumber(d)); // // Plot circles from the start to end range of the y axis, right side // svg.append("g") // .selectAll("circle") // .data(yPoints) // .join("circle") // .attr("cx", x(1)) // x position where the lines start // .attr("cy", d => y(d)) // .attr("r", 3) // Radius of the circle // .attr("fill", "currentColor"); // // Append labels for each point on the y-axis, left side // svg.append("g") // .selectAll("text") // .data(yPoints) // .join("text") // .attr("x", x(1) + 15) // Adjust x position to place labels next to the points // .attr("y", d => y(d)) // .attr("dy", "0.35em") // .attr("text-anchor", "end") // .text(d => formatNumber(d)); // // Create a group of labels for each year. // svg.append("g") // Appends a element to the SVG. This group will contain all the labels for the years. // .selectAll("g") // selects all elements within the parent group // .data([0, 1]) // and binds the data [0, 1] to them. This represents the start and end dates // .join("g") // Uses .join("g") to create a element for each item in the data array. // .attr("transform", (i) => `translate(${x(i) + (i ? padding : -padding)},0)`) // Positions each element horizontally based on the x scale and the index i (0 for start_rating and 1 for end_rating). Adds padding to adjust the label position. // .attr("text-anchor", (i) => i ? "start" : "end") // Sets the text anchor to "start" for end_rating (i.e., left-aligned) and "end" for start_rating (i.e., right-aligned). // .selectAll("text") // Selects all elements within each subgroup. // .data((i) => d3.zip( // Binds data to the text elements. Uses d3.zip to combine two arrays: // data.map(d => i ? `${formatNumber(d.end_rating)} ${d.quality}` : `${d.quality} ${formatNumber(d.start_rating)}`), // maps the data to formatted text strings for either start_rating or end_rating based on the index i. // dodge(data.map(d => y(d[i ? 'end_rating' : 'start_rating']))))) // uses the dodge function to adjust the y-coordinates to avoid overlapping labels // .join("text") // Creates a element for each item in the bound data. // .attr("y", ([, y]) => y) // Sets the y-coordinate of each element using the second value in the zipped data (the dodged y-coordinate) // .attr("dy", "0.35em") // Adjusts the vertical alignment of the text // .text(([text]) => text); // Sets the text content of each element using the first value in the zipped data (the formatted data string) // return svg.node(); // } chart = { // Specify the chart’s dimensions. const width = 928; const height = 400; const marginTop = 40; const marginRight = 50; const marginBottom = 10; const marginLeft = 50; const padding = 7; // Prepare the positional scales. // Create an x-scale using d3.scalePoint to map the start and end times to points on the x-axis. const x = d3.scalePoint() .domain([0, 1]) .range([marginLeft, width - marginRight]) .padding(0.5); // Create a y-scale using d3.scaleLinear to map the data values to points on the y-axis. // Ensure the y-axis covers the range from 1 to 10. const y = d3.scaleLinear() .domain([1, 10]) .range([height - marginBottom, marginTop]); // Create a range to append points for all numbers on the y-axis from 1 to 10 const yPoints = d3.range(1, 11); // Create a line generator to draw lines for each quality based on the provided data. const line = d3.line() .x((d, i) => x(i)) .y(y); // Create a number formatter for the y-axis values. const formatNumber = d3.format(".0f"); // Format numbers as integers // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Append an x-axis with text labels for the start and end times svg.append("g") .attr("text-anchor", "middle") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${x(i)},20)`) .call(g => g.append("text").text((i) => i ? "Now" : "Then")); // Create a line for each quality. svg.append("g") .attr("fill", "none") .attr("stroke", "currentColor") .selectAll("path") .data(data) .join("path") .attr("d", (d) => line([d.start_rating, d.end_rating])); // Plot circles from the start to end range of the y axis, left side svg.append("g") .selectAll("circle") .data(yPoints) .join("circle") .attr("cx", x(0)) // x position where the lines start .attr("cy", d => y(d)) .attr("r", 3) // Radius of the circle .attr("fill", "currentColor"); // Append labels for each point on the y-axis, left side svg.append("g") .selectAll("text") .data(yPoints) .join("text") .attr("x", x(0) - 10) // Adjust x position to place labels next to the points .attr("y", d => y(d)) .attr("dy", "0.35em") .attr("text-anchor", "end") .text(d => formatNumber(d)); // Plot circles from the start to end range of the y axis, right side svg.append("g") .selectAll("circle") .data(yPoints) .join("circle") .attr("cx", x(1)) // x position where the lines end .attr("cy", d => y(d)) .attr("r", 3) // Radius of the circle .attr("fill", "currentColor"); // Append labels for each point on the y-axis, right side svg.append("g") .selectAll("text") .data(yPoints) .join("text") .attr("x", x(1) + 15) // Adjust x position to place labels next to the points .attr("y", d => y(d)) .attr("dy", "0.35em") .attr("text-anchor", "start") .text(d => formatNumber(d)); // Add back the custom text labels for `start_rating` and `end_rating` values svg.append("g") // Appends a element to the SVG. This group will contain all the labels for the years. .selectAll("g") // selects all elements within the parent group .data([0, 1]) // and binds the data [0, 1] to them. This represents the start and end dates .join("g") // Uses .join("g") to create a element for each item in the data array. .attr("transform", (i) => `translate(${x(i) + (i ? padding : -padding)},0)`) // Positions each element horizontally based on the x scale and the index i (0 for start_rating and 1 for end_rating). Adds padding to adjust the label position. .attr("text-anchor", (i) => i ? "start" : "end") // Sets the text anchor to "start" for end_rating (i.e., left-aligned) and "end" for start_rating (i.e., right-aligned). .selectAll("text") // Selects all elements within each subgroup. .data((i) => d3.zip( // Binds data to the text elements. Uses d3.zip to combine two arrays: data.map(d => i ? `${formatNumber(d.end_rating)} ${d.quality}` : `${d.quality} ${formatNumber(d.start_rating)}`), // maps the data to formatted text strings for either start_rating or end_rating based on the index i. dodge(data.map(d => y(d[i ? 'end_rating' : 'start_rating']))))) // uses the dodge function to adjust the y-coordinates to avoid overlapping labels .join("text") // Creates a element for each item in the bound data. .attr("y", ([, y]) => y) // Sets the y-coordinate of each element using the second value in the zipped data (the dodged y-coordinate) .attr("dy", "0.35em") // Adjusts the vertical alignment of the text .text(([text]) => text); // Sets the text content of each element using the first value in the zipped data (the formatted data string) return svg.node(); }