25:["$","title",null,{"children":"D3 Speedometer Key Point Indicators | jack.lin | Observable"}] 49:T79a,body = html`

Products

${data.tagL}

${data.tagR}

${meterL}

${meterR}

`4a:Td50,meterL = { //Definition var theta = 1.5; var ring_angle = -134; var text_angle = 134; var radius = radiusL; var color = fillColorL; var textPosi = "0.20em"; var endPercent = valueL / 100; var twoPi = Math.PI * theta; var formatPercent = d3.format('.0%'); var boxSize = (radius + padding) * 2; var count = Math.abs((endPercent - startPercent) / 0.01); var step = endPercent < startPercent ? -0.01 : 0.01; var arc = d3.arc() .startAngle(0) .innerRadius(radius) .outerRadius(radius - border); //Creating SVG var svg = d3 .create('svg') .attr('width', boxSize) .attr('height', boxSize); var g = svg.append('g') .attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ') rotate(' + ring_angle + ')'); var meter = g.append('g') .attr('class', 'progress-meter') meter.append('path') .attr('class', 'background') .attr('fill', bgStroke) .attr('stroke', bgStroke) .attr('stroke-width', bgStrokeWidth) .attr('opacity', 0.4) .attr('d', arc.endAngle(twoPi)) var foreground = meter.append('path') .attr('class', 'foreground') .attr('fill', "none") .attr('fill-opacity', 1) .attr('stroke', color) .attr('stroke-width', frontStrokeWidth) .attr('stroke-opacity', 1) var front = meter.append('path') .attr('class', 'foreground') .attr('fill', color) .attr('fill-opacity', 1) var numberText = meter.append('text') .attr('fill', textColor) .attr('text-anchor', 'middle') .attr('dy', textPosi) .style("font-size", textSize) .attr('transform', 'rotate(' + text_angle + ')'); //Progress Animation function updateProgress(progress) { foreground.attr('d', arc.endAngle(twoPi * progress)); front.attr('d', arc.endAngle(twoPi * progress)); numberText.text(formatPercent(progress)); } var progress = startPercent; (function loops() { updateProgress(progress); if (count > 0) { count--; progress += step; setTimeout(loops, animationSpeed); } })(); return svg.node(); }4b:Td13,meterR = { var text_angle; var endPercent = valueR / data.denom; var radius = radiusR; var theta = 2; var ring_angle = text_angle = 180; var color = fillColorR; var textPosi = "0.43em"; var twoPi = Math.PI * theta; var formatPercent = d3.format('.0%'); var boxSize = (radius + padding) * 2; var count = Math.abs((endPercent - startPercent) / 0.01); var step = endPercent < startPercent ? -0.01 : 0.01; var arc = d3.arc() .startAngle(0) .innerRadius(radius) .outerRadius(radius - border); var svg = d3 .create('svg') .attr('width', boxSize) .attr('height', boxSize); var g = svg.append('g') .attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ') rotate(' + ring_angle + ')'); var meter = g.append('g') .attr('class', 'progress-meter') meter.append('path') .attr('class', 'background') .attr('fill', bgStroke) .attr('stroke', bgStroke) .attr('stroke-width', bgStrokeWidth) .attr('opacity', 0.4) .attr('d', arc.endAngle(twoPi)) var foreground = meter.append('path') .attr('class', 'foreground') .attr('fill', "none") .attr('fill-opacity', 1) .attr('stroke', color) .attr('stroke-width', frontStrokeWidth) .attr('stroke-opacity', 1) var front = meter.append('path') .attr('class', 'foreground') .attr('fill', color) .attr('fill-opacity', 1) var numberText = meter.append('text') .attr('fill', textColor) .attr('text-anchor', 'middle') .attr('dy', textPosi) .style("font-size", textSize) .attr('transform', 'rotate(' + text_angle + ')'); function updateProgress(progress) { foreground.attr('d', arc.endAngle(twoPi * progress)); front.attr('d', arc.endAngle(twoPi * progress)); numberText.text((((progress.toFixed(2)*100).toFixed(2)) / 100 * data.denom ).toFixed(0)+' / '+data.denom); } var progress = startPercent; (function loops() { updateProgress(progress); if (count > 0) { count--; progress += step; setTimeout(loops, animationSpeed); } })(); return svg.node(); }4c:[{"id":"2c1c00bb9a394fdbd3624bd3af2c09b0f45e2ae8de7793f362bd8efdc59e319065a75ec1b210b0d22428965dae4e3ee388d5ae20ade8ef21ee2d5e04569925bc","href":"https://static.observableusercontent.com/files/2c1c00bb9a394fdbd3624bd3af2c09b0f45e2ae8de7793f362bd8efdc59e319065a75ec1b210b0d22428965dae4e3ee388d5ae20ade8ef21ee2d5e04569925bc","name":"readme.doc","type":"application/x-msi","lastModified":1676083859245.703,"size":208896},{"id":"d87cb8002eb64625878211f50e5ec112f4bd966f2d05c32bb92b1eea8a612c25e3446a7358f8ce374a64a0ddf12690441131043fedb746cf821727ad8aaee9a1","href":"https://static.observableusercontent.com/files/d87cb8002eb64625878211f50e5ec112f4bd966f2d05c32bb92b1eea8a612c25e3446a7358f8ce374a64a0ddf12690441131043fedb746cf821727ad8aaee9a1","name":"style@2.css","type":"text/css","lastModified":1676083859245.703,"size":3623},{"id":"4ef1b233d2a72d5df642063f31f9e326db413c270214e083fa29e4c6dd800ce6fdc9fa902af1123fc3e78607b419dbdbb58c336222e855e13938cc7c7935c31f","href":"https://static.observableusercontent.com/files/4ef1b233d2a72d5df642063f31f9e326db413c270214e083fa29e4c6dd800ce6fdc9fa902af1123fc3e78607b419dbdbb58c336222e855e13938cc7c7935c31f","name":"config@3.js","type":"application/javascript","lastModified":1676083859245.703,"size":3647},{"id":"3592036d5a362448c28b81382788c75ffe19a4744c40acf72cea6db3d61c0987da97ab3f03f91d738f7d38caf65b630e729e2db3a290f47270894cb68f255fc8","href":"https://static.observableusercontent.com/files/3592036d5a362448c28b81382788c75ffe19a4744c40acf72cea6db3d61c0987da97ab3f03f91d738f7d38caf65b630e729e2db3a290f47270894cb68f255fc8","name":"kpi@4.js","type":"application/javascript","lastModified":1676083859245.703,"size":8169},{"id":"0aa0f01644dd41d9260a8a94cc36fe90a508a404bc8d377a65a8ec4823ac8c1288134396dc34e4a534c0ba5644aa68afef285a090cebc9557a92624ec5bd99ec","href":"https://static.observableusercontent.com/files/0aa0f01644dd41d9260a8a94cc36fe90a508a404bc8d377a65a8ec4823ac8c1288134396dc34e4a534c0ba5644aa68afef285a090cebc9557a92624ec5bd99ec","name":"index@4.html","type":"text/html","lastModified":1676083859245.703,"size":3999}] 29:{"id":"ff562ab10241a26f","slug":null,"title":"D3 Speedometer Key Point Indicators","thumbnail":"3d65a1668248e34acb1f9cd76a14dd64584d682bc94de2eff2736679f884e916","access_level":"public","create_time":"$D2023-02-11T02:50:59.245Z","update_time":"$D2023-02-11T02:50:59.245Z","view_time":null,"first_public_time":"$D2023-02-11T02:50:59.245Z","has_unpublished_edits":null,"fork":{"id":"49f3feb854a76e17","slug":"speedometer-key-point-indicators","title":"D3 Speedometer Key Point Indicators","owner":{"id":"e75b164d3a13ba75","login":"saranshbairagi","name":"Saransh Bairagi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8a8290605f602fe7","login":"wenwangzhishang","name":"jack.lin","avatar_url":"https://avatars-next.observableusercontent.com/8e9c373846455b6a4bc4099df39ba36b92c4b15928a09d0e9b5bf9ecbefc29de","tier":"starter_2024","bio":"https://home.cnblogs.com/u/jack-lin/","followed_by_you":false,"follows_you":false},"version":413,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"119f81bbadb54b37","login":"wenwangzhishang","name":"jack.lin","avatar_url":"https://avatars-next.observableusercontent.com/8e9c373846455b6a4bc4099df39ba36b92c4b15928a09d0e9b5bf9ecbefc29de","tier":null,"bio":"https://home.cnblogs.com/u/jack-lin/","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"119f81bbadb54b37","login":"wenwangzhishang","name":"jack.lin","avatar_url":"https://avatars-next.observableusercontent.com/8e9c373846455b6a4bc4099df39ba36b92c4b15928a09d0e9b5bf9ecbefc29de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Speedometer Key Point Indicators","cells":[{"id":0,"value":"md`# D3 Speedometer Key Point Indicators \n![Demo image](https://img.techpowerup.org/201004/demo.png)\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`#### KPI Cards with D3 meter gaudge for Dashboards!\nThese plug & play KPI Speedo Meters are the easiest way to visualize and demonstrate Key Performance Indicators of data. They are ready to use KPIs in Speedo Meter format written in [D3](https://https://d3js.org). These can be readily placed on your Dashboard web pages. Checkout the speedo meter KPI in action below and find its full package with implementation details in the attached files . \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`## Live KPI\n\\` Change values \\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`#### Left Meter's Value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof valueL = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`#### Right Meter's Value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"viewof valueR = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"data = ({head : 'Products', tagL : 'Risk :', tagR : 'Success :', denom : 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`## Parameters\n\\`These Values define the colors, spacing, font size, stroke size, animation speed & more\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"html`You can find these configurations in the file : config.js, attached with this notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"radiusL = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"radiusR = 47.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"border = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"padding = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"startPercent = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"fillColorL = \"#dfb04d\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"fillColorR = \"#3b9edf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"bgStrokeWidth = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"frontStrokeWidth = 2.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"bgStroke = \"#000\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"textColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"textSize = \"20px\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"animationSpeed = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`## Files\n\\`Complete package to plug the KPI anywhere.\\`\n\\`Download all the attached files & follow the instructions mentioned in file: readme.doc\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"html` Main Index File [HTML]\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"FileAttachment(\"index@4.html\") //Main Index File","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"html`Please verify if correct file names & paths are mentioned in the head tag of HTML file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"html` Main Script File [D3 & JS]\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"FileAttachment(\"kpi@4.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"html` Configuration File [JS]\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"FileAttachment(\"config@3.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"html` Style Sheet [CSS]\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"FileAttachment(\"style@2.css\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"html` Documentation/Instructions File [DOC]\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"FileAttachment(\"readme.doc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null