Sort dataset by values

Result

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="../libs/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "../data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile" ], 
                    { 
                        "dataSortCurrent" : "values", 
                        "dataSortByValues" : "ascending", 
                        "showAverage" : false,
                    }
                )
            } 
        )
    </script>
</body>
  

Steps

We need following files.

Name	Source	Description
d3.js	https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js	d3.js Library
statosio.js	../libs/statosio.js	statosio.js Library
performance.json	../data/performance.json	Dataset

statosio.js Structure

d3.statosio( source, x, y, options )
  

	Value	Type
Source	`[{},{}...]`	Array of Objects
X	`"name"`	String
Y	`[ "mobile" ]`	Array of Strings or String
Options	`{}`	Object

1: HTML Structure

Set HTML Structure

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
</body>
  

2: Load d3.js

Insert <script> Element to load d3.js library.

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
</head>
<body>
</body>
  

3: Load statosio.js

Insert <script> Element to load statosio.js.

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="../libs/statosio.js"></script>
</head>
<body>
</body>

  

Source Code

4: Load dataset

d3.js expect a json array with object in it: [ {},{}...]

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="../libs/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "../data/performance.json" )
            .then( ( file ) => {

            } 
        )
    </script>
</body>
  

Example Dataset

5: Set dataset ranges

Load diagram

intermediate result

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="../libs/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "../data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile" ], 
                    {}
                )
            } 
        )
    </script>
</body>
  

Example Dataset

6: Add "data" options

intermediate result

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="../libs/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "../data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile" ], 
                    { 
                        "dataSortCurrent" : "values", 
                        "dataSortByValues" : "ascending"
                    }
                )
            } 
        )
    </script>
</body>
  

Option explained

Name	Description	Details
dataSortCurrent	Set the general route for sorting. You can choose between "none", "values", "names".	"values"
dataSortByValues	Here you can set type of sorting. You can choose between "ascending" and "decending"	"ascending"

List of all "data" Options: here

7: Add "show" options

intermediate result

<!DOCTYPE html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
    <script src="../libs/statosio.js"></script>
</head>
<body>
    <script>
        d3.json( "../data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile" ], 
                    { 
                        "dataSortCurrent" : "values", 
                        "dataSortByValues" : "ascending", 
                        "showAverage" : false,
                    }
                )
            } 
        )
    </script>
</body>
  

Option explained

Name	Description	Details
showAverage	Calculate and show average line	false

List of all "show" Options: here