How to change style to dark-mode?

For statosio

Change style to dark-mode

Change style to dark-mode

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" ], 
                    { 
                        "styleColorSelectorsChart": ["#E2B08E", "#CC8074"],
                        "styleColorCanvasBackground" : "none",
                        "styleColorGridline" : "#2F3138",
                        "styleStrokeGridline" : 1,
                        "styleColorFont" : "#BABABA",
                        "styleColorSelectorsText" : ["#E2B08E", "#BABABA"],
                        "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 “style” 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" ], 
                    { 
                        "styleColorSelectorsChart": ["#E2B08E", "#CC8074"],
                        "styleColorCanvasBackground" : "none",
                        "styleColorGridline" : "#2F3138",
                        "styleStrokeGridline" : 1,
                        "styleColorFont" : "#BABABA",
                        "styleColorSelectorsText" : ["#E2B08E", "#BABABA"]
                    }
                )
            } 
        )
    </script>
</body>

Colors in use.

Color Hex Used for
#E2B08E Highlight bar chart color
#CC8074 Default bar chart color
#2F3138 Gridline Color
#BABABA Default text color

Options explained

Name Description Details
styleColorSelectorsChart Colorize the chart of the selection. Use “hex” values or “html” color-names. [“#E2B08E”, “#CC8074”]
styleColorCanvasBackground Set background color. “none”
styleColorGridline Set the gridline color. Use “hex” value or “html” color-names. “#2F3138”
styleStrokeGridline Set stroke weight of gridline. 1
styleColorFont Set default font color. Excluding non-selection content. “#BABABA”
styleColorSelectorsText Colorize the font of the selection. Use “hex” values or “html” color-names. [“#E2B08E”, “#BABABA”]

List of all “style” 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" ], 
                    { 
                        "styleColorSelectorsChart": ["#E2B08E", "#CC8074"],
                        "styleColorCanvasBackground" : "none",
                        "styleColorGridline" : "#2F3138",
                        "styleStrokeGridline" : 1,
                        "styleColorFont" : "#BABABA",
                        "styleColorSelectorsText" : ["#E2B08E", "#BABABA"],
                        "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