Modular Guage

Developer
Roy
Size
5,852 Kb
Views
10,120
  1. Modular Guage Previews
  2. Modular Guage HTML Codes
  3. Modular Guage CSS Codes
  4. Modular Guage JS Codes

How do I make an modular guage?

What is a modular guage? How do you make a modular guage? This script and codes were developed by Roy on 15 November 2022, Tuesday.

Modular Guage Previews
IQ Test

Modular Guage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modular Guage</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="outer">
<div id="chart"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 50">	<defs> <linearGradient x1="1" y1="1" x2="0" y2="0" id="gWrst">	<stop stop-color="#EC0E57" offset="0"/>	<stop stop-color="#F36F16" offset="1"/>	</linearGradient> <linearGradient x1="0" y1="1" x2="1" y2="0" id="gBad" >	<stop stop-color="#F36F16" offset="0"/>	<stop stop-color="#FBC307" offset="1"/>	</linearGradient> <linearGradient x1="0" y1="0" x2="1" y2="0" id="gAvg" >	<stop stop-color="#FBC307" offset="0"/> <stop stop-color="#FFF100" offset="0.5"/>	<stop stop-color="#D2E40D" offset="1"/>	</linearGradient> <linearGradient x1="0" y1="0" x2="1" y2="1" id="gGood" >	<stop stop-color="#D2E40D" offset="0"/>	<stop stop-color="#6AC52E" offset="1"/>	</linearGradient> <linearGradient x1="0" y1="0" x2="0" y2="1" id="gBest" >	<stop stop-color="#6AC52E" offset="0"/>	<stop stop-color="#00A165" offset="1"/>	</linearGradient> </defs> <rect x="10" y="0" height="50" width="50" fill="url(#gWrst)"/> <rect x="70" y="0" height="50" width="50" fill="url(#gBad)"/> <rect x="130" y="0" height="50" width="50" fill="url(#gAvg)"/> <rect x="190" y="0" height="50" width="50" fill="url(#gGood)"/> <rect x="250" y="0" height="50" width="50" fill="url(#gBest)"/>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Modular Guage - Script Codes CSS Codes

#outer { height: 236px; width: 236px; /*border: solid 1px red;*/
}
#chart { /*border: solid 1px blue;*/ height: 100%; width: 100%;
}
svg { border: solid 1px green;
}
.arcs path { stroke : #ffffff; stroke-width : 1; stroke-opacity : 0.4;
}
.label text { font-size: 4px; fill: #333333;
}
.label line { stroke: #333333; stroke-width: 0.4;
}
.dft-guage-alert-0 { fill: url(#gWrst);
}
.dft-guage-alert-1 { fill: url(#gBad);
}
.dft-guage-alert-2 { fill: url(#gAvg);
}
.dft-guage-alert-3 { fill: url(#gGood);
}
.dft-guage-alert-4 { fill: url(#gBest);
}
.centerGroup circle { fill:none;
}
.centerGroup text { font-size: 20px; fill: #231F20; text-anchor: middle; alignment-baseline: middle;
}
.markerGroup circle, .markerGroup polygon { fill: #333333;
}
circle.marker-center { display: none;
}

Modular Guage - Script Codes JS Codes

// Decision first ui rendering code
// Authors : [email protected]
// This code is dependent on D3 and JQuery
// Ensure the global dft namesapce is defined, with out overwriting
var DFT = (DFT === undefined) ? {} : DFT;
// Define the implementation of ui
(function(DFT) { // Extend DFT with the ui namespace var ui = $.extend(true, DFT, {ui:{}}).ui; // Convert Degrees to Radians for drawing D3 Arc Segments ui.deg2rad = function(deg) { return deg * Math.PI / 180; }; // Create a D3 scale function that returns degrees in a spread // centered on 0. Sets the domain for the scale to the provided // domain array passed as second parameter ui.degScale = function (spread, domain) { return d3.scale.linear()	.range([-1*spread/2,spread/2]) .domain(domain); }; // Create a modified D3 numberformat that uses B for billions and // capital K for thousands, with given precision ui.numberFormat = function (precision) { return function (val) { var siVal = d3.formatPrefix(val); siVal.symbol = siVal.symbol.replace(/G/, 'B').replace(/k/, 'K'); var gFormat = d3.format("." + precision + "g"); return gFormat(siVal.scale(val)) + " " + siVal.symbol; }; }; // Return a d3 ready SVG Transformation function that places content // using polar coordinates. I.E. Angle of Rotation and distance // from center. Assuming an initial coordinate space where 0,0 is center // and -Y is up for distance. The function will convert positive distances to the // UP direction with a -1 multiplication. // Function takes two inputs deg scale function which can be created with degScale // and a distance scale which is likely a percentage scale on R of some circle. ui.polarCoordinateTx = function (angle, distance) { return function (d) { return 'rotate(' +angle(d) +') translate(0,' + -1*distance(d) +')'; }; };
})(DFT);
// Define implementation of Guage Component as extension
// to UI Namespace
(function(ui) { // Guage is not a namespace but a function that produces // a Guage component ready to render. Doesn't matter if we're // Overwriting guage here we only want one definiton. ui.guage = function(selection) { // property variables in closure, exposed with accessors. var outerRadiusPrct=0.85, // outer radius of arcs as percent of R innerRadiusPrct=0.60, // inner radius of arcs as percent of R labelRadiusPrct=0.45, minorTickSizePrct=0.08, minorTicksOffsetPrct= 0.15, majorTicks=11, tickFormat=d3.format(',g'), minValue=0, maxValue=100, spread=240, alerts=[33,66], value=0, valueXOffset=0, valueYOffset=0, valueFormat=null, valueMkrSize=2, valueMkrOffset= 0.24, valueMkrLengthPrct= -0.25, alertClass="dft-guage-alert"; // Private drawing variables initialized durring init or derived from property methods. var svg, r=50, centerTx, arcGroup, tickGroup, cg, mkg, scale; // Methods that initialize derived values, can be called by init or property setters // that alter state of dependent values. function setScale() { scale = ui.degScale(spread, [minValue,maxValue]); } // Helper Methods that derive values function outerRadius() { return r*outerRadiusPrct; } function innerRadius() { return r*innerRadiusPrct; } // output a cleaned up array of alert breakpoints // Ensure at least one segment and that sengments cover full range function alertData() { var data = alerts.sort(d3.ascending); if (data.length === 0 || data[data.length - 1] < maxValue) { data.push(maxValue); } return data; } // One time initialization work performed here function init() { valueFormat=ui.numberFormat(3); // Base SVG Structure one time operation svg = selection.append('svg') .attr('viewBox',"0 0 100 100") .attr('class', "guage-svg"); // Translate the 0,0 coordinate to the center of the element centerTx = "translate(" + r + "," + r+ ")"; // Setup an SVG Group to hold Arcs arcGroup = svg.append('g') .attr("class", "arcs") .attr('transform', centerTx); // Add a Group to hold Tick Marks tickGroup = svg.append('g') .attr('class', 'label') .attr('transform', centerTx); // Create a group to hold the Value lable and center circle cg = svg.append('g') .attr('class', 'centerGroup') .attr('transform', centerTx); // Draw a circle at center position. // Radius will be updated durring render cg.append('circle') .attr({cx:0,cy:0}); // Create a group to hold marker values mkg = svg.append('g') .attr("class", "markerGroup") .attr('transform', centerTx); setScale(); } // Arc Template Generator function arcGen(alertData) { // define an Arc Template, all Angles in Radians return d3.svg.arc() .outerRadius(outerRadius()) .innerRadius(innerRadius()) // Start Angle is based on the prior alerts break point unless this is the first // arc segement where start angle is based on minValue .startAngle(function(d,i) { return ui.deg2rad(scale((i>0)?alertData[i-1]:minValue)); }) .endAngle(function(d) { return ui.deg2rad(scale(d)); }); } function drawArcs() { // Generate Data for Arc Segments and assemble Arc Template var arcData = alertData(); var arc = arcGen(arcData); // Bind Alert Data to Arcs group and draw Arcs with template var arcs = arcGroup.selectAll('path').data(arcData); // Add New Arcs arcs.enter().append('path'); // Update Arc Properties for new and old arcs.attr('class', function(d,i){ return "arc " + alertClass + "-" + i;}) .attr('d', arc); // If Number of Arcs Shrink remove uneeded arcs.exit().remove(); } function drawTicks() { // Generate Arrays for Major and Minor Tick values using d3 scale var mgTicks = scale.ticks(majorTicks); var minTicks = scale.ticks(2*majorTicks); // Draw the Major Ticks into lg var mgTickText = tickGroup.selectAll('text').data(mgTicks); // Add New Text where needed mgTickText.enter().append('text'); var labelRadiusScale=function(){return r*labelRadiusPrct;}; var minTickRadiusScale=function(){return r*(labelRadiusPrct+minorTicksOffsetPrct);}; // update properties for new and old mgTickText.attr('text-anchor',"middle") .text(tickFormat) .attr('transform', ui.polarCoordinateTx(scale, labelRadiusScale)); mgTickText.exit().remove(); // Draw Minor Ticks into lg var minTickLine = tickGroup.selectAll('line').data(minTicks); minTickLine.enter().append('line'); minTickLine.attr({x1:0, x2:0, class:"minor-tick"}) .attr('transform', ui.polarCoordinateTx(scale, minTickRadiusScale)) .attr('y2',function(d,i) { return (i%2===0) ? r*minorTickSizePrct : r*(3*minorTickSizePrct/4); }) .attr('y1',function(d,i) { return (i%2===0) ? 0 : r*(minorTickSizePrct/4); }); minTickLine.exit().remove(); } // The guage instance we are constructing which we will expose as the public interface var g = {}; // Update the display with latest values g.render = function(){ // Draw the Arcs for Alert backgrounds drawArcs(); // Draw Tick Marks drawTicks(); // Draw center circle cg.select('circle').attr({r:innerRadius()}); // Draw the Value Text representation var valueText = cg.selectAll('text').data([value]); valueText.enter().append('text'); valueText.attr({"text-anchor":"middle", x:r*valueXOffset, y:r*valueYOffset}).text(valueFormat(value)); var markerDistanceScale = function() {return innerRadius() + valueMkrOffset*r;}; var markerCircle = mkg.selectAll('circle').data([value]); markerCircle.enter().append('circle'); markerCircle.attr({cx:0,cy:0,r:valueMkrSize,"class":"marker-center"}) .attr('transform', ui.polarCoordinateTx(scale,markerDistanceScale)); var markerTail = mkg.selectAll('polygon').data([value]); markerTail.enter().append("polygon"); markerTail.attr("points", valueMkrSize + ",0 " + -1*valueMkrSize + ",0 0," + -1*r*valueMkrLengthPrct) .attr('transform', ui.polarCoordinateTx(scale,markerDistanceScale)); }; // Public properties Mehtods g.outerRadiusPrct = function(v) { if (v===undefined) return outerRadiusPrct; outerRadiusPrct = v; return g; }; g.innerRadiusPrct = function(v) { if (v===undefined) return innerRadiusPrct; innerRadiusPrct = v; return g; }; g.labelRadiusPrct = function(v) { if (v===undefined) return labelRadiusPrct; labelRadiusPrct = v; return g; }; g.minorTickSizePrct = function(v) { if (v===undefined) return minorTickSizePrct; minorTickSizePrct = v; return g; }; g.minorTicksOffsetPrct = function(v) { if (v===undefined) return minorTicksOffsetPrct; minorTicksOffsetPrct = v; return g; }; g.majorTicks = function(v) { if (v===undefined) return majorTicks; majorTicks = v; return g; }; g.tickFormat = function(v) { if (v===undefined) return tickFormat; tickFormat = v; return g; }; g.alerts = function(v) { if (v===undefined) return alerts; alerts = v; return g; }; g.value = function(v) { if (v===undefined) return value; value = v; return g; }; g.valueXOffset = function(v) { if (v===undefined) return valueXOffset; valueXOffset = v; return g; }; g.valueYOffset = function(v) { if (v===undefined) return valueYOffset; valueYOffset = v; return g; }; g.valueFormat = function(v) { if (v===undefined) return valueFormat; valueFormat = v; return g; }; g.valueMkrSize = function(v) { if (v===undefined) return valueMkrSize; valueMkrSize = v; return g; }; g.valueMkrOffset = function(v) { if (v===undefined) return valueMkrOffset; valueMkrOffset = v; return g; }; g.valueMkrLengthPrct = function(v) { if (v===undefined) return valueMkrLengthPrct; valueMkrLengthPrct = v; return g; }; g.alertClass = function(v) { if (v===undefined) return alertClass; alertClass = v; return g; }; // Properties that affect the scale g.minValue = function(v) { if (v===undefined) return minValue; minValue = v; setScale(); return g; }; g.maxValue = function(v) { if (v===undefined) return maxValue; maxValue = v; setScale(); return g; }; g.spread = function(v) { if (v===undefined) return spread; spread = v; setScale(); return g; }; // Invoke Init once and return public interface init(); return g; };
})(DFT.ui);
//var tscale = d3.scale.threshold().domain([75,78,81,84]).range([0.5,1.5,2.5,3.5,4.5]);
var myGuage = DFT.ui.guage(d3.select("#chart")) .value(72.3) .spread(270) .valueFormat(function(d) { return d3.format("f")(d) + "%"}) .minValue(71) .maxValue(88) .alerts([74.4,77.8,81.2,84.6]) .majorTicks(0) .outerRadiusPrct(1) .innerRadiusPrct(0.822) .labelRadiusPrct(1) .minorTicksOffsetPrct(0) .minorTickSizePrct(0) .valueMkrLengthPrct(-0.15) .valueMkrOffset(0.2) .valueMkrSize(4) .alertClass("dft-guage-alert") .render();
Modular Guage - Script Codes
Modular Guage - Script Codes
Home Page Home
Developer Roy
Username roygwells
Uploaded November 15, 2022
Rating 3
Size 5,852 Kb
Views 10,120
Do you need developer help for Modular Guage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Roy (roygwells) Script Codes
Name
Gradients
SVG Path Experiments 2.0
Close ICon
IIFE
A Pen by Roy
Guage
D3 Gauge
SVG Playground
Scoping Test
Accordion Dropdown
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!