Change style to dark-mode
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" ],
{
"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 | ../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>
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>
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>
6: Add "style" 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" ],
{
"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
- 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" ],
{
"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