Select and change position of columns

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" ], 
                    { 
                        "dataXSelectors" : ["Data", "Spock"],
                        "dataSortSelection" : "start",
                        "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" ], 
                    { 
                        "dataXSelectors" : ["Data", "Spock"],
                        "dataSortSelection" : "start"
                    }
                )
            } 
        )
    </script>
</body>
  

Option explained

Name	Description	Details
dataXSelectors	Expect one or more names which are included in the x range.	["Data", "Spock"]
dataSortSelection	Change position of your selection. You can choose between "start", "end" and "none"	"start"

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" ], 
                    { 
                        "dataXSelectors" : ["Data", "Spock"],
                        "dataSortSelection" : "start",
                        "showAverage" : false,
                    }
                )
            } 
        )
    </script>
</body>
  

Option explained

Name	Description	Details
showAverage	Calculate and show average line	false

List of all "show" Options: here