31:T41e,md`# Logarithmic and linear scale bars *This fork of Closest Point on Line brings several features that are useful for plotting graphs with logarithmic or linear scale bars.* Consider a scaled axis going through two points **A** (coordinates ${tex`\vec{v_{A}}=`}⟨*x_A*,*y_A*⟩, value A) and **B** (coordinates ${tex`\vec{v_{B}}=`}⟨*x_B*,*y_B*⟩, value B). We will find the coordinates and value of point **P_i'** (coordinates ${tex`\vec{v_{i}'}=`}⟨*x_i'*,*y_i'*⟩, value P_i) on that axis that is closest to point **P_i** (coordinates ${tex`\vec{v_{i}}=`}⟨*x*,*y*⟩, value P_i).`32:T15d3,svg_graph = { let x_axis = [mutable v_A, mutable v_B]; let all_points = x_axis.concat(mutable v_i); mutable selected_scale_type = scale_type; svg.attr("viewBox", [0, 0, width, height]) .style("border", "2px solid lightblue") .attr("tabindex", 1) .attr("pointer-events", "all"); svg.selectAll(".data_points") .attr("cursor", (d, i) => i == 0 || i == 1 ? "arrow" : "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 20) .data(all_points) .enter().append("circle") .attr("class", "data_points") .attr("r", 4) .attr("fill", (d, i) => i == 0 ? "black" : (i == 1 ? "blue" : "red")) .call(d3.drag() .subject(([x,y]) => ({x, y})) .on("drag", dragged)); const line = svg.append("line") .attr("class", "axis_line") .attr("stroke", "black"); const connection = svg.selectAll(".projection_lines"); const projection = svg.selectAll(".projection_points"); update(); function dragged(d) { d[0] = Math.max(0, Math.min(width, d3.event.x)); d[1] = Math.max(0, Math.min(height, d3.event.y)); update(); } function update() { svg.selectAll(".axis_line") .remove(); const line = svg.append("line") .attr("class", "axis_line") .attr("stroke", "black"); const point = svg.selectAll(".data_points") .attr("cx", d => d[0]).attr("cy", d => d[1]); const t = (width + height) / distance(mutable v_A, mutable v_B); const l1 = interpolate(mutable v_A, mutable v_B, t); const l2 = interpolate(mutable v_B, mutable v_A, t); for(let i=0; i < mutable v_i.length;i++) { const p = interpolate(mutable v_A, mutable v_B, project(mutable v_A, mutable v_B, mutable v_i[i])); projection.attr("cx", p[0]).attr("cy", p[1]); line.attr("x1", l1[0]).attr("y1", l1[1]); line.attr("x2", l2[0]).attr("y2", l2[1]); mutable v_i_proj[i] = p; } mutable v_A = mutable v_A; mutable v_B = mutable v_B; mutable v_i = mutable v_i; mutable v_i_proj = mutable v_i_proj; mutable P_i = mutable P_i; mutable selected_scale_type = selected_scale_type; calculate_P_i(); update_proj(); update_text(); } function calculate_P_i() { for(let i=0; i < mutable v_i_proj.length ;i++) { // Value "x" in the equations f1 = a_1*x+b_1 and f2 = a_2*x+b let x_val = ((mutable v_i_proj[i][0]-mutable v_A[0])*(mutable v_B[0] - mutable v_A[0]) +(mutable v_i_proj[i][1] - mutable v_A[1])*(mutable v_B[1] - mutable v_A[1]))/ (Math.pow(mutable v_B[0] - mutable v_A[0],2)+Math.pow(mutable v_B[1] - mutable v_A[1],2)); // Scaling using values A and B let P_val_i = 0; if(scale_type=="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=="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 P_i[i] = P_val_i; } } function update_proj() { svg.selectAll(".projection_points") .remove(); svg.selectAll(".projection_lines") .remove(); for(let i=0; i < mutable v_i.length ;i++) { const p = interpolate(mutable v_A, mutable v_B, project(mutable v_A, mutable v_B, mutable v_i[i])); const connection = svg.append("line") .attr("class", "projection_lines") .attr("stroke", "orange") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 0.8) .attr("x1", mutable v_i[i][0]) .attr("y1", mutable v_i[i][1]) .attr("x2", p[0]) .attr("y2", p[1]); } svg.selectAll(".data_points").raise(); // All data points are placed on top of the chart } function update_text() { svg.selectAll(".labels") .remove(); svg.selectAll(".values") .remove(); svg.append("text") .attr("class", "labels") .attr("x", mutable v_A[0]) .attr("y", mutable v_A[1]) .attr("dx",-5) .attr("dy", -20) .text("A") svg.append("text") .attr("class", "labels") .attr("x", mutable v_B[0]) .attr("y", mutable v_B[1]) .attr("dx",-5) .attr("dy", -20) .text("B"); svg.append("text") .attr("class", "values") .attr("x", mutable v_A[0]) .attr("y", mutable v_A[1]) .attr("dx",-5) .attr("dy", 40) .text(value_A.toFixed(2)+"\n ("+mutable selected_scale_type+")"); svg.append("text") .attr("class", "values") .attr("x", mutable v_B[0]) .attr("y", mutable v_B[1]) .attr("dx",-5) .attr("dy", 40) .text(value_B.toFixed(2)); for(let i=0; i < mutable P_i.length ;i++) { svg.append("text") .attr("class", "values") .attr("x", mutable v_i_proj[i][0]) .attr("y", mutable v_i_proj[i][1]) .attr("dx",-5) .attr("dy", (mutable v_i[i][1]-mutable v_i_proj[i][1])/2-20) //.text((mutable v_i_proj[i][0]).toFixed(1)+"; "+(mutable v_i_proj[i][1]).toFixed(1)); // Coordinates .text((mutable P_i[i]).toFixed(2)); } } return svg.node(); }33:[{"id":"cbbceaf60edbe66c35c37401922ab26e8d3a214ad6dae706a30cb3fd3735733adcd6780464e9ededee62a123da33ebc767bcdca75ae5701c92b3bce61bf7de35","href":"https://static.observableusercontent.com/files/cbbceaf60edbe66c35c37401922ab26e8d3a214ad6dae706a30cb3fd3735733adcd6780464e9ededee62a123da33ebc767bcdca75ae5701c92b3bce61bf7de35","name":"logarithmic_vs_linear_scale.png","type":"image/png","lastModified":1663703992521.517,"size":79644}] 2f:{"title":"Logarithmic and linear scale bars","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"

\n For demonstration purposes, a PNG image with two scale bars was intentionally tilted several degrees.\n

Drag any point on the graph
Change the input values

Select the scale type (logarithmic or linear)
Change values A and B

Finally, you can also modify the background image

","pinned":false,"hidden":false,"mode":"html"},{"id":1881,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"
\n

Scale bar

","pinned":false,"hidden":false,"mode":"html"},{"id":800,"value":"viewof scale_type = Inputs.select(['Logarithmic scale','Linear scale'], {value: 'Logarithmic scale', label: html`Scale type:`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"viewof value_A = Inputs.range([scale_type==\"Linear scale\"? -max_linear : 1/max_logarithmic, scale_type==\"Linear scale\"? max_linear : max_logarithmic], {value: 0.1, step: scale_type==\"Linear scale\"? 0.1 : 1/max_logarithmic, label: html`Value at point A:`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"viewof value_B = Inputs.range([scale_type==\"Linear scale\"? -max_linear : 1/max_logarithmic, scale_type==\"Linear scale\"? max_linear : max_logarithmic], {value: 100, step: scale_type==\"Linear scale\"? 1 : 1/max_logarithmic, label: html`Value at point B:`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"
\n

Background image

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

You can modify the size of the background image (i.e., pixel width), adapt its transparency, or load another image.

","pinned":false,"hidden":false,"mode":"html"},{"id":683,"value":"viewof img_file =Inputs.file()","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"viewof image_width = Inputs.range([600, 1500], {value: 1086, step: 1, label: \"Image width (pixels):\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"viewof opacity = Inputs.range([0, 1], {value: 0.6, step: 0.05, label: \"Image opacity:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"
\n

Calculation details

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

For the linear scale, to find the value P_i, we must solve an equation of the form:

","pinned":false,"hidden":false,"mode":"html"},{"id":979,"value":"tex`\n \\qquad P_{i\\textrm{, linear}} = f_1(x) = a_1 x + b_1,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"

where ${tex`a_1`} and ${tex`b_1`} are two variables that need to be determined from values A and B,\n
${tex`x`} is a parameter obtained from coordinates ⟨x_i',y_i'⟩,\n
${tex`f_1`} is a function specific to the linear scale we have defined.

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

The variables ${tex`a_1`} and ${tex`b_1`} are immediately found from the following equations:

","pinned":false,"hidden":false,"mode":"html"},{"id":1041,"value":"tex.block`\n \\begin{cases}\n\\begin{array}{ll}\n &f_1(0) = b_1 = A \\qquad \\qquad &\\textrm{A} \\to x = 0 \\\\\n &f_1(1) = a_1 + b_1 = B &\\textrm{B} \\to x = 1 \\\\\n\\end{array}\n\\end{cases} \\,.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"

Hence, for the linear scale,

","pinned":false,"hidden":false,"mode":"html"},{"id":1131,"value":"tex.block`\n b_1 = A \\,,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"tex.block`\n a_1 = B - A \\,.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"

As for the logarithmic scale, to find the value P_i, we must solve an equation of the form:

","pinned":false,"hidden":false,"mode":"html"},{"id":1018,"value":"tex`\n \\qquad P_{i\\textrm{, Log}} = f_2(x) = 10^{\\,a_2 x + b_2},\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"

where ${tex`a_2`} and ${tex`b_2`} are two variables that need to be determined from values A and B,\n
${tex`x`} is the same parameter as above,\n
${tex`f_2`} is a function specific to the logarithmic scale we have defined.

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

The variables ${tex`a_2`} and ${tex`b_2`} are immediately found from the following equations:

","pinned":false,"hidden":false,"mode":"html"},{"id":1107,"value":"tex.block`\n \\begin{cases}\n\\begin{array}{ll}\n &f_2(0) = 10^{\\,b_2} = A \\qquad \\qquad &\\textrm{A} \\to x = 0 \\\\\n &f_2(1) = 10^{\\,a_2 + b_2} = B &\\textrm{B} \\to x = 1 \\\\\n\\end{array}\n\\end{cases} \\,.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"

Hence, for the logarithmic scale,

","pinned":false,"hidden":false,"mode":"html"},{"id":1142,"value":"tex.block`\n b_2 = \\textrm{Log}_{10}(A) \\,,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"tex.block`\n a_2 = \\textrm{Log}_{10}(B) - \\textrm{Log}_{10}(A) \\,.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"

With the parameters chosen above (A=${value_A}, B=${value_B}), for the ${scale_type} we have:

","pinned":false,"hidden":false,"mode":"html"},{"id":1075,"value":"tex`\n \\qquad ${scale_type==\"Logarithmic scale\"? \"b_2 =\": \"b_1 =\"} ${scale_type==\"Logarithmic scale\"? Math.log10(value_A) : value_A} \\:,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"tex`\n \\qquad ${scale_type==\"Logarithmic scale\"? \"a_2 =\": \"a_1 =\"} ${scale_type==\"Logarithmic scale\"? Math.log10(value_B) - Math.log10(value_A) : value_B - value_A} \\:.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"

Finally, the parameter ${tex`x`} can be found through vectors manipulation:

","pinned":false,"hidden":false,"mode":"html"},{"id":1200,"value":"tex`\n x = \\Large{ \\frac{|\\vec{v_{i}'} - \\vec{v_{A}}|}{|\\vec{v_{B}}-\\vec{v_{A}}|} = \\frac{(\\vec{v_{i}'} - \\vec{v_{A}})\\cdot (\\vec{v_{B}}-\\vec{v_{A}})}{|\\vec{v_{B}}-\\vec{v_{A}}|^2} }\\:,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"tex`\n x = \\Large{ \\frac{(x'_{i}-x_{A})(x_{B}-x_{A}) + (y'_{i}-y_{A})(y_{B}-y_{A})}{(x_{B}-x_{A})^2 + (y_{B}-y_{A})^2} } \\:.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":148,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"max_linear = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"max_logarithmic = 1E3","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"mutable v_A = [56, 348];","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"mutable v_B = [994, 132];","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"mutable v_i = [[52,536],[364,395],[516.9,360],[644,329.49],[761.65,304.86],[1126.9,275.5]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"mutable v_i_proj = [[]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"mutable P_i = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":" mutable selected_scale_type = scale_type;","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":694,"value":"svg = d3.create(\"svg\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"{\n // We load an image file (sample file or uploaded image)\n // Sample image adapted from https://blog.datawrapper.de/weeklychart-logscale2/\n let image_load = img_file != null ? \n await img_file.url(img_file) \n : await FileAttachment(\"logarithmic_vs_linear_scale.png\").url(); \n\n svg.attr(\"id\", \"container\");\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":true,"hidden":false,"mode":"ojs"},{"id":21,"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":24,"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":48,"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":14,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}