Skip to content

Instantly share code, notes, and snippets.

@d2s

d2s/index.html

Created Sep 12, 2019
Embed
What would you like to do?
Kokonaisarvio datan hyötypotentiaalista (Heat Map with Plotly.js)
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<header>
<h1>Heat Map with Plotly.js</h1>
</header>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<footer>
Digital version based on a chart from the research report:<br>
<a target="_blank" rel="noreferrer noopener" href="https://6aika.fi/wp-content/uploads/2019/06/Datan-tietosuoja-ja-tietoturvallinen-avaaminen.pdf">Datan tietosuoja ja tietoturvallinen avaaminen (PDF file)</a>
</footer>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>

Kokonaisarvio datan hyötypotentiaalista (Heat Map with Plotly.js)

Heat map with categorical axis labels with Plotly.js

A Pen by Daniel Schildt on CodePen.

License.

var xValues = [
"Erittäin pieni merkitys",
"Pieni merkitys",
"Kohtuullinen merkitys",
"Suuri merkitys",
"Erittäin suuri merkitys"
];
var yValues = [
"Erittäin alhainen todennäköisyys",
"Alhainen todennäköisyys",
"Kohtuullinen todennäköisyys",
"Suuri todennäköisyys",
"Erittäin suuri todennäköisyys"
];
var zValues = [
[100, 100, 60, 60, 60],
[100, 60, 60, 40, 40],
[60, 60, 40, 40, 20],
[60, 40, 40, 20, 0],
[60, 40, 20, 0, 0]
];
// Custom color scale
// - https://plot.ly/javascript/colorscales/
var colorscaleValue = [
[0, "#5c9ad7"],
[20, "#71ac47"],
[40, "#ffff01"],
[60, "#ee7e32"],
[100, "#0000ff"]
];
// Range: 0-100
var data = [
{
z: zValues,
x: xValues,
y: yValues,
type: "heatmap",
// colorscale: colorscaleValue,
// colorscale: 'Viridis',
// colorscale: 'Jet',
colorscale: "Portland",
showscale: false
}
];
var dataAnnotations = [
{
x: 0,
y: 0,
xref: "x",
yref: "y",
text: "Erittäin pieni hyöty",
showarrow: true,
arrowhead: 3,
arrowsize: 2,
arrowcolor: '#000000',
font: {size:12, color:'#222222'},
ax: 0,
ay: 15
},
{
x: 1,
y: 1,
xref: "x",
yref: "y",
text: "Pieni hyöty",
showarrow: true,
arrowhead: 3,
arrowsize: 2,
arrowcolor: '#000000',
font: {size:12, color:'#000000'},
ax: 0,
ay: 15
},
{
x: 2,
y: 2,
xref: "x",
yref: "y",
text: "Kohtuullinen hyöty",
showarrow: true,
arrowhead: 3,
arrowsize: 2,
arrowcolor: '#000000',
font: {size:12, color:'#000000'},
ax: 0,
ay: 15
},
{
x: 3,
y: 3,
xref: "x",
yref: "y",
text: "Suuri hyöty",
showarrow: true,
arrowhead: 3,
arrowsize: 2,
arrowcolor: '#000000',
font: {size:12, color:'#ffffff'},
ax: 0,
ay: 15
},
{
x: 4,
y: 4,
xref: "x",
yref: "y",
text: "Erittäin suuri hyöty",
showarrow: true,
arrowhead: 3,
arrowsize: 2,
arrowcolor: '#000000',
font: {size:12, color:'#ffffff'},
ax: 0,
ay: 15
}
];
var layout = {
title: "Kokonaisarvio datan hyötypotentiaalista",
annotations: dataAnnotations,
margin: {
t: 100,
r: 20,
b: 50,
l: 230
},
xaxis: {
ticks: "",
side: "top"
},
yaxis: {
ticks: "",
ticksuffix: " ",
width: 1500,
height: 1500,
autosize: true
}
};
for (var i = 0; i < yValues.length; i++) {
for (var j = 0; j < xValues.length; j++) {
var currentValue = zValues[i][j];
if (currentValue == 0.0) {
var textColor = "white";
} else if (currentValue == 20) {
var textColor = "white";
} else if (currentValue == 40) {
var textColor = "black";
} else if (currentValue == 60) {
var textColor = "black";
} else {
var textColor = "black";
}
var result = {
xref: "x1",
yref: "y1",
x: xValues[j],
y: yValues[i],
text: zValues[i][j],
font: {
family: "Arial",
size: 12,
color: "rgb(50, 171, 96)"
},
showarrow: false,
font: {
color: textColor
}
};
layout.annotations.push(result);
}
}
Plotly.newPlot("myDiv", data, layout, { showSendToCloud: false });
body {
margin: 0;
padding: 2ex;
background-color: #ddd;
}
header {
padding: 0;
text-align: center;
h1 {
font-size: 4ex;
color: #111;
}
}
footer {
padding: 2ex;
text-align: center;
a {
display: inline-block;
margin: 0.5ex;
padding: 1ex;
color: #000;
&:hover,
&:focus {
color: blue;
background: #fff;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.