Heat map with categorical axis labels with Plotly.js
A Pen by Daniel Schildt on CodePen.
Created
September 12, 2019 23:20
-
-
Save d2s/5e4a0e7f6eff61665470553073db2aa6 to your computer and use it in GitHub Desktop.
Kokonaisarvio datan hyötypotentiaalista (Heat Map with Plotly.js)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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