How to sort a dataset by values?

For statosio

Sort a dataset by values

Sort dataset by values

Result

# d3.statosio

<!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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js" integrity="sha512-cpZ1Pq+WxFjYMahfsghI7nRqv7FVeZLH5CirYPLX11iF6jWfMgkvYVp3UYQ/W109s/3RWtyFNM0wPUOpGfNLJA==" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        d3.json( "https://d3.statosio.com/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 https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js statosio.js Library
performance.json https://d3.statosio.com/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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js" integrity="sha512-cpZ1Pq+WxFjYMahfsghI7nRqv7FVeZLH5CirYPLX11iF6jWfMgkvYVp3UYQ/W109s/3RWtyFNM0wPUOpGfNLJA==" crossorigin="anonymous"></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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js" integrity="sha512-cpZ1Pq+WxFjYMahfsghI7nRqv7FVeZLH5CirYPLX11iF6jWfMgkvYVp3UYQ/W109s/3RWtyFNM0wPUOpGfNLJA==" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        d3.json( "https://d3.statosio.com/data/performance.json" )
            .then( ( file ) => {

            } 
        )
    </script>
</body>

Example Dataset

5: Set dataset ranges

Load diagram

<!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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js" integrity="sha512-cpZ1Pq+WxFjYMahfsghI7nRqv7FVeZLH5CirYPLX11iF6jWfMgkvYVp3UYQ/W109s/3RWtyFNM0wPUOpGfNLJA==" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        d3.json( "https://d3.statosio.com/data/performance.json" )
            .then( ( file ) => {
                d3.statosio( 
                    file, 
                    "name", 
                    [ "mobile" ], 
                    {}
                )
            } 
        )
    </script>
</body>

Example Dataset

6: Add “data” options

<!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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js" integrity="sha512-cpZ1Pq+WxFjYMahfsghI7nRqv7FVeZLH5CirYPLX11iF6jWfMgkvYVp3UYQ/W109s/3RWtyFNM0wPUOpGfNLJA==" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        d3.json( "https://d3.statosio.com/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

<!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" integrity="sha512-I54fxhTJwRigWTc3uNjgDzgii7LW+WJuyyA8kc6WaaZ7RQQNAf8bOEJLRNav7n/ca09MUwl5FptUukvqrOTUvQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js" integrity="sha512-cpZ1Pq+WxFjYMahfsghI7nRqv7FVeZLH5CirYPLX11iF6jWfMgkvYVp3UYQ/W109s/3RWtyFNM0wPUOpGfNLJA==" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        d3.json( "https://d3.statosio.com/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

Andreas Banholzer

By Andreas Banholzer

I'm the author of statosio and I work as a full stack developer

Looking for more statosio tutorials?

View all tutorials for statosio