dataSortSelection

Change position of your selection. You can choose between "start", "end" and "none"

Note

The sequence is based on your selection sequence.

Specification

Default implementation: { dataSortSelection : none }

Key

Name	Alias	Category
`dataSortSelection`	`data__sort__selection`	Data

Value

Allow "start" or "end" as value.

Default	Validation	Type
`"none"`	`^(?:start\|end)`	String

Example A.

Set selection to: start

Output

Open output in a blank window. Download examples as zip.

Parameters

This dataset shows the mobile google pagerank performance score for a certain website.

	Value	Type
Source	"../data/performance.json"	String
X	`"name"`	String
Y	`[ "mobile" ]`	Array
Options	`{ "dataSortSelection" : "start", "dataXSelectors" : ["Spock"] }`	Object

Source Code

Invoke Function

d3.statosio( 
    file, 
    "name", 
    [ "mobile" ], 
    { "dataSortSelection" : "start", "dataXSelectors" : ["Spock"] }
)
  

HTML Implementation

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

Example B.

Set selection to: end

Output

Open output in a blank window. Download examples as zip.

Parameters

This dataset shows the mobile google pagerank performance score for a certain website.

	Value	Type
Source	"../data/performance.json"	String
X	`"name"`	String
Y	`[ "mobile" ]`	Array
Options	`{ "dataSortSelection" : "end", "dataXSelectors" : ["Spock"] }`	Object

Source Code

Invoke Function

d3.statosio( 
    file, 
    "name", 
    [ "mobile" ], 
    { "dataSortSelection" : "end", "dataXSelectors" : ["Spock"] }
)
  

HTML Implementation

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

Example C.

Set selection to: none

Output

Open output in a blank window. Download examples as zip.

Parameters

This dataset shows the mobile google pagerank performance score for a certain website.

	Value	Type
Source	"../data/performance.json"	String
X	`"name"`	String
Y	`[ "mobile" ]`	Array
Options	`{ "dataSortSelection" : "none", "dataXSelectors" : ["Spock"] }`	Object

Source Code

Invoke Function

d3.statosio( 
    file, 
    "name", 
    [ "mobile" ], 
    { "dataSortSelection" : "none", "dataXSelectors" : ["Spock"] }
)
  

HTML Implementation

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