31:T4cc,

Graphs found in data sheets or scientific articles are typically raster images, lacking the underlying numerical data. This web tool was purposefully designed to facilitate the manual extraction of data from such graphical representations. Think of it as digital tracing paper — papier calque, in French — enhanced with the added convenience of exporting data into CSV format.

32:T712,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", "1.8px solid "+color_calque) .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(); }33:T4db,viewof line = { const form = html``; form.select.oninput = () => form.value = d3.line().curve(d3[form.select.value]); form.select.oninput(); return form; }34:T9ca,

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]

35: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(); }36: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; }37: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(); } 38: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; }39: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; }3a:[{"id":"0192b8975a89989c3e079e2124f3960a1715b4e6076d149bab63f11c688622ea28c98d96e4c4df14151f3e67238acf28b099d8f2094cb5d9b255475405cbdac9","href":"https://static.observableusercontent.com/files/0192b8975a89989c3e079e2124f3960a1715b4e6076d149bab63f11c688622ea28c98d96e4c4df14151f3e67238acf28b099d8f2094cb5d9b255475405cbdac9","name":"Rutherford_ThX_Radium-224.PNG","type":"image/png","lastModified":1713101311509.761,"size":459427},{"id":"e1e68574123ab4b7dee4d57600a616c4f3f16d528a824dacc5f2d7f51eccad8c23dad78dc0695afa0db8596cc9c80c60b33bbd2244a3a12a97b5f373f86918bf","href":"https://static.observableusercontent.com/files/e1e68574123ab4b7dee4d57600a616c4f3f16d528a824dacc5f2d7f51eccad8c23dad78dc0695afa0db8596cc9c80c60b33bbd2244a3a12a97b5f373f86918bf","name":"Rubens_Kurlbaum_1901.PNG","type":"image/png","lastModified":1713101311509.761,"size":241155},{"id":"7c10ef0f3dbee5ec02e839c54c58440e01202ca787788e6238850847962c5830146e844e19a14ee9cce4c0a571a762cc4b4ad8a36c206041ce2e6d0161e2bc87","href":"https://static.observableusercontent.com/files/7c10ef0f3dbee5ec02e839c54c58440e01202ca787788e6238850847962c5830146e844e19a14ee9cce4c0a571a762cc4b4ad8a36c206041ce2e6d0161e2bc87","name":"Sony_ILX511.PNG","type":"image/png","lastModified":1713101311509.761,"size":53894},{"id":"46622623176825824376f779a6ca2160f4aff943d209c07f8095587e45371aa78c60a1f530e42d0ccebe5be80cb275f20a601819d112bfe539932161276eda27","href":"https://static.observableusercontent.com/files/46622623176825824376f779a6ca2160f4aff943d209c07f8095587e45371aa78c60a1f530e42d0ccebe5be80cb275f20a601819d112bfe539932161276eda27","name":"json2csv.umd.js","type":"application/javascript","lastModified":1713101311509.761,"size":224399},{"id":"6e80e607c2cff5bea316e329a78062dbe6662997a728bef90f4521bb79477579d1f8379cf3d0bd0c3161c75153d529c3e1374750e1d9d19e4180edece92d3f1d","href":"https://static.observableusercontent.com/files/6e80e607c2cff5bea316e329a78062dbe6662997a728bef90f4521bb79477579d1f8379cf3d0bd0c3161c75153d529c3e1374750e1d9d19e4180edece92d3f1d","name":"18NLW4500_Eighteen_Sound.PNG","type":"image/png","lastModified":1713101311509.761,"size":115901},{"id":"4f1a96ac2c7aae464a4050658d196a729d162a54e5bb7a266070609404c731ef91aefd096514732ac78d250a72596ad14160a4320a1026dfd7b524b9fc56956c","href":"https://static.observableusercontent.com/files/4f1a96ac2c7aae464a4050658d196a729d162a54e5bb7a266070609404c731ef91aefd096514732ac78d250a72596ad14160a4320a1026dfd7b524b9fc56956c","name":"Fletcher-Munson_1933.PNG","type":"image/png","lastModified":1713101311509.761,"size":156661},{"id":"7e68d3e26b8224304327fd9ff34954d254a3483468a7bad86d729012a4b51e0ec6fa0161f138c6690e0bb69527c82a2e4a0c3d1ff219357431181a6fedadf878","href":"https://static.observableusercontent.com/files/7e68d3e26b8224304327fd9ff34954d254a3483468a7bad86d729012a4b51e0ec6fa0161f138c6690e0bb69527c82a2e4a0c3d1ff219357431181a6fedadf878","name":"RGBW_LED_OSRAM_LE-RTDUW-S2WN.PNG","type":"image/png","lastModified":1713101311509.761,"size":214976},{"id":"6f2b8d229a2130c8a4f1ab4de5fa6a2d8d5cae46f55dc30735ef6576e0ff681f0b5f3041f9f99b5177c20d71a3a6d1d6ac72e089d51ccafd7518bbe1e766dfeb","href":"https://static.observableusercontent.com/files/6f2b8d229a2130c8a4f1ab4de5fa6a2d8d5cae46f55dc30735ef6576e0ff681f0b5f3041f9f99b5177c20d71a3a6d1d6ac72e089d51ccafd7518bbe1e766dfeb","name":"SLED_EXS210154-01.PNG","type":"image/png","lastModified":1713101311509.761,"size":96618},{"id":"36f4c09d71ab27a2e9cb8da454be81173bffa972eb39a281e957d99e84e7103d9ec79ea66b83eaf3cc0fe261d26505ab128225642252f9d2e99f8a9f82da1858","href":"https://static.observableusercontent.com/files/36f4c09d71ab27a2e9cb8da454be81173bffa972eb39a281e957d99e84e7103d9ec79ea66b83eaf3cc0fe261d26505ab128225642252f9d2e99f8a9f82da1858","name":"Shure_Beta-52A.PNG","type":"image/png","lastModified":1713101311509.761,"size":1001627},{"id":"4fb97a951eabf428ffc8d4e8fe22119829c7d433d0ebb30c0dc4864c1ee1aa2afd763ebe877d128e4cf3f24dd973c3d4ab1f90a8c0d312b8af5cde9f904caeaf","href":"https://static.observableusercontent.com/files/4fb97a951eabf428ffc8d4e8fe22119829c7d433d0ebb30c0dc4864c1ee1aa2afd763ebe877d128e4cf3f24dd973c3d4ab1f90a8c0d312b8af5cde9f904caeaf","name":"InGaAs_photodetector_responsivity.PNG","type":"image/png","lastModified":1713101311509.761,"size":145426}] 2f:{"title":"On-line tool: Calque","cells":[{"id":0,"value":"# On-line tool: Calque\n","pinned":false,"hidden":false,"mode":"md"},{"id":4327,"value":"This notebook is a fork of the original \"Calque (tracing paper)\". \n
Here, to make it convenient for use as a web tool, only essential information is displayed.","pinned":false,"hidden":false,"mode":"html"},{"id":3994,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":435,"value":"\n

How to use the tool

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 or copy/paste it from the text area below\n
(CSV: comma-separated values that can be opened in any spreadsheet).

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

① Upload a source image

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

💡 As an example, you will find the typical frequency response of a microphone \n
extracted from a technical document (Shure, Beta 52A).\n
You may check the other examples given at the end of this notebook.

","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.2, step: 0.05, label: \"Image opacity:\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4521,"value":"

","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":2462,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4154,"value":"

② Draw scaled axes

","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: 'Logarithmic 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\"? 0 : 50, step: scale_type_x_axis==\"Linear scale\"? 0.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\"? -20 : 1, step: scale_type_y_axis==\"Linear scale\"? 0.1 : 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\"? 100 : 10000, step: scale_type_x_axis==\"Linear scale\"? 0.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\"? 20 : 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:\"Frequency (Hz)\", placeholder: \"Write a title for the x-axis...\"}),\n y_title : Inputs.text({label: \"Title, y-axis:\", value:\"Amplitude (dB)\", placeholder: \"Write a title for the y-axis...\"}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"

③ Draw the graph

\n","pinned":false,"hidden":false,"mode":"html"},{"id":28,"value":"$33","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":4660,"value":"

④ Save data

To save the data, you have two options:\n

Click the button to save the data in a .csv file (values separated by comas),
Manually copy and paste the data from the text area (values separated by tabs).

\nBoth methods allow direct manipulation of the data in a spreadsheet software.\n

💡 Alternatively, you can paste the data into this other Observable \n
notebook: Polynomial regression in Javascript.\n
\n

","pinned":false,"hidden":false,"mode":"html"},{"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":4552,"value":"viewof textarea = html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3966,"value":"examples = html`\n

Examples of graphic images

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"$34","pinned":false,"hidden":false,"mode":"html"},{"id":4252,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":4404,"value":"viewof display_inspect = Inputs.toggle({label: \"⇣ Check to inspect observable variables\", values: [\"true\", \"none\"], value: \"none\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4412,"value":"\n
\n${display_inspect == \"none\"? html`

⇣ Appendix is hidden ...

` : html`

Appendix

`}","pinned":false,"hidden":false,"mode":"html"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"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":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":false,"hidden":false,"mode":"ojs"},{"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":"$35","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":"$36","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":"$37","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":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2563,"value":"$39","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\", -70)\n .attr(\"dy\", -10)\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":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(\"Shure_Beta-52A.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":1343,"value":"height = 700","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":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":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 = [[242,612],[834,612],[140,612],[140,215]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"mutable selected_point = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"mutable points = [[220,461],[243,461],[284,476],[326,490],[391,505],[442,505],[473,499],[500,483],[521,474],[546,473],[577,459],[597,448],[618,436],[642,433],[660,426],[689,398],[711,364],[722,349],[733,340],[751,365],[759,383],[763,407.34375],[767,441.34375],[776,461.34375],[785,471],[792,471],[805,456],[814,459],[825,489],[845,574.34375]];","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":4635,"value":"tab_separated_data = {\n var data = \"\";\n for(var i = 0; i < values_points.length; i++) {\n data += \" \"+values_points[i][0].toFixed(4)+\"\\t\"+values_points[i][1].toFixed(4)+\"\\n\"\n }\nreturn data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4357,"value":"color_calque = \"#ff6f00\"","pinned":false,"hidden":false,"mode":"ojs"},{"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":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":4531,"value":"

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W3a","stdlib":"1","titling":"auto"}