2f:T980,# Introduction to D3 (Fall 2023): Course Assignment For this project, a look at the data (showing changes from year to year, but only for two years, 1931 and 1932) and a hint in the assignment page ("There is an interesting trend for one of the sites that I hope your visualization can identify.") led me in the direction of using a _slope chart_. Showing changes between a start and an end state are what slope charts are all about; and I was confident it would allow me to identify the interesting trend that I knew was hiding in the data. I found a slope chart example in an [Observable notebook](https://observablehq.com/@d3/slope-chart/3). At first I wanted to import and customize it, but soon I found out that it was not designed for that - all the variable references to data columns were hardcoded. So I forked the notebook and made the changes required to give the chart a simple API. My design required the use of two instances of the chart (later I found it was even more), one showing the data aggregated at the _site_ level, followed by another filtered by a selected site and showing the data at the _variety_ level. Together the two charts would provide both a high-level view of the data, as well as the ability to obtain details on demand. Schneiderman would approve. The next challenge was to massage the data so that it would match the expectations of the visualization code. There was the matter of aggregating the yield by site, while introducing one column for each of the year _values_ - a basic pivot operation. Then doing the same on another dataset but this time grouping by site, to support filtering when a site was selected. Once that was done, I decided to see if I could implement a feature I have worked on in a previous job, that have proved to be very useful to our customers: the ability to show a preview of the drill-down on the tooltip. This feature accelerated the data exploration process, as the user would get a quick glimpse of the next stage of the process and use that to decide if they wanted to proceed with the more expensive drill-down operation. The ability to customize the slope chart using arguments proved to be helpful here, as a new parameter allowed the chart to be drawn as a thumbnail version, better suited to be displayed on a tooltip (which I was able to use without change from an imported notebook). I hope you enjoy the final result. I had fun implementing it! 30:T1347,slopeChart = function(fullSize, data, leftCol, rightCol, valueCol, tooltipContents, lineClick) { if (!fullSize && (typeof tooltipContents === "function" || typeof lineClick === "function")) { throw "thumbnail chart does not support tooltips or line clicks"; } // Specify the chart’s dimensions. const width = fullSize ? 928 : 100; const height = fullSize ? 400 : 50; const marginTop = fullSize ? 40 : 0; const marginRight = fullSize ? 50 : 0; const marginBottom = fullSize ? 10 : 0; const marginLeft = fullSize ? 50 : 0; const padding = fullSize ? 3 : 1; // tooltip setup const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); if (!fullSize) svg.attr("width", `${width}`).attr("height", `${height}`); const div = d3 .select(container) .append("div") .classed("tooltip", true); // create a new tooltip, // passing it a selection for the tooltip's DOM element. const tooltip = new Tooltip(div); // slope chart customization: event handlers function lineMouseOver(event, d) { // Optional highlight effects on target d3.select(event.target) .transition() .attr('stroke-width', lineSelectedWidth); if (lineClick !== undefined) { // Optional cursor change on target d3.select(event.target).style("cursor", "pointer"); } if (tooltipContents !== undefined) { console.log("reveal the tooltip.") // pass the current datum (if desired), // and a render function that returns an HTML string (required) tooltip.display(d, tooltipContents); } } function lineMouseMove(event, d) { if (tooltipContents !== undefined) { // move the tooltip, // passing the native browser event console.log("move the tooltip.") tooltip.move(event); } }; function lineMouseOut(event, d) { // highlight removed d3.select(event.target) .transition() .attr('stroke-width', lineWidth); if (lineClick !== undefined) { // Cursor change removed d3.select(event.target).style("cursor", "default"); } if (tooltipContents !== undefined) { // hide the tooltip console.log("hide the tooltip.") tooltip.hide(); } } // Prepare the positional scales. const x = d3.scalePoint() .domain([0, 1]) .range([marginLeft, width - marginRight]) .padding(0.5); const y = d3.scaleLinear() .domain(d3.extent(data.flatMap(d => [d[leftCol], d[rightCol]]))) .range([height - marginBottom, marginTop]); const line = d3.line() .x((d, i) => x(i)) .y(y); const formatNumber = y.tickFormat(100); // Append the x axis, if showing the fullsize version of the chart if (fullSize) { 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 ? rightCol : leftCol)) .call(g => g.append("line").attr("y1", 3).attr("y2", 9).attr("stroke", "currentColor")); } // 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[leftCol], d[rightCol]])) .attr("stroke", (d) => d[leftCol] > d[rightCol] ? "blue" : "red") .attr('stroke-width', lineWidth) .on('mouseover', lineMouseOver) .on('mouseout', lineMouseOut ) .on('mousemove', lineMouseMove ) .on('click', lineClick ); // Create a group of labels for each year. if (fullSize) { svg.append("g") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${x(i) + (i ? padding : -padding)},0)`) .attr("text-anchor", (i) => i ? "start" : "end") .selectAll("text") .data((i) => d3.zip( data.map(i ? (d) => `${formatNumber(d[rightCol])} ${d[valueCol]}` : (d) => `${d[valueCol]} ${formatNumber(d[leftCol])}`), dodge(data.map(d => y(d[i ? rightCol : leftCol]))))) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .text(([text]) => text); //TODO: pass i, text1, text2, use i to decide later if it is left or right, use tspan to style one or the other } return container }31:[{"id":"1f3a7284ee0057fb10c882c6348cb22a8633a1454de1ab7eec14971c1f212b61d120f213b836b82cf9336d91dbf5a955aa9f5dce81660c4cf42d7661e5b403d3","href":"https://static.observableusercontent.com/files/1f3a7284ee0057fb10c882c6348cb22a8633a1454de1ab7eec14971c1f212b61d120f213b836b82cf9336d91dbf5a955aa9f5dce81660c4cf42d7661e5b403d3","name":"government-receipts-of-gdp.csv","type":"text/csv","lastModified":1696463438876.363,"size":291},{"id":"759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","href":"https://static.observableusercontent.com/files/759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","name":"barley.json","type":"application/json","lastModified":1696463458635.63,"size":8487}] 2d:{"title":"Introduction to D3 (Fall 2023): Course Assignment","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"## Yearly change in aggregated yield per site\n- Hover over the trend lines to see how the corresponding varieties changed from year to year.\n- Click on the trend lines to see these changes on the following chart.\n- Color is used to accentuate positive (red) trends, as those seem to be the exception - most yields have fallen from one year to the next (blue). ","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"// aggregated chart (by site)\n{ \n // function that sets the tooltip's HTML when revealed\n // can be passed the hovered selection's datum\n function tooltipContents(datum) {\n const tooltipChart = slopeChart(false, detailedMap.get(datum.site), 1931, 1932, 'variety')\n const elemText = tooltipChart.innerHTML //`

${datum.site}

` \n const start = elemText.indexOf(\"\".length\n const svgOnly = elemText.substring(start, end)\n console.log(svgOnly)\n return svgOnly;\n }\n\n function lineClick(event, d) {\n mutable siteName = d.site;\n }\n \n let chart = slopeChart(true, groupedData, 1931, 1932, 'site', tooltipContents, lineClick)\n return chart\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"## Yield per variety per year for the _${siteName}_ site","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"barleyDetailedSlopeChart = slopeChart(true, detailedMap.get(siteName), 1931, 1932, 'variety');","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"## Supporting code","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"mutable siteName = \"Duluth\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"barley.json\").json({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"data.columns = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"groups = d3.rollup(data, \n v => d3.sum(v, d => d.yield), \n d => d.site, d => d.year\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"Array.from(groups)","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"groupedData = Array.from(groups).map(([k, v]) => { \n let initialValue = [ ['site', k ] ]\n let yearValues = Array.from(v)\n return Object.fromEntries(\n initialValue.concat(yearValues)\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"detailedMap = { \n let detailedData = d3.rollup(data, \n v => d3.sum(v, d => d.yield), \n d => d.site, d => d.variety, d => d.year\n );\n let detailedMap = new Map()\n let detailedPivoted = Array.from(detailedData).map(([kSite, vSite]) => { \n detailedMap.set(kSite, Array.from(vSite).map(([kVariety, vVariety]) => { \n let initialValue = [ ['variety', kVariety ] ]\n let yearValues = Array.from(vVariety)\n return Object.fromEntries(\n initialValue.concat(yearValues)\n )\n }))\n })\n return detailedMap\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n positions = Array.from(positions);\n let n = positions.length;\n if (!positions.every(isFinite)) {\n console.log(positions)\n throw new Error(\"invalid position\");\n }\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"lineWidth = 2;","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"lineSelectedWidth = 4;","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}