30:T4db,viewof line = { const form = html``; form.select.oninput = () => form.value = d3.line().curve(d3[form.select.value]); form.select.oninput(); return form; }31:T70c,chart = { // Arrowhead marker configuration const markerBoxWidth = 50, markerBoxHeight = 12; const refX = markerBoxWidth / 2, refY = markerBoxHeight / 2; const arrowPoints = [[0, 0], [refX, refY], [0, markerBoxHeight]]; svg.attr("viewBox", [0, 0, width, height]) .style("border", "2px solid lightblue") .attr("tabindex", 1) .attr("pointer-events", "all") .call(d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged_curve)) // Add the arrowhead marker definition to the svg element svg.append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight]) .attr('refX', refX).attr('refY', refY) .attr('markerWidth', markerBoxWidth).attr('markerHeight', markerBoxHeight) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()(arrowPoints)) .attr('fill', color_axis).attr('stroke', color_axis); // Draw points A, B, C, and D svg.selectAll(".axes_points") .data(mutable positions_ABCD) .enter().append("circle") .attr("cursor", "move").attr("pointer-events", "all") .attr("stroke", "transparent").attr("stroke-width", selection_size) .attr("class", "axes_points") .attr("r", radius_axis_point) .attr("fill", (d, i) => points_ABCD[i].color) .call(d3.drag() .subject(([x,y]) => ({x, y})) .on("drag", dragged_axes)); if(points.length>0 && mutable selected_point.length == 0){ mutable selected_point = mutable points[points.length-1]; } update_curve(); update_axes(); update_proj_xy(); calculate_values(); display_values_selected_point(); d3.select(window) .on("keydown", keydown); return svg.node(); }32:T9f4,

Examples of graphic images

If you want to try the tool with some graphic images, here is a selection of sample plots for a quick dive-in:

Science

Early validation of Plank's law of blackbody radiation (linear plot)
[H. Rubens and F. Kurlbaum, Annalen der Physik, 1901]
Ernest Rutherford's historical observations of the Th X (radium-224, ²²⁴Ra) decay of activity (linear plot)

Radio-activity

Cambridge Physical Series

Light

Relative spectral emission of an RGBW light-emitting diode (linear plot)
[LE RTDUW S2WN, OSRAM]
Spectral power distribution of an IR superluminescent diode (linear plot)
[EXS210154-01, Exalos]
Typical responsivity of an InGaAs photodetector (linear plot)
[PDB440A, Thorlabs]
Relative spectral sensitivity of a B/W CCD linear image sensor (linear plot)
[ILX511, Sony]

Sound

The 1933 Fletcher–Munson equal loudness contours (semi-log plot)
[ H. Fletcher & W. A. Munson, The Bell System Technical Journal, Oct. 1933]
Impedance vs. frequency of a voice-coil loudspeaker (semi-log plot)
[18NLW4500, Eighteen Sound]
Frequency response of a kick drum microphone (semi-log plot)
[Beta 52A, Shure]

33:T4f3,--- ## Useful references * [Graph Grabber](https://www.quintessa.org/software/downloads-and-demos) by Quintessa Ltd: Freeware for data extraction from graphs * **Observable notebooks** * [Spline editor / Splice](https://observablehq.com/@christophe-yamahata/spline-editor-splice-insert) (fork of [Spline editor](https://observablehq.com/@d3/spline-editor) by [Mike Bostock](https://observablehq.com/@mbostock)): Draw and edit a spline with multiple control points (*e.g.*, insert control points between existing ones) * [Closest Point on Line](https://observablehq.com/@christophe-yamahata/closest-point-on-line--multiple-control-points) (fork of [Closest point on line](https://observablehq.com/@mbostock/closest-point-on-line) by [Mike Bostock](https://observablehq.com/@mbostock)): Code in this notebook is used to obtain the x and y coordinates of multiple control points * [Logarithmic and linear scale bars](https://observablehq.com/@christophe-yamahata/logarithmic-and-linear-scale-bars): A notebook with all the features that are useful for plotting graphs with logarithmic or linear scale bars. * [Draggable axes with arrows](https://observablehq.com/@christophe-yamahata/draggable-axes-with-arrows): Draw the x and y axes34:T7f9, function update_curve() { const radius_selected = 5; const curve = svg.selectAll(".curve") .data([0]); const curveEnter = curve.enter().append("path").attr("class", "curve"); curve.merge(curveEnter) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .attr("d", line(mutable points)) const circle = svg.selectAll("g") .data(mutable points, d => d); circle.enter().append("g") .call(g => g.append("circle") .attr("r", 1.3*size_selectable_area) .attr("stroke", "none") .attr("cursor", "move") .attr("opacity", 0) .transition() .duration(2*transition_duration) .attr("r", size_selectable_area) ) .call(g => g.append("circle") .attr("r", radius) .attr("stroke", "black") .attr("stroke-width", dot_stroke) .transition() // 1st transition .duration(transition_duration) .delay(0.6*transition_duration) .ease(d3.easeElastic) .attr("r", radius_new_dot) .transition() // 2nd transition .duration(transition_duration) .delay(1.5*transition_duration) .attr("r", radius) ) .merge(circle) .attr("transform", d => `translate(${d})`) .select("circle:last-child") .attr("fill", d=> { return d===mutable selected_point ? color_dot_selected : color_dot}) .attr("stroke", d=> { return d===mutable selected_point ? color_dot_selected : color_dot_stroke}) .attr("r", d=> { return d===mutable selected_point ? radius_selected: radius}) .attr("cursor", d=> { return d===mutable selected_point ? "default" : "move"}) curve.exit().remove(); circle.exit().remove(); }35:Td1e,function update_axes() { svg.selectAll(".point_on_axis").remove(); svg.selectAll(".axis_line").remove(); svg.selectAll(".axis").remove(); svg.selectAll(".axis_title").remove(); // Put text next to points A, B, C, and D for(let i = 0; i <= 3; i++) { svg.append("text") .attr("pointer-events", "none") .attr("x",mutable positions_ABCD[i][0]) .attr("y",mutable positions_ABCD[i][1]) .attr("dx", points_ABCD[i].x) .attr("dy", points_ABCD[i].y) .attr("class", "point_on_axis") .attr("fill", points_ABCD[i].color) .text(points_ABCD[i].name+" ("+points_ABCD[i].text+")"); } // Add lines with arrowhead at the end for(let i = 0; i <= 1; i++) { let j = 2*i; const t = (width + height) / distance(mutable positions_ABCD[j], mutable positions_ABCD[j+1]); const t_A = (distance(mutable positions_ABCD[j], mutable positions_ABCD[j+1]) -0.2*distance_offset_axis)/distance(mutable positions_ABCD[j], mutable positions_ABCD[j+1]); const t_B = (distance(mutable positions_ABCD[j], mutable positions_ABCD[j+1]) +0.8*distance_offset_axis)/distance(mutable positions_ABCD[j], mutable positions_ABCD[j+1]); const l1 = interpolate(mutable positions_ABCD[j], mutable positions_ABCD[j+1], t); const l2 = interpolate(mutable positions_ABCD[j+1], mutable positions_ABCD[j], t); const l_A = interpolate(mutable positions_ABCD[j+1], mutable positions_ABCD[j], t_A); const l_B = interpolate(mutable positions_ABCD[j], mutable positions_ABCD[j+1], t_B); // Add line behind svg.append('path') .attr("class", "axis_line") .attr('d', d3.line()([l1, l2])) .attr("stroke", color_line); // Axis below points svg.append('path') .attr("class", "axis") .attr('d', d3.line()([l_A, l_B])) .attr('stroke', color_axis) .attr('marker-end', 'url(#arrow)') .attr('fill', 'none'); // Add the name of the axis const posX = mutable positions_ABCD[j][0]/2 + mutable positions_ABCD[j+1][0]/2; const posY = mutable positions_ABCD[j][1]/2 + mutable positions_ABCD[j+1][1]/2; const angle = axis_title[i].angle + (180/Math.PI)*Math.atan2(mutable positions_ABCD[j+1][1]-mutable positions_ABCD[j][1], mutable positions_ABCD[j+1][0]-mutable positions_ABCD[j][0]); svg.append("text") .attr("pointer-events", "none") .attr("text-anchor", "middle") .attr("transform", "translate("+ posX +","+ posY +") rotate("+ angle +")") // .attr("x",posX).attr("y",posY) .attr("dx", axis_title[i].x) .attr("dy", axis_title[i].y) .attr("class", "axis_title") .attr("fill",color_axis) .text(axis_title[i].text + (i==0 ? (scale_type_x_axis=="Linear scale"? " – Linear" : " – Log") : (scale_type_y_axis=="Linear scale"? " – Linear" : " – Log"))); } // Update points locations const points = svg.selectAll(".axes_points") .attr("cx", d => d[0]).attr("cy", d => d[1]) .raise(); // Ensure that points A, B, C, and D are always above curve points (i.e., can easily be selected) mutable positions_ABCD = mutable positions_ABCD; }36:T56d,function update_proj_xy() { svg.selectAll(".projection_points_x") .remove(); svg.selectAll(".projection_lines_x") .remove(); svg.selectAll(".projection_points_y") .remove(); svg.selectAll(".projection_lines_y") .remove(); for(let i=0; i < mutable points.length ;i++) { const p_x = interpolate(mutable positions_ABCD[0], mutable positions_ABCD[1], project(mutable positions_ABCD[0], mutable positions_ABCD[1], mutable points[i])); const p_y = interpolate(mutable positions_ABCD[2], mutable positions_ABCD[3], project(mutable positions_ABCD[2], mutable positions_ABCD[3], mutable points[i])); svg.append("line") .attr("class", "projection_lines_x") .attr("stroke", color_projected_lines) .attr("x1", mutable points[i][0]) .attr("y1", mutable points[i][1]) .attr("x2", p_x[0]) .attr("y2", p_x[1]); svg.append("line") .attr("class", "projection_lines_y") .attr("stroke", color_projected_lines) .attr("x1", mutable points[i][0]) .attr("y1", mutable points[i][1]) .attr("x2", p_y[0]) .attr("y2", p_y[1]); } svg.selectAll(".projection_lines_x").lower(); svg.selectAll(".projection_lines_y").lower(); svg.selectAll(".bkg_image").lower(); } 37:T716,// See https://observablehq.com/@christophe-yamahata/logarithmic-and-linear-scale-bars function calculate_value_x() { mutable points_proj_x = []; mutable values_points_x = []; for(let i=0; i < mutable points.length;i++) { const p = interpolate(mutable positions_ABCD[0],mutable positions_ABCD[1], project(mutable positions_ABCD[0], mutable positions_ABCD[1], mutable points[i])); mutable points_proj_x[i] = p; } for(let i=0; i < mutable points.length ;i++) { // Value "x" in the equations f1 = a_1*x+b_1 and f2 = a_2*x+b let x_val = ((mutable points_proj_x[i][0]-mutable positions_ABCD[0][0])*(mutable positions_ABCD[1][0] - mutable positions_ABCD[0][0]) +(mutable points_proj_x[i][1] - mutable positions_ABCD[0][1])*(mutable positions_ABCD[1][1] - mutable positions_ABCD[0][1]))/ (Math.pow(mutable positions_ABCD[1][0] - mutable positions_ABCD[0][0],2)+Math.pow(mutable positions_ABCD[1][1] - mutable positions_ABCD[0][1],2)); // Scaling using values A and B let P_val_i = 0; if(scale_type_x_axis=="Linear scale") { // b_1 = value_A; a_1 = value_B - value_A // P_val_i = f1 = a_1*x_val+b_1 = (value_B - value_A)*x_val - value_A P_val_i= (value_B - value_A)*x_val + value_A } else if(scale_type_x_axis=="Logarithmic scale") { // b_2 = Math.log10(value_A); a_2 = Math.log10(value_B) - Math.log10(value_A) // P_val_i = f2 = Math.pow(10, a_2*x_val+b_2) P_val_i= Math.pow(10,(Math.log10(value_B) - Math.log10(value_A))*x_val + Math.log10(value_A)); } mutable values_points_x[i] = P_val_i; } mutable points_proj_x = mutable points_proj_x; mutable values_points_x = mutable values_points_x; }38:T716,// See https://observablehq.com/@christophe-yamahata/logarithmic-and-linear-scale-bars function calculate_value_y() { mutable points_proj_y = []; mutable values_points_y = []; for(let i=0; i < mutable points.length;i++) { const p = interpolate(mutable positions_ABCD[2],mutable positions_ABCD[3], project(mutable positions_ABCD[2], mutable positions_ABCD[3], mutable points[i])); mutable points_proj_y[i] = p; } for(let i=0; i < mutable points.length ;i++) { // Value "y" in the equations f1 = a_1*y+b_1 and f2 = a_2*y+b let y_val = ((mutable points_proj_y[i][0]-mutable positions_ABCD[2][0])*(mutable positions_ABCD[3][0] - mutable positions_ABCD[2][0]) +(mutable points_proj_y[i][1] - mutable positions_ABCD[2][1])*(mutable positions_ABCD[3][1] - mutable positions_ABCD[2][1]))/ (Math.pow(mutable positions_ABCD[3][0] - mutable positions_ABCD[2][0],2)+Math.pow(mutable positions_ABCD[3][1] - mutable positions_ABCD[2][1],2)); // Scaling using values C and D let P_val_i = 0; if(scale_type_y_axis=="Linear scale") { // b_1 = value_C; a_1 = value_D - value_C // P_val_i = f1 = a_1*y_val+b_1 = (value_D - value_C)*y_val - value_C P_val_i= (value_D - value_C)*y_val + value_C } else if(scale_type_y_axis=="Logarithmic scale") { // b_2 = Math.log10(value_C); a_2 = Math.log10(value_D) - Math.log10(value_C) // P_val_i = f2 = Math.pow(10, a_2*y_val+b_2) P_val_i= Math.pow(10,(Math.log10(value_D) - Math.log10(value_C))*y_val + Math.log10(value_C)); } mutable values_points_y[i] = P_val_i; } mutable points_proj_y = mutable points_proj_y; mutable values_points_y = mutable values_points_y; }39:[{"id":"4fb97a951eabf428ffc8d4e8fe22119829c7d433d0ebb30c0dc4864c1ee1aa2afd763ebe877d128e4cf3f24dd973c3d4ab1f90a8c0d312b8af5cde9f904caeaf","href":"https://static.observableusercontent.com/files/4fb97a951eabf428ffc8d4e8fe22119829c7d433d0ebb30c0dc4864c1ee1aa2afd763ebe877d128e4cf3f24dd973c3d4ab1f90a8c0d312b8af5cde9f904caeaf","name":"InGaAs_photodetector_responsivity.PNG","type":"image/png","lastModified":1712907557803.555,"size":145426},{"id":"36f4c09d71ab27a2e9cb8da454be81173bffa972eb39a281e957d99e84e7103d9ec79ea66b83eaf3cc0fe261d26505ab128225642252f9d2e99f8a9f82da1858","href":"https://static.observableusercontent.com/files/36f4c09d71ab27a2e9cb8da454be81173bffa972eb39a281e957d99e84e7103d9ec79ea66b83eaf3cc0fe261d26505ab128225642252f9d2e99f8a9f82da1858","name":"Shure_Beta-52A.PNG","type":"image/png","lastModified":1712910241359.394,"size":1001627},{"id":"6f2b8d229a2130c8a4f1ab4de5fa6a2d8d5cae46f55dc30735ef6576e0ff681f0b5f3041f9f99b5177c20d71a3a6d1d6ac72e089d51ccafd7518bbe1e766dfeb","href":"https://static.observableusercontent.com/files/6f2b8d229a2130c8a4f1ab4de5fa6a2d8d5cae46f55dc30735ef6576e0ff681f0b5f3041f9f99b5177c20d71a3a6d1d6ac72e089d51ccafd7518bbe1e766dfeb","name":"SLED_EXS210154-01.PNG","type":"image/png","lastModified":1712911481759.546,"size":96618},{"id":"7e68d3e26b8224304327fd9ff34954d254a3483468a7bad86d729012a4b51e0ec6fa0161f138c6690e0bb69527c82a2e4a0c3d1ff219357431181a6fedadf878","href":"https://static.observableusercontent.com/files/7e68d3e26b8224304327fd9ff34954d254a3483468a7bad86d729012a4b51e0ec6fa0161f138c6690e0bb69527c82a2e4a0c3d1ff219357431181a6fedadf878","name":"RGBW_LED_OSRAM_LE-RTDUW-S2WN.PNG","type":"image/png","lastModified":1712914345114.741,"size":214976},{"id":"4f1a96ac2c7aae464a4050658d196a729d162a54e5bb7a266070609404c731ef91aefd096514732ac78d250a72596ad14160a4320a1026dfd7b524b9fc56956c","href":"https://static.observableusercontent.com/files/4f1a96ac2c7aae464a4050658d196a729d162a54e5bb7a266070609404c731ef91aefd096514732ac78d250a72596ad14160a4320a1026dfd7b524b9fc56956c","name":"Fletcher-Munson_1933.PNG","type":"image/png","lastModified":1713006476652.496,"size":156661},{"id":"7c10ef0f3dbee5ec02e839c54c58440e01202ca787788e6238850847962c5830146e844e19a14ee9cce4c0a571a762cc4b4ad8a36c206041ce2e6d0161e2bc87","href":"https://static.observableusercontent.com/files/7c10ef0f3dbee5ec02e839c54c58440e01202ca787788e6238850847962c5830146e844e19a14ee9cce4c0a571a762cc4b4ad8a36c206041ce2e6d0161e2bc87","name":"Sony_ILX511.PNG","type":"image/png","lastModified":1713011674283.856,"size":53894},{"id":"e1e68574123ab4b7dee4d57600a616c4f3f16d528a824dacc5f2d7f51eccad8c23dad78dc0695afa0db8596cc9c80c60b33bbd2244a3a12a97b5f373f86918bf","href":"https://static.observableusercontent.com/files/e1e68574123ab4b7dee4d57600a616c4f3f16d528a824dacc5f2d7f51eccad8c23dad78dc0695afa0db8596cc9c80c60b33bbd2244a3a12a97b5f373f86918bf","name":"Rubens_Kurlbaum_1901.PNG","type":"image/png","lastModified":1713017195521.882,"size":241155},{"id":"0192b8975a89989c3e079e2124f3960a1715b4e6076d149bab63f11c688622ea28c98d96e4c4df14151f3e67238acf28b099d8f2094cb5d9b255475405cbdac9","href":"https://static.observableusercontent.com/files/0192b8975a89989c3e079e2124f3960a1715b4e6076d149bab63f11c688622ea28c98d96e4c4df14151f3e67238acf28b099d8f2094cb5d9b255475405cbdac9","name":"Rutherford_ThX_Radium-224.PNG","type":"image/png","lastModified":1713020167061.544,"size":459427},{"id":"1416b89601dca13ec27b1c2f264f2270aa7532b6eaf93c988de0116782d17167d86485e2df2e6e04782853677d118baddc3bce748d7c1254703fdec8c315349f","href":"https://static.observableusercontent.com/files/1416b89601dca13ec27b1c2f264f2270aa7532b6eaf93c988de0116782d17167d86485e2df2e6e04782853677d118baddc3bce748d7c1254703fdec8c315349f","name":"Eighteen_Sound_18NLW4500.PNG","type":"image/png","lastModified":1713112496511.777,"size":115901},{"id":"daea8ab5dba392128460a36ce7f6d0a6f3f0cf5205f88dd7ab157fd452c5a9aece5a78ea80f4ff9277255379b25fef40f6dfd390bba8295c2f36cfd0cd74b7be","href":"https://static.observableusercontent.com/files/daea8ab5dba392128460a36ce7f6d0a6f3f0cf5205f88dd7ab157fd452c5a9aece5a78ea80f4ff9277255379b25fef40f6dfd390bba8295c2f36cfd0cd74b7be","name":"Typical_radiometric_spectrum_white_LED.png","type":"image/png","lastModified":1664486997573.156,"size":34821},{"id":"46622623176825824376f779a6ca2160f4aff943d209c07f8095587e45371aa78c60a1f530e42d0ccebe5be80cb275f20a601819d112bfe539932161276eda27","href":"https://static.observableusercontent.com/files/46622623176825824376f779a6ca2160f4aff943d209c07f8095587e45371aa78c60a1f530e42d0ccebe5be80cb275f20a601819d112bfe539932161276eda27","name":"json2csv.umd.js","type":"application/javascript","lastModified":1675192480158.426,"size":224399}] 2e:{"title":"Calque (tracing paper)","cells":[{"id":0,"value":"# Calque (tracing paper)","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"

\n Most often, graphs published in data sheets or in scientific articles are raster images provided without the original numerical data. This tool allows users to manually extract data points from a graph image in the same way as with tracing paper (papier calque in french, hence the title of this notebook). \n

Load the picture of a graph that you want to reproduce \n
(*.jpg or *.png screen capture),
Define the x and y axes and their scales,
Place data points on the graph,
Export the data as a CSV file \n
(comma-separated text file that can be opened in any spreadsheet).

\nAs an example, you will find the typical radiometric spectrum of a white LED extracted from a technical document.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":920,"value":"
\n

Source image

","pinned":false,"hidden":false,"mode":"html"},{"id":1046,"value":"

Load your source image, define its scale (i.e., pixel width), adapt the transparency.

","pinned":false,"hidden":false,"mode":"html"},{"id":3620,"value":"viewof img_file = Inputs.file();","pinned":false,"hidden":false,"mode":"ojs"},{"id":2893,"value":"viewof inputs_source_image = columns({\n image_width : Inputs.range([600, 1500], {value: 970, step: 1, label: \"Image width (pixels):\"}),\n opacity : Inputs.range([0, 1], {value: 0.25, step: 0.05, label: \"Image opacity:\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"
\n

Scaled axes

Drag the x and y axes on the graph, define the scales below.","pinned":false,"hidden":false,"mode":"html"},{"id":2997,"value":"viewof inputs_scale_type_xy = columns({\n scale_type_x_axis : Inputs.select(['Logarithmic scale','Linear scale'], {value: 'Linear scale', label: html`x-scale:`}),\n scale_type_y_axis : Inputs.select(['Logarithmic scale','Linear scale'], {value: 'Linear scale', label: html`y-scale:`}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3012,"value":"viewof inputs_values_AC = columns({\n value_A : Inputs.range([scale_type_x_axis==\"Linear scale\"? -max_linear : 1/max_logarithmic, scale_type_x_axis==\"Linear scale\"? max_linear : max_logarithmic], {value: scale_type_x_axis==\"Linear scale\"? 400 : 20, step: scale_type_x_axis==\"Linear scale\"? 1 : 1/max_logarithmic, label: html`Value at point A:`}),\n value_C : Inputs.range([scale_type_y_axis==\"Linear scale\"? -max_linear : 1/max_logarithmic, scale_type_y_axis==\"Linear scale\"? max_linear : max_logarithmic], {value: scale_type_y_axis==\"Linear scale\"? 0 : 10, step: scale_type_y_axis==\"Linear scale\"? 0.01 : 1/max_logarithmic, label: html`Value at point C:`}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3075,"value":"viewof inputs_values_BD = columns({\n value_B : Inputs.range([scale_type_x_axis==\"Linear scale\"? -max_linear : 1/max_logarithmic, scale_type_x_axis==\"Linear scale\"? max_linear : max_logarithmic], {value: scale_type_x_axis==\"Linear scale\"? 800 : 10000, step: scale_type_x_axis==\"Linear scale\"? 1 : 1/max_logarithmic, label: html`Value at point B:`}),\n value_D : Inputs.range([scale_type_y_axis==\"Linear scale\"? -max_linear : 1/max_logarithmic, scale_type_y_axis==\"Linear scale\"? max_linear : max_logarithmic], {value: scale_type_y_axis==\"Linear scale\"? 1 : 1000, step: scale_type_y_axis==\"Linear scale\"? 0.01 : 1/max_logarithmic, label: html`Value at point D:`})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3083,"value":"viewof inputs_titles_xy = columns({\n x_title : Inputs.text({label: \"Title, x-axis:\", value:\"Wavelength (nm)\", placeholder: \"Write a title for the x-axis...\"}),\n y_title : Inputs.text({label: \"Title, y-axis:\", value:\"Intensity (a.u.)\", placeholder: \"Write a title for the y-axis...\"}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"
\n

Graph construction

\n Click on the graph to place new control points, or to drag an existing one. \n
Select an existing control point if you want to add a new one right after it.\n
Hitting [Delete] will delete the selected control point.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":3831,"value":"reset = Inputs.button(html`Clear ALL points`, {label: \"Click if you want to reset the chart\", value: null, reduce: () =>\n { \n while(points.length>0){\n mutable selected_point = mutable points[points.length-1]; \n const i = mutable points.indexOf(selected_point);\n mutable points.splice(i, 1);\n mutable points = mutable points;\n mutable selected_point = mutable points.length ? mutable points[i > 0 ? i - 1 : 0] : null;\n update_curve();\n }\n } })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2794,"value":"viewof inputs_graph_display = columns({\n\n show_values_selected : Inputs.toggle({label: \"Show values of selected point\", value: true}),\n show_projections : Inputs.toggle({label: \"Show projections (dashed lines)\", value: false})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2632,"value":"{\n if(values_points_object.length>0) {\n return DOM.download(export_CSV(values_points_object), \"calque_graph_data\", \"Save data as CSV\")\n } else {\n return html`No data: Click on the graph to add points.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2462,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":1271,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2822,"value":"// https://observablehq.com/@bcardiff/observable-columns\ncolumns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `width:200px; display: grid; grid-gap: 10px 100px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2640,"value":"---\n // Export data as CSV (see https://observablehq.com/@palewire/saving-csv)\n\n // Note that the Javascript code is directly loaded from the file *json2csv.umd.js* (see the list of files in attachment)","pinned":false,"hidden":false,"mode":"md"},{"id":2636,"value":"// See https://observablehq.com/@palewire/saving-csv\nfunction export_CSV (data) {\n\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return new Blob([csv], {type: \"text/csv\"}) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3659,"value":"// The external source may become obsolete sooner or later. \n// To ensure long-term operation of this notebook, it is best to choose Option 2.\n// Option 1 (successfully tested on January 31, 2023)\n// json2csv = require(\"json2csv@5.0.7/dist/json2csv.umd.js\")\n// Option 2: Use instead the file in attachment which was loaded from https://cdn.jsdelivr.net/npm/json2csv@5.0.7/dist/json2csv.umd.js \njson2csv = require(await FileAttachment(\"json2csv.umd.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2209,"value":"---\n // Functions called each time the SVG graph is modified","pinned":false,"hidden":false,"mode":"md"},{"id":1354,"value":"function distance([x1, y1], [x2, y2]) {\n return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"function interpolate([x1, y1], [x2, y2], t) {\n return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"function project([x1, y1], [x2, y2], [x3, y3]) {\n const x21 = x2 - x1, y21 = y2 - y1;\n const x31 = x3 - x1, y31 = y3 - y1;\n return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2202,"value":"function dragstarted({subject}){\n mutable selected_point = subject;\n mutable points = mutable points; \n update_curve();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2198,"value":"function dragsubject(event){\n let subject = event.sourceEvent.target.__data__; \n if(!subject){\n subject = [event.x,event.y];\n // The splice() method is used to add new control points in place (i.e., between existing ones)\n const i = mutable points.indexOf(selected_point);\n if(i>=0) {\n mutable points.splice(i+1, 0, subject); \n } else {\n mutable points.splice(points.length, 0, subject); // If no point is selected, we add a point at the end.\n }\n update_curve()\n }\n else{\n mutable points = mutable points; \n update_curve() \n }\n return subject\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"function keydown(event) {\n if (!mutable selected_point) return;\n switch (event.key) {\n case \"Delete\": {\n event.preventDefault();\n const i = mutable points.indexOf(selected_point);\n if(i>=0){\n mutable points.splice(i, 1);\n mutable points = mutable points;\n mutable selected_point = mutable points.length ? mutable points[i > 0 ? i - 1 : 0] : null;\n }\n update_curve();\n break;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1724,"value":"function dragged_curve(event) {\n event.subject[0] = Math.round(Math.max(distance_offset_axis, Math.min(width - distance_offset_axis , event.x)));\n event.subject[1] = Math.round(Math.max(distance_offset_axis, Math.min(height - distance_offset_axis, event.y))); \n mutable points = mutable points;\n update_curve();\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"function dragged_axes(event) {\n event.subject[0] = Math.round(Math.max(distance_offset_axis, Math.min(width - distance_offset_axis , event.x)));\n event.subject[1] = Math.round(Math.max(distance_offset_axis, Math.min(height - distance_offset_axis, event.y))); \n update_axes();\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2292,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2573,"value":"function calculate_values() { \n calculate_value_x();\n calculate_value_y();\n mutable values_points = [];\n for(let i=0; i < mutable points.length;i++)\n {\n mutable values_points[i] = [mutable values_points_x[i],mutable values_points_y[i]];\n }\n mutable values_points = mutable values_points; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2509,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2563,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2592,"value":"// Display the values (x,y) for the selected point\nfunction display_values_selected_point() {\n svg.selectAll(\".values_selected_point\")\n .remove();\n\n if(points.length>0 && show_values_selected) {\n const i = mutable points.indexOf(selected_point);\n if(i>=0) {\n svg.append(\"text\")\n .attr(\"class\", \"values_selected_point\")\n .attr(\"fill\", color_dot_selected)\n .attr(\"x\", mutable selected_point[0])\n .attr(\"y\", mutable selected_point[1])\n .attr(\"dx\",-50)\n .attr(\"dy\", 30)\n .text(\"(\"+(mutable values_points[i][0]).toFixed(2)+\", \"+(mutable values_points[i][1]).toFixed(2)+\")\");\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"---\n // Background image, CSS style, and other parameters","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"image_load = {\n // We load an image file (sample file or uploaded image)\n let image_load = img_file != null ? \n await img_file.url(img_file) \n : await FileAttachment(\"Typical_radiometric_spectrum_white_LED.png\").url(); \n \n svg.selectAll(\".bkg_image\").remove(); \n \n svg.append(\"svg:image\")\n .attr(\"xlink:href\", image_load)\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", image_width)\n .attr(\"class\",\"bkg_image\")\n .lower(); // Image placed under (background)\n \n return image_load;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"svg = d3.create(\"svg\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1343,"value":"height = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"max_linear = 100000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"max_logarithmic = 1E6","pinned":false,"hidden":false,"mode":"ojs"},{"id":2886,"value":"---\n // Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":2805,"value":"show_projections = inputs_graph_display.show_projections","pinned":false,"hidden":false,"mode":"ojs"},{"id":2784,"value":"show_values_selected = inputs_graph_display.show_values_selected","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"image_width = inputs_source_image.image_width","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"opacity = inputs_source_image.opacity","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"scale_type_x_axis = inputs_scale_type_xy.scale_type_x_axis","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"scale_type_y_axis = inputs_scale_type_xy.scale_type_y_axis","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"value_A = inputs_values_AC.value_A","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"value_B = inputs_values_BD.value_B","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"value_C = inputs_values_AC.value_C;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"value_D = inputs_values_BD.value_D;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"x_title = inputs_titles_xy.x_title;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"y_title = inputs_titles_xy.y_title;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1979,"value":"---\n // Graph data","pinned":false,"hidden":false,"mode":"md"},{"id":1350,"value":"axis_title = [\n {\n x: 0,\n y: 35,\n angle: 0,\n text: x_title,\n },\n {\n x: 0,\n y: -20,\n angle: 0,\n text: y_title,\n },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"mutable points_ABCD = [\n {\n name: \"A\",\n color: \"red\",\n x: -7,\n y: 26,\n text: value_A >0 && scale_type_x_axis==\"Linear scale\"? \"+\"+value_A:value_A,\n },\n {\n name: \"B\",\n color: \"green\",\n x: -7,\n y: 26,\n text: value_B >0 && scale_type_x_axis==\"Linear scale\"? \"+\"+value_B:value_B,\n },\n {\n name: \"C\",\n color: \"orange\",\n x: 12,\n y: 6,\n text: value_C >0 && scale_type_y_axis==\"Linear scale\"? \"+\"+value_C:value_C,\n },\n {\n name: \"D\",\n color: \"blue\",\n x: 12,\n y: 6,\n text: value_D >0 && scale_type_y_axis==\"Linear scale\"? \"+\"+value_D:value_D,\n },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"mutable positions_ABCD = [[166,665],[896,665],[146,650],[146,92]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"mutable selected_point = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"mutable points = [[166,651],[184,641.046875],[192,630.046875],[197,610.046875],[202,589.046875],[205,566.046875],[208,539.046875],[212,507.046875],[216,463],[219,420.046875],[222,371.046875],[225,333.046875],[227,295.046875],[229,253],[233,190.046875],[236,153.046875],[237,126.046875],[239,114.046875],[241,104.046875],[244,96.046875],[250,116.046875],[251,137.046875],[254,165.046875],[257,202.046875],[257,237.046875],[257,281.046875],[260,313.046875],[263,349.046875],[264,384.046875],[266,428.046875],[270,463.046875],[273,509.046875],[278,540.046875],[285,568.046875],[290,584.046875],[296,603.046875],[304,614.046875],[312,619.046875],[320,620.046875],[331,612.046875],[339,597.046875],[344,580.046875],[351,563.046875],[358,527],[369,485.046875],[380,445.046875],[392,413.046875],[402,393],[419,379],[435,377.046875],[456,380.046875],[476,387.046875],[491,399.046875],[507,413.046875],[523,432.046875],[535,449.046875],[550,470.046875],[566,492.046875],[580,517.046875],[597,538.046875]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"// Coordonates of projected points on the x-axis\nmutable points_proj_x = [[]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2538,"value":"// Coordonates of projected points on the y-axis\nmutable points_proj_y = [[]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"// Corresponding values on the x-axis\nmutable values_points_x = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2560,"value":"// Corresponding values on the y-axis\nmutable values_points_y = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2568,"value":"// Corresponding (x,y) values for each point on the curve\nmutable values_points = [[]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2715,"value":"values_points_object = Array.from(values_points, (_, i) => ({\n [x_title]: values_points[i][0],\n [y_title]: values_points[i][1],\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"---\n // Configuration of the axes","pinned":false,"hidden":false,"mode":"md"},{"id":1694,"value":"color_axis = \"darkblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"color_line = \"#D0D0D0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1704,"value":"radius_axis_point = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1708,"value":"selection_size = 12;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"distance_offset_axis = 60; ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"---\n// Configuration of the curve","pinned":false,"hidden":false,"mode":"md"},{"id":1638,"value":"color_curve = \"orange\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":2340,"value":"color_projected_lines = \"#C0C0C0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"color_dot_selected = \"#C000A0\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"color_dot = \"#C0C0C0\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"color_dot_stroke = \"#404040\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"radius = 1.6;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"radius_new_dot = 4;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"dot_stroke = 1.0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"line_stroke = 0.5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"size_selectable_area = 5.5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1674,"value":"transition_duration = 150;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"---","pinned":false,"hidden":false,"mode":"md"}],"files":"$W39","stdlib":"1","titling":"auto"}