{"id":1173,"date":"2025-09-04T18:21:35","date_gmt":"2025-09-04T11:21:35","guid":{"rendered":"https:\/\/people.usd.ac.id\/~ydkristanto\/?page_id=1173"},"modified":"2025-10-01T02:23:40","modified_gmt":"2025-09-30T19:23:40","slug":"graphs","status":"publish","type":"page","link":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/learning-resources\/graphs\/","title":{"rendered":"Graphs: What They&#8217;re Made of and How They&#8217;re Made"},"content":{"rendered":"\n<div class=\"wp-block-buttons is-content-justification-right\">\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/media-pengajaran\/grafik\/\">ID<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-drop-cap\">Ever poured water into a bottle and suddenly it overflowed before you even noticed? Maybe you were daydreaming, or maybe your bottle has the shape shown in the interactive tool here. Why does that happen? Let&#8217;s investigate with the &#8220;Bottle Problem&#8221; interactive below!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>This learning resource illustrates how graphs emerge from covarying quantities. One calculator shows how changing the volume of water in a bottle affects its height. The second calculator reveals how these quantities correspond on the <em>x<\/em>&#8211; and <em>y<\/em>-axes, first as segments, then as a point, and finally as a trace that forms the graph of volume versus height. In this way, the resource highlights both <em>what a graph is made of<\/em> (a trace of points) and <em>how it is made<\/em> (through covariation).<\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-gray-background-color has-background\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"has-text-align-center\">Bottle Problem<\/h3>\n\n\n\n<p class=\"has-text-align-center\">Adjust the slider, reveal the segments and point, record the point&#8217;s traces, and watch how the graph takes shape.<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<div id=\"calculator1\" class=\"aligncenter size-full\" style=\"width: 480px; height: 480px;\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div id=\"calculator2\" class=\"aligncenter size-full\" style=\"width: 480px; height: 480px;\"><\/div>\n\n<script>\n  var calculator1 = Desmos.GraphingCalculator(document.getElementById('calculator1'), {\n    expressions: false,\n    settingsMenu: false,\n\ttrace: false\n  });\n  var calculator2 = Desmos.GraphingCalculator(document.getElementById('calculator2'), {\n    expressions: false,\n    settingsMenu: false,\n    trace: false\n  });\n\n  var state1 = {\n    \"version\": 11,\n    \"randomSeed\": \"7528e6b7f57cd0fb0730d506cfd69ec7\",\n    \"graph\": {\n        \"viewport\": {\n            \"xmin\": -5,\n            \"ymin\": -4.3594281745679915,\n            \"xmax\": 5,\n            \"ymax\": 10.622054437194162\n        },\n        \"showGrid\": false,\n        \"showXAxis\": false,\n        \"showYAxis\": false,\n        \"yAxisStep\": 1,\n        \"userLockedViewport\": true,\n        \"__v12ViewportLatexStash\": {\n            \"xmin\": \"-5\",\n            \"xmax\": \"5\",\n            \"ymin\": \"-4.3594281745679915\",\n            \"ymax\": \"10.622054437194162\"\n        }\n    },\n    \"expressions\": {\n        \"list\": [\n            {\n                \"type\": \"text\",\n                \"id\": \"53\",\n                \"text\": \"Slider\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"24\",\n                \"color\": \"#388c46\",\n                \"latex\": \"x_{0}=0\",\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"loopMode\": \"PLAY_ONCE\",\n                    \"min\": \"0\",\n                    \"max\": \"11.1\"\n                }\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"55\",\n                \"text\": \"Ketinggian\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"50\",\n                \"color\": \"#c74440\",\n                \"latex\": \"h_{0}=T\\\\left(2x_{0}\\\\right)\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"57\",\n                \"text\": \"Volume\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"51\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"V_{0}=\\\\left\\\\{0<x_{0}\\\\le11.1:2x_{0},x_{0}>11.1:22.2,0\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"5\",\n                \"title\": \"Air\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"11\",\n                \"folderId\": \"5\",\n                \"text\": \"Fungsi volume terhadap ketinggian\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"6\",\n                \"folderId\": \"5\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"V\\\\left(x\\\\right)=\\\\frac{\\\\pi}{96}(2(54x+24\\\\sin(x)+\\\\pi)-3\\\\sqrt{3}\\\\cos(2x)-6(\\\\sin(x)+8\\\\sqrt{3})\\\\cos(x))-\\\\frac{\\\\pi}{96}(2\\\\pi-51\\\\sqrt{3})\",\n                \"hidden\": true\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"22\",\n                \"folderId\": \"5\",\n                \"text\": \"Fungsi ketinggian terhadap volume\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"23\",\n                \"folderId\": \"5\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"T\\\\left(x\\\\right)=\\\\left\\\\{0\\\\le x<6.6:\\\\frac{-1.35962+\\\\sqrt{1.84855+0.298589x}}{0.567276},6.6\\\\le x<17.7:\\\\frac{8.57777+\\\\sqrt[3]{-499.506+28.0481x}}{1.69637},17.7\\\\le x<22.2:\\\\frac{0.731104+\\\\sqrt[4]{-8.51222+0.487366x}}{0.312581},x\\\\ge22.2:2\\\\pi\\\\right\\\\}\",\n                \"hidden\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"26\",\n                \"folderId\": \"5\",\n                \"color\": \"#000000\",\n                \"latex\": \"y=T\\\\left(2x_{0}\\\\right)\\\\left\\\\{f_{1}\\\\left(T\\\\left(2x_{0}\\\\right)\\\\right)\\\\le x\\\\le f_{2}\\\\left(T\\\\left(2x_{0}\\\\right)\\\\right)\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"31\",\n                \"folderId\": \"5\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"f_{1}\\\\left(y\\\\right)\\\\le x\\\\le f_{2}\\\\left(y\\\\right)\\\\left\\\\{0<y<T\\\\left(2x_{0}\\\\right)\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"w_{air}\",\n                \"fillOpacity\": \"1\",\n                \"lineOpacity\": \"0\",\n                \"lineWidth\": \"0\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"35\",\n                \"folderId\": \"5\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\frac{x^{2}}{\\\\left(f_{2}\\\\left(T\\\\left(2x_{0}\\\\right)\\\\right)\\\\right)^{2}}+\\\\frac{\\\\left(y-T\\\\left(2x_{0}\\\\right)\\\\right)^{2}}{\\\\left(\\\\frac{f_{2}\\\\left(T\\\\left(2x_{0}\\\\right)\\\\right)}{5}\\\\right)^{2}}\\\\le1\",\n                \"lines\": false,\n                \"colorLatex\": \"w_{air}\",\n                \"fillOpacity\": \"1\",\n                \"lineWidth\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"37\",\n                \"folderId\": \"5\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\frac{x^{2}}{\\\\left(\\\\frac{5}{4}\\\\right)^{2}}+\\\\frac{y^{2}}{\\\\left(\\\\frac{5}{20}\\\\right)^{2}}\\\\le1\\\\left\\\\{x_{0}>0\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"w_{air}\",\n                \"fillOpacity\": \"1\",\n                \"lineWidth\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"36\",\n                \"folderId\": \"5\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\frac{x^{2}}{\\\\left(f_{2}\\\\left(T\\\\left(2x_{0}\\\\right)\\\\right)\\\\right)^{2}}+\\\\frac{\\\\left(y-T\\\\left(2x_{0}\\\\right)\\\\right)^{2}}{\\\\left(\\\\frac{f_{2}\\\\left(T\\\\left(2x_{0}\\\\right)\\\\right)}{5}\\\\right)^{2}}=1\",\n                \"lineWidth\": \"1\"\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"2\",\n                \"title\": \"Botol\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"18\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\frac{x^{2}}{\\\\left(1.25\\\\right)^{2}}+\\\\frac{y^{2}}{\\\\left(0.25\\\\right)^{2}}=1\\\\left\\\\{y<0\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"19\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\frac{x^{2}}{\\\\left(1.25\\\\right)^{2}}+\\\\frac{y^{2}}{\\\\left(0.25\\\\right)^{2}}=1\\\\left\\\\{y>0\\\\right\\\\}\",\n                \"lineStyle\": \"DASHED\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"20\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\frac{x^{2}}{\\\\left(1.25\\\\right)^{2}}+\\\\frac{\\\\left(y-2\\\\pi\\\\right)^{2}}{\\\\left(0.25\\\\right)^{2}}=1\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"30\",\n                \"folderId\": \"2\",\n                \"text\": \"Bingkai kiri dan kanan\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"28\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"f_{1}\\\\left(y\\\\right)=-\\\\frac{1}{2}\\\\cos\\\\left(y-\\\\frac{\\\\pi}{3}\\\\right)-1\\\\left\\\\{0\\\\le y\\\\le2\\\\pi\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"27\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"f_{2}\\\\left(y\\\\right)=\\\\frac{1}{2}\\\\cos\\\\left(y-\\\\frac{\\\\pi}{3}\\\\right)+1\\\\left\\\\{0\\\\le y\\\\le2\\\\pi\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"39\",\n                \"title\": \"Kontrol\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"40\",\n                \"folderId\": \"39\",\n                \"color\": \"#000000\",\n                \"latex\": \"y=-1\\\\left\\\\{-3\\\\le x\\\\le3\\\\right\\\\}\",\n                \"lineOpacity\": \"0.1\",\n                \"lineWidth\": \"10\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"49\",\n                \"folderId\": \"39\",\n                \"color\": \"#c74440\",\n                \"latex\": \"y=-1\\\\left\\\\{-3\\\\le x\\\\le\\\\frac{6}{11.1}x_{0}-3\\\\right\\\\}\",\n                \"lineOpacity\": \"0.5\",\n                \"lineWidth\": \"10\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"41\",\n                \"folderId\": \"39\",\n                \"color\": \"#c74440\",\n                \"latex\": \"\\\\left(\\\\frac{6}{11.1}x_{0}-3,-1\\\\right)\",\n                \"pointOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"58\",\n                \"folderId\": \"39\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(0,-1.5\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Volume\",\n                \"hidden\": true\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"33\",\n                \"title\": \"Palet warna\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"34\",\n                \"folderId\": \"33\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"w_{air}=\\\\operatorname{rgb}\\\\left(131,215,238\\\\right)\"\n            }\n        ]\n    },\n    \"includeFunctionParametersInRandomSeed\": true,\n    \"doNotMigrateMovablePointStyle\": true\n};\n\n  var state2 = {\n    \"version\": 11,\n    \"graph\": {\n        \"viewport\": {\n            \"xmin\": -5,\n            \"ymin\": -1.9,\n            \"xmax\": 22.2,\n            \"ymax\": 8.2\n        },\n        \"showGrid\": false,\n        \"xAxisStep\": 2,\n        \"yAxisStep\": 1,\n        \"xAxisArrowMode\": \"BOTH\",\n        \"yAxisArrowMode\": \"BOTH\",\n        \"xAxisLabel\": \"Volume\",\n        \"yAxisLabel\": \"Height\",\n        \"xAxisNumbers\": false,\n        \"yAxisNumbers\": false,\n        \"polarNumbers\": false,\n        \"userLockedViewport\": true,\n        \"squareAxes\": false,\n        \"__v12ViewportLatexStash\": {\n            \"xmin\": \"-5\",\n            \"xmax\": \"22.2\",\n            \"ymin\": \"-1.9\",\n            \"ymax\": \"8.2\"\n        }\n    },\n    \"expressions\": {\n        \"list\": [\n            {\n                \"type\": \"expression\",\n                \"id\": \"1\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(-0.1,-0.1\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"`O`\",\n                \"hidden\": true,\n                \"labelOrientation\": \"below_left\"\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"2\",\n                \"title\": \"Model\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"16\",\n                \"folderId\": \"2\",\n                \"color\": \"#c74440\",\n                \"latex\": \"T\\\\left(x\\\\right)=\\\\left\\\\{0\\\\le x<6.6:\\\\frac{-1.35962+\\\\sqrt{1.84855+0.298589x}}{0.567276},6.6\\\\le x<17.7:\\\\frac{8.57777+\\\\sqrt[3]{-499.506+28.0481x}}{1.69637},17.7\\\\le x\\\\le22.2:\\\\frac{0.731104+\\\\sqrt[4]{-8.51222+0.487366x}}{0.312581}\\\\right\\\\}\",\n                \"hidden\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"14\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"y=h_{0}\\\\left\\\\{0<x<V_{0}\\\\right\\\\}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lineStyle\": \"DASHED\",\n                \"lineOpacity\": \"0.5\",\n                \"lineWidth\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"15\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"x=V_{0}\\\\left\\\\{0<y<h_{0}\\\\right\\\\}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lineStyle\": \"DASHED\",\n                \"lineOpacity\": \"0.5\",\n                \"lineWidth\": \"1\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"7\",\n                \"folderId\": \"2\",\n                \"text\": \"Volume (sumbu-x)\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"4\",\n                \"folderId\": \"2\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"V_{0}=1\",\n                \"hidden\": true,\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"min\": \"0\",\n                    \"max\": \"22.2\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"3\",\n                \"folderId\": \"2\",\n                \"color\": \"#c74440\",\n                \"latex\": \"y=0\\\\left\\\\{0\\\\le x\\\\le V_{0}\\\\right\\\\}\\\\left\\\\{l_{ayar}\\\\ge2\\\\right\\\\}\",\n                \"lineOpacity\": \".5\",\n                \"lineWidth\": \"8\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"5\",\n                \"folderId\": \"2\",\n                \"color\": \"#c74440\",\n                \"latex\": \"\\\\left(V_{0},0\\\\left\\\\{l_{ayar}\\\\ge2\\\\right\\\\}\\\\right)\",\n                \"dragMode\": \"NONE\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"9\",\n                \"folderId\": \"2\",\n                \"text\": \"Ketinggian (sumbu-y)\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"10\",\n                \"folderId\": \"2\",\n                \"color\": \"#c74440\",\n                \"latex\": \"h_{0}=T\\\\left(V_{0}\\\\right)\",\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"min\": \"0\",\n                    \"max\": \"2\\\\pi\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"11\",\n                \"folderId\": \"2\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"x=0\\\\left\\\\{0\\\\le y\\\\le h_{0}\\\\right\\\\}\\\\left\\\\{l_{ayar}\\\\ge2\\\\right\\\\}\",\n                \"lineOpacity\": \".5\",\n                \"lineWidth\": \"8\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"12\",\n                \"folderId\": \"2\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"\\\\left(0,h_{0}\\\\left\\\\{l_{ayar}\\\\ge2\\\\right\\\\}\\\\right)\",\n                \"dragMode\": \"NONE\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"26\",\n                \"folderId\": \"2\",\n                \"text\": \"Jejak titik:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"27\",\n                \"folderId\": \"2\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"h_{apus}=A_{daftar}\\\\to\\\\left[\\\\left(0,0\\\\right)\\\\right]\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"28\",\n                \"folderId\": \"2\",\n                \"color\": \"#388c46\",\n                \"latex\": \"A_{daftar}=\\\\left[\\\\left(0,0\\\\right)\\\\right]\",\n                \"hidden\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"29\",\n                \"folderId\": \"2\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"i_{nList}\\\\left(L_{ist},P\\\\right)=\\\\left\\\\{\\\\operatorname{total}\\\\left(\\\\sum_{n=\\\\left[1...\\\\operatorname{length}\\\\left(L_{ist}\\\\right)\\\\right]}^{\\\\left[1...\\\\operatorname{length}\\\\left(L_{ist}\\\\right)\\\\right]}\\\\left\\\\{P.x=L_{ist}\\\\left[n\\\\right].x:\\\\left\\\\{P.y=L_{ist}\\\\left[n\\\\right].y:1,0\\\\right\\\\},0\\\\right\\\\}\\\\right)\\\\ge1:1,0\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"30\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"t_{ambah}=\\\\left\\\\{i_{nList}\\\\left(A_{daftar},A\\\\right)=0:A_{daftar}\\\\to\\\\operatorname{join}\\\\left(A_{daftar},A\\\\right)\\\\right\\\\}\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"31\",\n                \"folderId\": \"2\",\n                \"color\": \"#c74440\",\n                \"latex\": \"A_{tampil}=A_{daftar}\\\\left[2...\\\\operatorname{length}\\\\left(A_{daftar}\\\\right)\\\\right]\\\\left\\\\{\\\\operatorname{length}\\\\left(A_{daftar}\\\\right)>1\\\\right\\\\}\",\n                \"pointSize\": \"10\",\n                \"movablePointSize\": \"10\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"18\",\n                \"folderId\": \"2\",\n                \"text\": \"Grafik:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"19\",\n                \"folderId\": \"2\",\n                \"color\": \"#000000\",\n                \"latex\": \"y=T\\\\left(x\\\\right)\",\n                \"hidden\": true,\n                \"lineWidth\": \"4\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"13\",\n                \"folderId\": \"2\",\n                \"color\": \"#c74440\",\n                \"latex\": \"A=\\\\left(V_{0},h_{0}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\\\\right)\",\n                \"dragMode\": \"NONE\",\n                \"pointOutline\": true,\n                \"pointOpacity\": \"1\",\n                \"pointSize\": \"11\",\n                \"movablePointSize\": \"11\"\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"21\",\n                \"title\": \"Tombol\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"23\",\n                \"folderId\": \"21\",\n                \"text\": \"Kontrol:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"24\",\n                \"folderId\": \"21\",\n                \"color\": \"#388c46\",\n                \"latex\": \"l_{ayar}=1\",\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"min\": \"1\",\n                    \"max\": \"5\",\n                    \"step\": \"1\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"32\",\n                \"folderId\": \"21\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"r_{ekam}=0\",\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"min\": \"0\",\n                    \"max\": \"1\",\n                    \"step\": \"1\"\n                }\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"38\",\n                \"folderId\": \"21\",\n                \"text\": \"Titik acuan:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"39\",\n                \"folderId\": \"21\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"C=\\\\left(21.5,8\\\\right)\",\n                \"hidden\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"40\",\n                \"folderId\": \"21\",\n                \"color\": \"#c74440\",\n                \"latex\": \"l=0.8\",\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"min\": \"0\",\n                    \"max\": \"2\",\n                    \"step\": \"0.1\"\n                }\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"48\",\n                \"folderId\": \"21\",\n                \"text\": \"LAYAR 1\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"34\",\n                \"folderId\": \"21\",\n                \"text\": \"Tampilkan ruas garis:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"41\",\n                \"folderId\": \"21\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"p_{1}=10.5\",\n                \"slider\": {\n                    \"hardMin\": true,\n                    \"hardMax\": true,\n                    \"min\": \"0\",\n                    \"max\": \"15\",\n                    \"step\": \"0.1\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"35\",\n                \"folderId\": \"21\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(C,\\\\left(C.x-p_{1},C.y\\\\right),\\\\left(C.x-p_{1},C.y-l\\\\right),\\\\left(C.x,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=1\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"p_{utih}\",\n                \"fillOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"45\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(C,\\\\left(C.x-p_{1},C.y\\\\right),\\\\left(C.x-p_{1},C.y-l\\\\right),\\\\left(C.x,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=1\\\\right\\\\}\",\n                \"lines\": true,\n                \"fillOpacity\": \"0\",\n                \"lineWidth\": \"1.5\",\n                \"clickableInfo\": {\n                    \"enabled\": true,\n                    \"latex\": \"l_{ayar}\\\\to l_{ayar}+1\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"46\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x+C.x-p_{1}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=1\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Show segments\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"50\",\n                \"folderId\": \"21\",\n                \"text\": \"LAYAR 2\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"52\",\n                \"folderId\": \"21\",\n                \"text\": \"Tampilkan titik:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"54\",\n                \"folderId\": \"21\",\n                \"color\": \"#c74440\",\n                \"latex\": \"p_{2}=8\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"53\",\n                \"folderId\": \"21\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(C,\\\\left(C.x-p_{2},C.y\\\\right),\\\\left(C.x-p_{2},C.y-l\\\\right),\\\\left(C.x,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=2\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"p_{utih}\",\n                \"fillOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"55\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(C,\\\\left(C.x-p_{2},C.y\\\\right),\\\\left(C.x-p_{2},C.y-l\\\\right),\\\\left(C.x,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=2\\\\right\\\\}\",\n                \"lines\": true,\n                \"fillOpacity\": \"0\",\n                \"lineWidth\": \"1.5\",\n                \"clickableInfo\": {\n                    \"enabled\": true,\n                    \"latex\": \"l_{ayar}\\\\to l_{ayar}+1\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"56\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x+C.x-p_{2}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=2\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Show point\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"58\",\n                \"folderId\": \"21\",\n                \"text\": \"Sembunyikan ruas garis:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"59\",\n                \"folderId\": \"21\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"p_{3}=10.5\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"60\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(\\\\left(C.x-p_{2}-.5,C.y\\\\right),\\\\left(C.x-p_{2}-.5-p_{3},C.y\\\\right),\\\\left(C.x-p_{2}-.5-p_{3},C.y-l\\\\right),\\\\left(C.x-p_{2}-.5,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=2\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"p_{utih}\",\n                \"fillOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"61\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(\\\\left(C.x-p_{2}-.5,C.y\\\\right),\\\\left(C.x-p_{2}-.5-p_{3},C.y\\\\right),\\\\left(C.x-p_{2}-.5-p_{3},C.y-l\\\\right),\\\\left(C.x-p_{2}-.5,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=2\\\\right\\\\}\",\n                \"lines\": true,\n                \"fillOpacity\": \"0\",\n                \"lineWidth\": \"1.5\",\n                \"clickableInfo\": {\n                    \"enabled\": true,\n                    \"latex\": \"l_{ayar}\\\\to l_{ayar}-1\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"62\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x-p_{2}-.5+C.x-p_{2}-.5-p_{3}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=2\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Hide segments\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"64\",\n                \"folderId\": \"21\",\n                \"text\": \"LAYAR 3\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"66\",\n                \"folderId\": \"21\",\n                \"text\": \"Rekam jejak\/berhenti rekam:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"67\",\n                \"folderId\": \"21\",\n                \"color\": \"#c74440\",\n                \"latex\": \"p_{4}=8\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"68\",\n                \"folderId\": \"21\",\n                \"color\": \"#2d70b3\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(C,\\\\left(C.x-p_{4},C.y\\\\right),\\\\left(C.x-p_{4},C.y-l\\\\right),\\\\left(C.x,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"p_{utih}\",\n                \"fillOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"69\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(C,\\\\left(C.x-p_{4},C.y\\\\right),\\\\left(C.x-p_{4},C.y-l\\\\right),\\\\left(C.x,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lines\": true,\n                \"fillOpacity\": \"0\",\n                \"lineWidth\": \"1.5\",\n                \"clickableInfo\": {\n                    \"enabled\": true,\n                    \"latex\": \"r_{ekam}\\\\to1-r_{ekam}\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"70\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x+C.x-p_{4}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\\\\left\\\\{r_{ekam}=0\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Record trace\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"71\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x+C.x-p_{4}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\\\\left\\\\{r_{ekam}=1\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Stop recording\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"73\",\n                \"folderId\": \"21\",\n                \"text\": \"Hapus:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"74\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"p_{5}=4\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"75\",\n                \"folderId\": \"21\",\n                \"color\": \"#c74440\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(\\\\left(C.x-p_{4}-.5,C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5},C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5},C.y-l\\\\right),\\\\left(C.x-p_{4}-.5,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"p_{utih}\",\n                \"fillOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"76\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(\\\\left(C.x-p_{4}-.5,C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5},C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5},C.y-l\\\\right),\\\\left(C.x-p_{4}-.5,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lines\": true,\n                \"fillOpacity\": \"0\",\n                \"lineWidth\": \"1.5\",\n                \"clickableInfo\": {\n                    \"enabled\": true,\n                    \"latex\": \"h_{apus},r_{ekam}\\\\to0\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"77\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x-p_{4}-.5+C.x-p_{4}-.5-p_{5}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Clear\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"text\",\n                \"id\": \"79\",\n                \"folderId\": \"21\",\n                \"text\": \"Sembunyikan titik:\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"80\",\n                \"folderId\": \"21\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"p_{6}=8\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"81\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(\\\\left(C.x-p_{4}-.5-p_{5}-.5,C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5}-.5-p_{6},C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5}-.5-p_{6},C.y-l\\\\right),\\\\left(C.x-p_{4}-.5-p_{5}-.5,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lines\": false,\n                \"colorLatex\": \"p_{utih}\",\n                \"fillOpacity\": \"1\"\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"82\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\operatorname{polygon}\\\\left(\\\\left(C.x-p_{4}-.5-p_{5}-.5,C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5}-.5-p_{6},C.y\\\\right),\\\\left(C.x-p_{4}-.5-p_{5}-.5-p_{6},C.y-l\\\\right),\\\\left(C.x-p_{4}-.5-p_{5}-.5,C.y-l\\\\right)\\\\right)\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\",\n                \"lines\": true,\n                \"fillOpacity\": \"0\",\n                \"lineWidth\": \"1.5\",\n                \"clickableInfo\": {\n                    \"enabled\": true,\n                    \"latex\": \"l_{ayar}\\\\to2,r_{ekam}\\\\to0\"\n                }\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"83\",\n                \"folderId\": \"21\",\n                \"color\": \"#000000\",\n                \"latex\": \"\\\\left(\\\\frac{C.x-p_{4}-.5-p_{5}-.5+C.x-p_{4}-.5-p_{5}-.5-p_{6}}{2},\\\\frac{C.y+C.y-l}{2}\\\\left\\\\{l_{ayar}=3\\\\right\\\\}\\\\right)\",\n                \"showLabel\": true,\n                \"label\": \"Hide point\",\n                \"hidden\": true,\n                \"labelSize\": \".9\",\n                \"pointOpacity\": \".8\"\n            },\n            {\n                \"type\": \"folder\",\n                \"id\": \"43\",\n                \"title\": \"Warna\",\n                \"collapsed\": true\n            },\n            {\n                \"type\": \"expression\",\n                \"id\": \"44\",\n                \"folderId\": \"43\",\n                \"color\": \"#6042a6\",\n                \"latex\": \"p_{utih}=\\\\operatorname{rgb}\\\\left(255,255,255\\\\right)\"\n            }\n        ],\n        \"ticker\": {\n            \"handlerLatex\": \"\\\\left\\\\{r_{ekam}=1:t_{ambah}\\\\right\\\\}\",\n            \"playing\": true,\n            \"open\": true\n        }\n    },\n    \"includeFunctionParametersInRandomSeed\": true,\n    \"doNotMigrateMovablePointStyle\": true\n};\n\n  calculator1.setState(state1);\n  calculator2.setState(state2);\n\n  \/\/ Source\n  var V0Helper = calculator1.HelperExpression({ latex: 'V_{0}' });\n\n  \/\/ Sink\n  V0Helper.observe('numericValue', function() {\n    var value = V0Helper.numericValue;\n    if (!isNaN(value)) {\n      calculator2.setExpression({ id: '4', latex: `V_{0}=${value}` });\n    }\n  });\n\n<\/script>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p>Use the following questions or instructions to make the most of the interactive tool above:<\/p>\n\n\n\n<ul><li>Slide the volume slider left and right. What happens? Does every constant change in water volume result in a constant rate of change in water height? When is the rate of change in height the fastest? When is it the slowest?<\/li><li>Click &#8220;Show segments&#8221; and move the volume slider again. What do the lengths of the red and blue segments on the <em>x<\/em>&#8211; and <em>y<\/em>-axes represent?<\/li><li>Click &#8220;Show point&#8221; and move the volume slider. What does the point represent? What limits its movement?<\/li><li>Record the point&#8217;s trace by clicking \u201cRecord trace,\u201d then move the volume slider. What do the traces represent? What do you get if all possible traces of the point are recorded?<\/li><\/ul>\n\n\n\n<p>Happy exploring!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-group is-style-twentytwentyone-border\"><div class=\"wp-block-group__inner-container\">\n<div class=\"related-topics\">\n  <h3>Explore related topics<\/h3>\n  <p>Discover more contents with related topics in this website.<\/p>\n  <ul class=\"topics-list\">\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Mathematics\">Mathematics<\/a><\/li>\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Algebra\">Algebra<\/a><\/li>\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Graph\">Graph<\/a><\/li>\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Covariation\">Covariation<\/a><\/li>\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Covariational+Reasoning\">Covariational Reasoning<\/a><\/li>\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Cartesian+Coordinates\">Cartesian Coordinates<\/a><\/li>\n    <li><a href=\"https:\/\/people.usd.ac.id\/~ydkristanto\/?s=Interactive+Learning+Resource\">Interactive Learning Resource<\/a><\/li>\n  <\/ul>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>An interactive resource showing how graphs emerge from covarying quantities: the changing volume and height of water in a bottle.<\/p>\n","protected":false},"author":1,"featured_media":1181,"parent":1140,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","spay_email":""},"jetpack_shortlink":"https:\/\/wp.me\/P93lma-iV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/pages\/1173"}],"collection":[{"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/comments?post=1173"}],"version-history":[{"count":6,"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/pages\/1173\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/pages\/1173\/revisions\/1355"}],"up":[{"embeddable":true,"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/pages\/1140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/media\/1181"}],"wp:attachment":[{"href":"https:\/\/people.usd.ac.id\/~ydkristanto\/index.php\/wp-json\/wp\/v2\/media?parent=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}