{"id":368,"date":"2023-05-01T15:38:46","date_gmt":"2023-05-01T14:38:46","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=368"},"modified":"2023-05-12T09:55:32","modified_gmt":"2023-05-12T08:55:32","slug":"3d-js-gauge-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/3d-js-gauge-example\/","title":{"rendered":"3D.js Gauge example"},"content":{"rendered":"\n<style>\nbody {\n\tfont-family:  Helvetica, Arial, sans-serif;\n\tmargin: 32px;\n}\n\n#power-gauge g.arc {\n\tfill: steelblue;\n}\n\n#power-gauge g.pointer {\n\tfill: blue;\n\tstroke: navy;\n}\n\n#power-gauge g.label text {\n\ttext-anchor: middle;\n\tfont-size: 14px;\n\tfont-weight: bold;\n\tfill: #666;\n}\n<\/style>\n<div id=\"power-gauge\"><\/div>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"html\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">&lt;style>\nbody {\n\tfont-family:  Helvetica, Arial, sans-serif;\n\tmargin: 32px;\n}\n\n#power-gauge g.arc {\n\tfill: steelblue;\n}\n\n#power-gauge g.pointer {\n\tfill: blue;\n\tstroke: navy;\n}\n\n#power-gauge g.label text {\n\ttext-anchor: middle;\n\tfont-size: 14px;\n\tfont-weight: bold;\n\tfill: #666;\n}\n&lt;\/style>\n&lt;div id=\"power-gauge\">&lt;\/div>\n\n&lt;script>\nvar gauge = function(container, configuration) {\n\tvar that = {};\n\tvar config = {\n\t\tsize\t\t\t\t\t\t: 200,\n\t\tclipWidth\t\t\t\t\t: 200,\n\t\tclipHeight\t\t\t\t\t: 110,\n\t\tringInset\t\t\t\t\t: 20,\n\t\tringWidth\t\t\t\t\t: 20,\n\t\t\n\t\tpointerWidth\t\t\t\t: 20,\n\t\tpointerTailLength\t\t\t: 10,\n\t\tpointerHeadLengthPercent\t: 0.8,\n\t\t\n\t\tminValue\t\t\t\t\t: 0,\n\t\tmaxValue\t\t\t\t\t: 10,\n\t\t\n\t\tminAngle\t\t\t\t\t: -160,\n\t\tmaxAngle\t\t\t\t\t: 160,\n\t\t\n\t\ttransitionMs\t\t\t\t: 400,\n\t\t\n\t\tmajorTicks\t\t\t\t\t: 20,\n\t\tlabelFormat\t\t\t\t\t: d3.format(',g'),\n\t\tlabelInset\t\t\t\t\t: 10,\n\t\t\n\t\tarcColorFn\t\t\t\t\t: d3.interpolateHsl(d3.rgb('#3e6c0a'), d3.rgb('#ff0000'))\n\t};\n\tvar range = undefined;\n\tvar r = undefined;\n\tvar pointerHeadLength = undefined;\n\tvar value = 0;\n\t\n\tvar svg = undefined;\n\tvar arc = undefined;\n\tvar scale = undefined;\n\tvar ticks = undefined;\n\tvar tickData = undefined;\n\tvar pointer = undefined;\n\n\tvar donut = d3.layout.pie();\n\t\n\tfunction deg2rad(deg) {\n\t\treturn deg * Math.PI \/ 180;\n\t}\n\t\n\tfunction newAngle(d) {\n\t\tvar ratio = scale(d);\n\t\tvar newAngle = config.minAngle + (ratio * range);\n\t\treturn newAngle;\n\t}\n\t\n\tfunction configure(configuration) {\n\t\tvar prop = undefined;\n\t\tfor ( prop in configuration ) {\n\t\t\tconfig[prop] = configuration[prop];\n\t\t}\n\t\t\n\t\trange = config.maxAngle - config.minAngle;\n\t\tr = config.size \/ 2;\n\t\tpointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);\n\n\t\t\/\/ a linear scale that maps domain values to a percent from 0..1\n\t\tscale = d3.scale.linear()\n\t\t\t.range([0,1])\n\t\t\t.domain([config.minValue, config.maxValue]);\n\t\t\t\n\t\tticks = scale.ticks(config.majorTicks);\n\t\ttickData = d3.range(config.majorTicks).map(function() {return 1\/config.majorTicks;});\n\t\t\n\t\tarc = d3.svg.arc()\n\t\t\t.innerRadius(r - config.ringWidth - config.ringInset)\n\t\t\t.outerRadius(r - config.ringInset)\n\t\t\t.startAngle(function(d, i) {\n\t\t\t\tvar ratio = d * i;\n\t\t\t\treturn deg2rad(config.minAngle + (ratio * range));\n\t\t\t})\n\t\t\t.endAngle(function(d, i) {\n\t\t\t\tvar ratio = d * (i+1);\n\t\t\t\treturn deg2rad(config.minAngle + (ratio * range));\n\t\t\t});\n\t}\n\tthat.configure = configure;\n\t\n\tfunction centerTranslation() {\n\t\treturn 'translate('+r +','+ r +')';\n\t}\n\t\n\tfunction isRendered() {\n\t\treturn (svg !== undefined);\n\t}\n\tthat.isRendered = isRendered;\n\t\n\tfunction render(newValue) {\n\t\tsvg = d3.select(container)\n\t\t\t.append('svg:svg')\n\t\t\t\t.attr('class', 'gauge')\n\t\t\t\t.attr('width', config.clipWidth)\n\t\t\t\t.attr('height', config.clipHeight);\n\t\t\n\t\tvar centerTx = centerTranslation();\n\t\t\n\t\tvar arcs = svg.append('g')\n\t\t\t\t.attr('class', 'arc')\n\t\t\t\t.attr('transform', centerTx);\n\t\t\n\t\tarcs.selectAll('path')\n\t\t\t\t.data(tickData)\n\t\t\t.enter().append('path')\n\t\t\t\t.attr('fill', function(d, i) {\n\t\t\t\t\treturn config.arcColorFn(d * i);\n\t\t\t\t})\n\t\t\t\t.attr('d', arc);\n\t\t\n\t\tvar lg = svg.append('g')\n\t\t\t\t.attr('class', 'label')\n\t\t\t\t.attr('transform', centerTx);\n\t\tlg.selectAll('text')\n\t\t\t\t.data(ticks)\n\t\t\t.enter().append('text')\n\t\t\t\t.attr('transform', function(d) {\n\t\t\t\t\tvar ratio = scale(d);\n\t\t\t\t\tvar newAngle = config.minAngle + (ratio * range);\n\t\t\t\t\treturn 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';\n\t\t\t\t})\n\t\t\t\t.text(config.labelFormat);\n\n\t\tvar lineData = [ [config.pointerWidth \/ 2, 0], \n\t\t\t\t\t\t[0, -pointerHeadLength],\n\t\t\t\t\t\t[-(config.pointerWidth \/ 2), 0],\n\t\t\t\t\t\t[0, config.pointerTailLength],\n\t\t\t\t\t\t[config.pointerWidth \/ 2, 0] ];\n\t\tvar pointerLine = d3.svg.line().interpolate('monotone');\n\t\tvar pg = svg.append('g').data([lineData])\n\t\t\t\t.attr('class', 'pointer')\n\t\t\t\t.attr('transform', centerTx);\n\t\t\t\t\n\t\tpointer = pg.append('path')\n\t\t\t.attr('d', pointerLine\/*function(d) { return pointerLine(d) +'Z';}*\/ )\n\t\t\t.attr('transform', 'rotate(' +config.minAngle +')');\n\t\t\t\n\t\tupdate(newValue === undefined ? 0 : newValue);\n\t}\n\tthat.render = render;\n\t\n\tfunction update(newValue, newConfiguration) {\n\t\tif ( newConfiguration  !== undefined) {\n\t\t\tconfigure(newConfiguration);\n\t\t}\n\t\tvar ratio = scale(newValue);\n\t\tvar newAngle = config.minAngle + (ratio * range);\n\t\tpointer.transition()\n\t\t\t.duration(config.transitionMs)\n\t\t\t.ease('elastic')\n\t\t\t.attr('transform', 'rotate(' +newAngle +')');\n\t}\n\tthat.update = update;\n\n\tconfigure(configuration);\n\t\n\treturn that;\n};\n\nfunction onDocumentReady() {\n\tvar powerGauge = gauge('#power-gauge', {\n\t\tsize: 300,\n\t\tclipWidth: 300,\n\t\tclipHeight: 300,\n\t\tringWidth: 60,\n\t\tmaxValue: 10,\n\t\ttransitionMs: 4000,\n\t});\n\tpowerGauge.render();\n\t\n\tfunction updateReadings() {\n\t\t\/\/ just pump in random data here...\n\t\tpowerGauge.update(Math.random() * 10);\n\t}\n\t\n\t\/\/ every few seconds update reading values\n\tupdateReadings();\n\tsetInterval(function() {\n\t\tupdateReadings();\n\t}, 5 * 1000);\n}\n\nif ( !window.isLoaded ) {\n\twindow.addEventListener(\"load\", function() {\n\t\tonDocumentReady();\n\t}, false);\n} else {\n\tonDocumentReady();\n}\n&lt;\/script><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-368","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=368"}],"version-history":[{"count":5,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":7757,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/368\/revisions\/7757"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}