Git Product home page Git Product logo

d3-gauge's Introduction

d3-gauge

Gauge visualization built on top of d3.

demo

var d3gauge = require('d3-gauge');

var gauge = d3gauge(document.getElementById('simple-gauge'));
gauge.write(39);

Note: please make sure to include the appropriate css in your page, otherwise all you'll see is a big black circle.

Installation

npm install d3-gauge

Try it

npm explore d3-gauge
npm run demo

API

####gauge (el[, opts])*

Creates a gauge appended to the given DOM element.

@name Gauge @function params:

  • el DOMElement to which the gauge is appended
  • opts Object gauge configuration with the following properties all of which have sensible defaults:
    • label {String} that appears in the top portion of the gauge
    • clazz {String} class to apply to the gauge element in order to support custom styling
    • size {Number} the over all size (radius) of the gauge
    • preserveAspectRatio {String} default 'xMinYMin meet', see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
    • min {Number} the minimum value that the gauge measures
    • max {Number} the maximum value that the gauge measures
    • majorTicks {Number} the number of major ticks to draw
    • minorTicks {Number} the number of minor ticks to draw in between two major ticks
    • needleWidthRatio {Number} tweaks the gauge's needle width
    • needleConatinerRadiusRatio {Number} tweaks the gauge's needle container circumference
    • transitionDuration {Number} the time in ms it takes for the needle to move to a new position
    • zones {Array[Object]} each with the following properties
      • clazz {String} class to apply to the zone element in order to style its fill
      • from {Number} between 0 and 1 to determine zone's start
      • to {Number} between 0 and 1 to determine zone's end

returns:

Object the gauge with a write method

Note: have a look at the default opts

###gauge.write = function(value, transitionDuration)

Writes a value to the gauge and updates its state, i.e. needle position, accordingly. @name write @function params:

  • value Number the new gauge value, should be in between min and max
  • transitionDuration Number (optional) transition duration, if not supplied the configured duration is used

Styling

d3-gauge can be custom styled and none of the features are visible if no style is included at all.

Please have a look at the styles included here in order to get an idea of what parts you can tweak to your liking.

Kudos

This implementation was highly inspired by this post.

Although lots of work went into cleaning the code up and making the gauge configurable and stylable, the main idea came from there.

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.