<script src="https://cdn.lordicon.com/lordicon-1.1.0.js"></script>
<div class="site u-z-index-foreground" id="site">
<div class="site__header" id="siteHeader">
<div class="u-position-relative">
<header class="o-header">
<div class="wrapper">
<div class="row justify-content-between align-items-center flex-nowrap">
<div class="grid-auto">
<a href="/" class="o-header__logo-link">
<span class="o-header__logo">
<img class="logotype" src="https://static.internetstiftelsen.se/images/logotypes/internetkollen.svg" alt="logotyp">
</span>
<span class="u-visuallyhidden">Till startsidan</span>
</a>
</div>
<div class="grid u-hide-sm">
<h1 id="portal-title" data-default="Internetkollen" class="u-b-0 u-b-l-1 u-b-solid u-b-concrete display-flex u-p-y-1 u-p-x-2 u-m-y-1 u-font-size-medium u-weight-normal">Test för moderna internetstandarder</h1>
</div>
<div class="grid">
<nav class="a-main-menu" aria-label="Huvudmeny">
<ul class="a-main-menu__list">
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Testa själv</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link is-current">
<span class="a-main-menu__list__text">Hälsoläget</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Om</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Hjälp</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Kontakt</span>
</a>
</li>
<li class="u-hide-xl-up">
<button type="button" class="a-main-menu__list__link" aria-expanded="false" data-a11y-toggle="dropdown">
<span class="a-main-menu__list__text">Meny</span>
<div class="icon-arrow-down"></div>
</button>
<ul id="dropdown" class="a-main-menu__subnav a-main-menu__subnav--right-aligned u-box-shadow-card">
<li class="a-main-menu__subnav__item">
<a href="#">Testa själv</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Hälsoläget</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Om</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Hjälp</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Kontakt</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="site__main" id="siteMain">
<div class="u-p-2 background-snow display-flex justify-content-end align-items-center u-b-solid u-b-b-1 u-b-x-0 u-b-t-0 u-b-concrete">
<label for="history" class="u-m-r-1">Historiska tester</label>
<select name="history" id="history" class="a-select">
<option value="0" disabled selected>Välj datum</option>
<option value="1">2025-10-01 (latest)</option>
<option value="1">2025-09-01</option>
<option value="1">2025-08-01</option>
</select>
</div>
<div class="wrapper u-p-t-2 u-p-b-8">
<div class="row">
<main class="grid-18">
<section class="row justify-content-center">
<div class="grid-18 grid-md-12 u-p-t-4 u-m-b-2">
<h1 class="supersize u-align-center">
Hälsoläget - 1200 samhällskritiska domäner
</h1>
<p class="preamble u-align-center">
Sveriges Hälsoläget övervakar webb- och e-postsäkerhetskonfigurationen för Sveriges främsta internettjänster. Tjänsten drivs av <a href="">Internetstiftelsen.</a>
</p>
</div>
</section>
<section>
<div class="row justify-content-center u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<span class="a-meta justify-content-center u-m-t-6">Data from: 2025-10-01</span>
<h2 class="alpha u-align-center">Infrastructure Configuration Overview</h2>
<p class="u-align-center">Key aspects of web application and email infrastructure configuration and security.</p>
</div>
<div class="grid-18 grid-md-6">
<div class="chart-container" id="container"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">Web Configuration</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 507
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 366
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 169
},
];
const container = document.getElementById("container");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong><strong style="font-size: ${18 * fontScale}px; margin: 0; line-height:2;">Well configured</strong><span style="font-size: ${18 * fontScale}px; margin: 0;">507 av 1054</span></div>`;
const svg = d3.select("#container")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-md-6">
<div class="chart-container" id="container2"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">E-mail Configuration</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 635
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 75
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 150
},
];
const container = document.getElementById("container2");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">62%</strong><strong style="font-size: ${18 * fontScale}px; margin: 0; line-height:2;">Well configured</strong><span style="font-size: ${18 * fontScale}px; margin: 0;">635 av 1030</span></div>`;
const svg = d3.select("#container2")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Web Application Configuration</h2>
<p class="u-align-center">Key aspects of web application security of the hosts monitored by this dashboard.</p>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container3"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HTTPS</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 49
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 40
},
{
name: "Sites well-configured HTTP",
value: 11
},
];
const container = document.getElementById("container3");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong></div>`;
const svg = d3.select("#container3")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container4"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HTTPS Redirection</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 22
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 33
},
{
name: "Sites whose HTTP configuration has errors or lacks critical features",
value: 55
},
];
const container = document.getElementById("container4");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">22%</strong></div>`;
const svg = d3.select("#container4")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container5"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HSTS</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 92
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 5
},
{
name: "Sites whose HTTP configuration has errors or lacks critical features",
value: 3
},
];
const container = document.getElementById("container5");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">92%</strong></div>`;
const svg = d3.select("#container5")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container6"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HSTS Preloaded</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 3
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 70
},
{
name: "Sites whose HTTP configuration has errors or lacks critical features",
value: 27
},
];
const container = document.getElementById("container6");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">3%</strong></div>`;
const svg = d3.select("#container6")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Email Infrastructure Configuration</h2>
<p class="u-align-center">Key aspects of email security of the hosts monitored by this dashboard.</p>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container7"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">STARTTLS</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 49
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 40
},
{
name: "Sites well-configured HTTP",
value: 11
},
];
const container = document.getElementById("container7");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong></div>`;
const svg = d3.select("#container7")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container8"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">DANE</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 22
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 33
},
{
name: "Sites whose HTTP configuration has errors or lacks critical features",
value: 55
},
];
const container = document.getElementById("container8");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">22%</strong></div>`;
const svg = d3.select("#container8")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container9"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">SPF</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 92
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 5
},
{
name: "Sites whose HTTP configuration has errors or lacks critical features",
value: 3
},
];
const container = document.getElementById("container9");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">92%</strong></div>`;
const svg = d3.select("#container9")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container10"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">DMARC</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 3
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 70
},
{
name: "Sites whose HTTP configuration has errors or lacks critical features",
value: 27
},
];
const container = document.getElementById("container10");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">3%</strong></div>`;
const svg = d3.select("#container10")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Domain Name Security Overview</h2>
<p class="u-align-center">Key aspects of DNS configuration and security; only DNSSEC at the moment.</p>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container11"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">DNSSEC</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 49
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 40
},
{
name: "Sites well-configured HTTP",
value: 11
},
];
const container = document.getElementById("container11");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong></div>`;
const svg = d3.select("#container11")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
</section>
<section>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Web Configuration by Group</h2>
<p class="u-align-center">Key aspects of web application security, on per group basis.</p>
</div>
</div>
<div class="row align-items-center justify-content-between">
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<a href="" class="u-link-default u-display-inline-block">
<h4 class="u-p-b-0 u-m-b-0">Banker</h4>
</a><br>
<span class="color-granit u-font-size-medium-plus">95 hosts</span>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<div class="chart-container" id="container12"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 19
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 75
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 6
},
];
const container = document.getElementById("container12");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">19%</strong><span style="text-align:center;font-size: ${30 * fontScale}px; margin: 0;">18 av 98</span></div>`;
const svg = d3.select("#container12")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS</span>
<div id="chart" class="line-chart"></div>
<strong>49%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 507
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 366
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 169
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Redirection</span>
<div id="chart2" class="line-chart"></div>
<strong>68%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 68
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 13
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 9
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart2")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HSTS</span>
<div id="chart3" class="line-chart"></div>
<strong>37%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 37
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 25
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 38
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart3")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Preloaded</span>
<div id="chart4" class="line-chart"></div>
<strong>4%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 4
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 68
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 28
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart4")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">DNSEC</span>
<div id="chart5" class="line-chart"></div>
<strong>22%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 22
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 40
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 38
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart5")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row">
<div class="grid-18">
<hr>
</div>
</div>
<div class="row align-items-center justify-content-between">
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<a href="" class="u-link-default u-display-inline-block">
<h4 class="u-p-b-0 u-m-b-0">Försäkringsbolag</h4>
</a><br>
<span class="color-granit u-font-size-medium-plus">28 hosts</span>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<div class="chart-container" id="container13"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 63
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 15
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 22
},
];
const container = document.getElementById("container12");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">63%</strong><span style="text-align:center;font-size: ${30 * fontScale}px; margin: 0;">14 av 28</span></div>`;
const svg = d3.select("#container13")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS</span>
<div id="chart6" class="line-chart"></div>
<strong>49%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 507
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 366
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 169
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart6")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Redirection</span>
<div id="chart7" class="line-chart"></div>
<strong>68%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 68
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 13
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 9
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart7")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HSTS</span>
<div id="chart8" class="line-chart"></div>
<strong>37%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 37
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 25
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 38
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart8")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Preloaded</span>
<div id="chart9" class="line-chart"></div>
<strong>4%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 4
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 68
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 28
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart9")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">DNSEC</span>
<div id="chart10" class="line-chart"></div>
<strong>22%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [{
name: "Sites well-configured HTTPS",
value: 22
},
{
name: "Sites whose HTTPS configuration has smaller problems or lacks important features",
value: 40
},
{
name: "Sites whose HTTPS configuration has errors or lacks critical features",
value: 38
},
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart10")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row">
<div class="grid-18">
<hr>
</div>
</div>
</section>
</main>
</div>
</div>
</div>
<div class="o-pre-footer">
<div class="wrapper">
<div class="row justify-content-between">
<div class="grid-lg-5">
<dl class="u-list-clean u-font-size-medium">
<dt class="u-weight-bold u-m-b-1">Powered by</dt>
<dd class="u-m-l-0">
<svg class="o-pre-footer__logo" alt="Internet NL logotype" width="296" height="65" viewBox="0 0 296 65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>logo-internetnl-en</title>
<defs>
<circle id="a" cx="32" cy="32" r="32" />
<path id="c" d="M0 0h35.344v33.473H0z" />
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a" />
</mask>
<use fill="#8E9297" xlink:href="#a" />
<g mask="url(#b)">
<g transform="rotate(20 33.491 52.956)">
<mask id="d" fill="#fff">
<use xlink:href="#c" />
</mask>
<g mask="url(#d)" fill-rule="nonzero" fill="#FFF">
<path d="M35.344 39.392c3.345 0 6.021-2.636 6.021-5.844s-2.676-5.844-6.021-5.844c-3.345 0-6.021 2.636-6.021 5.844s2.676 5.844 6.02 5.844zm0 5.76c-6.507 0-11.781-5.195-11.781-11.604 0-6.409 5.274-11.604 11.78-11.604 6.507 0 11.782 5.195 11.782 11.604 0 6.409-5.275 11.604-11.781 11.604z" />
<path d="M35.344 50.03c9.9 0 17.802-7.485 17.802-16.557 0-9.07-7.902-16.555-17.802-16.555-9.9 0-17.803 7.484-17.803 16.555 0 9.072 7.903 16.556 17.803 16.556zm0 5.76c-13.013 0-23.563-9.992-23.563-22.317 0-12.324 10.55-22.315 23.563-22.315 13.013 0 23.562 9.99 23.562 22.315 0 12.325-10.549 22.316-23.562 22.316z" />
<path d="M35.344 61.187c16.407 0 29.584-12.48 29.584-27.714C64.928 18.24 51.75 5.76 35.344 5.76S5.76 18.24 5.76 33.473c0 15.234 13.177 27.714 29.584 27.714zm0 5.76C15.824 66.947 0 51.96 0 33.473 0 14.986 15.824 0 35.344 0c19.52 0 35.344 14.986 35.344 33.473S54.864 66.947 35.344 66.947z" />
</g>
</g>
<path d="M34.903 46.974a12.467 12.467 0 0 0 6.857 2.045c6.98 0 12.64-5.73 12.64-12.8s-5.66-12.8-12.64-12.8-12.64 5.73-12.64 12.8c0 2.41.658 4.665 1.802 6.59l-8.139 8.139a2.88 2.88 0 1 0 4.073 4.073l8.047-8.047z" fill="#FFF" />
<path d="M41.92 39.617c1.762 0 3.212-1.468 3.212-3.305 0-1.837-1.45-3.305-3.212-3.305-1.762 0-3.212 1.468-3.212 3.305 0 1.837 1.45 3.305 3.212 3.305zm0 4.148c-4.065 0-7.36-3.337-7.36-7.453s3.295-7.453 7.36-7.453 7.36 3.337 7.36 7.453-3.295 7.453-7.36 7.453z" fill="#8E9297" fill-rule="nonzero" />
</g>
<path d="M78.776 40.708V6H72v34.708h6.776zm27.797 0V24.475c0-2.779-.536-5.167-2.583-7.215-1.414-1.413-3.461-2.242-5.996-2.242-2.34 0-4.68.878-6.337 2.632v-2.34h-6.19v25.398h6.336V25.352c0-3.46 2.243-4.63 4.241-4.63 1.999 0 4.192 1.17 4.192 4.63v15.356h6.337zm17.318 0v-5.363H121.6c-1.512 0-2.194-.828-2.194-2.29V20.867h4.485v-4.826h-4.485V8.535h-6.337v7.507h-2.681v4.826h2.68v12.576c0 3.608 2.195 7.264 7.362 7.264h3.46zm25.458-10.725v-2.68c0-7.215-3.998-12.285-11.066-12.285-6.58 0-11.065 4.68-11.065 12.967C127.218 38.27 132.97 41 138.966 41c4.582 0 7.068-1.365 9.651-3.997l-3.85-3.754c-1.61 1.56-2.974 2.389-5.753 2.389-3.607 0-5.557-2.34-5.557-5.655h15.892zm-6.24-4.338h-9.652c.049-1.121.146-1.804.585-2.73.683-1.511 2.096-2.632 4.241-2.632 2.145 0 3.559 1.12 4.241 2.632.439.926.536 1.609.585 2.73zm29.748-8.238c-1.755-1.755-3.51-2.389-5.996-2.389-2.73 0-5.167 1.268-6.386 2.73V15.31h-6.19v25.397h6.336V25.4c0-3.217 2.145-4.68 4.095-4.68 1.56 0 2.388.537 3.363 1.512l4.778-4.826zm23.8 23.3V24.476c0-2.779-.536-5.167-2.584-7.215-1.413-1.413-3.46-2.242-5.995-2.242-2.34 0-4.68.878-6.337 2.632v-2.34h-6.191v25.398h6.337V25.352c0-3.46 2.242-4.63 4.24-4.63 2 0 4.193 1.17 4.193 4.63v15.356h6.337zm26.774-10.724v-2.68c0-7.215-3.997-12.285-11.065-12.285-6.581 0-11.066 4.68-11.066 12.967C201.3 38.27 207.052 41 213.048 41c4.582 0 7.068-1.365 9.652-3.997l-3.851-3.754c-1.609 1.56-2.974 2.389-5.752 2.389-3.607 0-5.557-2.34-5.557-5.655h15.891zm-6.24-4.338h-9.651c.048-1.121.146-1.804.585-2.73.682-1.511 2.096-2.632 4.24-2.632 2.145 0 3.56 1.12 4.242 2.632.438.926.536 1.609.585 2.73zm22.582 15.063v-5.363h-2.29c-1.512 0-2.194-.828-2.194-2.29V20.867h4.484v-4.826h-4.484V8.535h-6.337v7.507h-2.681v4.826h2.68v12.576c0 3.608 2.194 7.264 7.361 7.264h3.461zm11.858 0v-7.215h-7.263v7.215h7.263zm27.066 0V24.475c0-2.779-.536-5.167-2.583-7.215-1.414-1.413-3.461-2.242-5.996-2.242-2.34 0-4.68.878-6.337 2.632v-2.34h-6.19v25.398h6.336V25.352c0-3.46 2.243-4.63 4.241-4.63 1.999 0 4.192 1.17 4.192 4.63v15.356h6.337zm16.684 0v-5.363h-2.437c-1.609 0-2.243-.78-2.243-2.29V6h-6.337v27.444c0 3.608 2.194 7.264 7.41 7.264h3.607z" fill="#8E9297" />
<g>
<path d="M73.685 57V46.32h-1.14V57h1.14zm9.525-2.94c0-.885-.33-1.605-.9-2.1-.48-.435-.945-.615-1.935-.765L79.13 51c-.555-.09-1.065-.27-1.395-.555-.33-.285-.48-.72-.48-1.245 0-1.2.825-1.995 2.265-1.995 1.11 0 1.845.315 2.49.93l.735-.735c-.915-.81-1.815-1.17-3.18-1.17-2.115 0-3.42 1.185-3.42 3 0 .87.285 1.53.825 2.01.48.42 1.11.675 1.95.81l1.245.18c.765.12 1.065.225 1.395.525.36.315.525.765.525 1.335 0 1.26-.96 1.98-2.535 1.98-1.2 0-2.025-.27-2.91-1.155l-.765.765c.99 1.005 2.055 1.41 3.645 1.41 2.235 0 3.69-1.155 3.69-3.03zm12.165-7.74h-1.23l-2.49 5.115-2.52-5.115h-1.23l3.18 6.27V57h1.14v-4.41l3.15-6.27zm8.73 5.34c0 2.445-.075 3.375-1.08 4.38-.66.66-1.545 1.05-2.655 1.05-1.11 0-2.01-.39-2.67-1.05-1.005-1.005-1.065-1.935-1.065-4.38s.06-3.375 1.065-4.38c.66-.66 1.56-1.05 2.67-1.05 1.11 0 1.995.39 2.655 1.05 1.005 1.005 1.08 1.935 1.08 4.38zm-1.14 0c0-2.19-.075-2.97-.75-3.66a2.535 2.535 0 0 0-1.845-.75c-.72 0-1.35.255-1.845.75-.675.69-.75 1.47-.75 3.66 0 2.19.075 2.97.75 3.66.495.495 1.125.75 1.845.75s1.35-.255 1.845-.75c.675-.69.75-1.47.75-3.66zm11.13 1.815V46.32h-1.14v7.065c0 1.62-1.035 2.685-2.595 2.685-1.56 0-2.58-1.065-2.58-2.685V46.32h-1.14v7.155c0 2.13 1.56 3.615 3.72 3.615s3.735-1.485 3.735-3.615zM124.505 57h-1.335l-2.43-4.74h-2.565V57h-1.14V46.32h4.095c1.86 0 3.165 1.125 3.165 2.97 0 1.56-.945 2.58-2.325 2.865L124.505 57zm-1.35-7.695c0-1.305-.885-1.965-2.13-1.965h-2.85v3.915h2.85c1.245 0 2.13-.645 2.13-1.95zM131.75 57V46.32h-1.14V57h1.14zm10.98 0V46.32h-1.14v8.535l-5.67-8.535h-1.08V57h1.14v-8.565L141.65 57h1.08zm9.315-9.66v-1.02h-7.32v1.02h3.09V57h1.14v-9.66h3.09zM160.67 57v-1.02h-5.49v-3.855h4.68v-1.02h-4.68V47.34h5.49v-1.02h-6.63V57h6.63zm9.84 0h-1.335l-2.43-4.74h-2.565V57h-1.14V46.32h4.095c1.86 0 3.165 1.125 3.165 2.97 0 1.56-.945 2.58-2.325 2.865L170.51 57zm-1.35-7.695c0-1.305-.885-1.965-2.13-1.965h-2.85v3.915h2.85c1.245 0 2.13-.645 2.13-1.95zM180.77 57V46.32h-1.14v8.535l-5.67-8.535h-1.08V57h1.14v-8.565L179.69 57h1.08zm9.72 0v-1.02H185v-3.855h4.68v-1.02H185V47.34h5.49v-1.02h-6.63V57h6.63zm8.595-9.66v-1.02h-7.32v1.02h3.09V57h1.14v-9.66h3.09z" fill="#8E9297" />
<path d="M215.098 53.475V46.32h-1.14v7.065c0 1.62-1.035 2.685-2.595 2.685-1.56 0-2.58-1.065-2.58-2.685V46.32h-1.14v7.155c0 2.13 1.56 3.615 3.72 3.615s3.735-1.485 3.735-3.615zm10.215-4.02c0 1.905-1.365 3.15-3.3 3.15h-2.835V57h-1.14V46.32h3.975c1.935 0 3.3 1.23 3.3 3.135zm-1.14 0c0-1.41-.915-2.115-2.25-2.115h-2.745v4.245h2.745c1.335 0 2.25-.72 2.25-2.13zm13.275-2.115v-1.02h-7.32v1.02h3.09V57h1.14v-9.66h3.09zm9.06 4.32c0 2.445-.075 3.375-1.08 4.38-.66.66-1.545 1.05-2.655 1.05-1.11 0-2.01-.39-2.67-1.05-1.005-1.005-1.065-1.935-1.065-4.38s.06-3.375 1.065-4.38c.66-.66 1.56-1.05 2.67-1.05 1.11 0 1.995.39 2.655 1.05 1.005 1.005 1.08 1.935 1.08 4.38zm-1.14 0c0-2.19-.075-2.97-.75-3.66a2.535 2.535 0 0 0-1.845-.75c-.72 0-1.35.255-1.845.75-.675.69-.75 1.47-.75 3.66 0 2.19.075 2.97.75 3.66.495.495 1.125.75 1.845.75s1.35-.255 1.845-.75c.675-.69.75-1.47.75-3.66zm14.97 0c0 1.635 0 3.195-.945 4.215-.72.78-1.605 1.125-2.805 1.125h-3.66V46.32h3.66c1.2 0 2.085.345 2.805 1.125.945 1.02.945 2.58.945 4.215zm-1.14 0c0-1.485-.015-2.805-.705-3.54-.54-.6-1.29-.78-2.1-.78h-2.325v8.64h2.325c.81 0 1.56-.18 2.1-.78.69-.735.705-2.055.705-3.54zM270.463 57h-1.215l-.855-2.415h-4.665L262.873 57h-1.215l3.93-10.68h.96L270.463 57zm-2.4-3.405l-1.98-5.64-2.01 5.64h3.99zm10.35-6.255v-1.02h-7.32v1.02h3.09V57h1.14v-9.66h3.09zm8.625 9.66v-1.02h-5.49v-3.855h4.68v-1.02h-4.68V47.34h5.49v-1.02h-6.63V57h6.63zm7.59-8.04c0-1.605-1.23-2.73-2.805-2.73-1.62 0-2.82 1.215-2.82 2.745h1.08c0-.945.675-1.785 1.74-1.785 1.005 0 1.725.765 1.725 1.77 0 .51-.21.855-.495 1.275l-1.215 1.755c-.315.45-.465.825-.465 1.41v.6h1.08v-.585c0-.24.09-.6.27-.87l1.23-1.77c.39-.57.675-1.11.675-1.815zm-2.07 8.04v-1.26h-1.29V57h1.29z" fill="#8E9297" />
</g>
</g>
</svg>
</dd>
<dd class="u-m-l-0 u-m-t-1">
<a href="https://internet.nl" target="_blank" class="u-link-normal color-cyberspace">Internet.nl</a> is an initiative of the Internet community and the Dutch government.
</dd>
</dl>
</div>
<div class="grid-auto">
<dl class="u-list-clean u-font-size-medium">
<dt class="u-weight-bold">Programversion</dt>
<dd class="u-m-l-0 u-m-b-1">v1.1.0.6</dd>
<dt class="u-weight-bold">API-version</dt>
<dd class="u-m-l-0">Internetkollen-API 1.0</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="site__footer">
<div class="wrapper-fluid">
<footer class="o-footer" id="siteFooter">
<div class="row">
<div class="grid-18 o-footer__info">
<div class="row">
<div class="grid-18 grid-lg-9 o-footer__info__freetext">
Bredbandskollen är ett oberoende
konsumentverktyg som drivs av <a class='o-footer__link' href='https://internetstiftelsen.se'>Internetstiftelsen</a>.
Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation. Vi verkar
för ett internet som bidrar positivt till människan och samhället. Vi ansvarar för internets
svenska toppdomän .se och sköter drift och administration av toppdomänen .nu. Intäkterna
från affärsverksamheten finansierar en rad satsningar i syfte att möjliggöra att människor
kan nyttja internet på bästa sätt, och stimulera kunskapsdelning och innovation med
inriktning på internet.
</div>
<div class="grid-18 grid-lg-9 o-footer__info__contact">
<div class="row o-footer__info__contact__row-first">
<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address1">
<ul class='u-list-clean o-footer__info__contact__address'>
<li class='o-footer__info__contact__address__li'>Internetstiftelsen</li>
<li class='o-footer__info__contact__address__li'>Hammarby Kaj 10D</li>
<li class='o-footer__info__contact__address__li'>Box 92073</li>
<li class='o-footer__info__contact__address__li'>120 07 Stockholm</li>
</ul>
</div>
<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address2">
<ul class='u-list-clean o-footer__info__contact__address'>
<li class='o-footer__info__contact__address__li'>E-post: <a class='o-footer__link' href='mailto:info@bredbandskollen.se'>info@bredbandskollen.se</a></li>
<li class='o-footer__info__contact__address__li'>Telefon: <a class='o-footer__link' href='tel:084523500'>08-452 35 00</a></li>
<li class='o-footer__info__contact__address__li'>Organisationsnummer: 802405-0190</li>
</ul>
</div>
</div>
<div class="row o-footer__info__contact__row-second">
<div class="grid-19 grid-md-9 o-footer__info__ISO">
<a href="https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf" class="o-footer__link o-footer__external-link">
<img src="https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
<span>Certifierade enligt ISO/IEC<br>27001:2013</span>
</a>
</div>
<div class="grid-19 grid-md-9 o-footer__info__CC">
<a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
<img class="o-footer__external-logo o-footer__external-logo--cc" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="Creative Commons licens<br>Erkännande 4.0 Internationell">
<span>Creative Commons licens<br>Erkännande 4.0 Internationell</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-18 o-footer__logotypes">
<div class="row">
<div class="o-footer__logotypes__item">
<a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>'En årlig studie av svenska folkets internetvanor</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Internetdagarna är en konferens som arrangeras av Internetstiftelsen</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://goto10.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen</span>
</div>
</div>
</a>
</div>
<!--<div class="o-footer__logotypes__item">
<a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen</span>
</div>
</div>
</a>
</div>-->
<div class="o-footer__logotypes__item">
<a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Ett digitalt museum som byggts, och kureras av Internetstiftelsen</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare</span>
</div>
</div>
</a>
</div>
<!--<div class="o-footer__logotypes__item">
<a href="https://internetstiftelsen.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetstiftelsen" src="https://static.internetstiftelsen.se/images/logotypes/internetstiftelsen.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2></h2>
<span>Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället</span>
</div>
</div>
</a>
</div>-->
</div>
</div>
</div>
<div class="row">
<div class="u-p-y-1 o-footer__bottom-links">
<nav>
<ul class="u-list-clean display-flex">
<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
<li class="u-p-x-1"><button id="ot-sdk-btn" class="o-footer__link o-footer__about-link ot-sdk-show-settings">Anpassa kakor</button></li>
</ul>
</nav>
</div>
</div>
</footer>
</div>
</div>
</div>
<style>
.chart-container {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="https://cdn.lordicon.com/lordicon-1.1.0.js"></script>
<div class="site u-z-index-foreground" id="site">
<div class="site__header" id="siteHeader">
<div class="u-position-relative">
<header class="o-header">
<div class="wrapper">
<div class="row justify-content-between align-items-center flex-nowrap">
<div class="grid-auto">
<a href="/" class="o-header__logo-link">
<span class="o-header__logo">
<img class="logotype" src="https://static.internetstiftelsen.se/images/logotypes/internetkollen.svg" alt="logotyp">
</span>
<span class="u-visuallyhidden">Till startsidan</span>
</a>
</div>
<div class="grid u-hide-sm">
<h1 id="portal-title" data-default="Internetkollen" class="u-b-0 u-b-l-1 u-b-solid u-b-concrete display-flex u-p-y-1 u-p-x-2 u-m-y-1 u-font-size-medium u-weight-normal">Test för moderna internetstandarder</h1>
</div>
<div class="grid">
<nav class="a-main-menu" aria-label="Huvudmeny">
<ul class="a-main-menu__list">
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Testa själv</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link is-current">
<span class="a-main-menu__list__text">Hälsoläget</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Om</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Hjälp</span>
</a>
</li>
<li class="u-hidden-mobile">
<a href="#" class="a-main-menu__list__link">
<span class="a-main-menu__list__text">Kontakt</span>
</a>
</li>
<li class="u-hide-xl-up">
<button type="button" class="a-main-menu__list__link" aria-expanded="false" data-a11y-toggle="dropdown">
<span class="a-main-menu__list__text">Meny</span>
<div class="icon-arrow-down"></div>
</button>
<ul id="dropdown" class="a-main-menu__subnav a-main-menu__subnav--right-aligned u-box-shadow-card">
<li class="a-main-menu__subnav__item">
<a href="#">Testa själv</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Hälsoläget</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Om</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Hjälp</a>
</li>
<li class="a-main-menu__subnav__item">
<a href="#">Kontakt</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="site__main" id="siteMain">
<div class="u-p-2 background-snow display-flex justify-content-end align-items-center u-b-solid u-b-b-1 u-b-x-0 u-b-t-0 u-b-concrete">
<label for="history" class="u-m-r-1">Historiska tester</label>
<select name="history" id="history" class="a-select">
<option value="0" disabled selected>Välj datum</option>
<option value="1">2025-10-01 (latest)</option>
<option value="1">2025-09-01</option>
<option value="1">2025-08-01</option>
</select>
</div>
<div class="wrapper u-p-t-2 u-p-b-8">
<div class="row">
<main class="grid-18">
<section class="row justify-content-center">
<div class="grid-18 grid-md-12 u-p-t-4 u-m-b-2">
<h1 class="supersize u-align-center">
Hälsoläget - 1200 samhällskritiska domäner
</h1>
<p class="preamble u-align-center">
Sveriges Hälsoläget övervakar webb- och e-postsäkerhetskonfigurationen för Sveriges främsta internettjänster. Tjänsten drivs av <a href="">Internetstiftelsen.</a>
</p>
</div>
</section>
<section>
<div class="row justify-content-center u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<span class="a-meta justify-content-center u-m-t-6">Data from: 2025-10-01</span>
<h2 class="alpha u-align-center">Infrastructure Configuration Overview</h2>
<p class="u-align-center">Key aspects of web application and email infrastructure configuration and security.</p>
</div>
<div class="grid-18 grid-md-6">
<div class="chart-container" id="container"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">Web Configuration</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 507 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 366 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 169 },
];
const container = document.getElementById("container");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong><strong style="font-size: ${18 * fontScale}px; margin: 0; line-height:2;">Well configured</strong><span style="font-size: ${18 * fontScale}px; margin: 0;">507 av 1054</span></div>`;
const svg = d3.select("#container")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-md-6">
<div class="chart-container" id="container2"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">E-mail Configuration</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 635 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 75 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 150 },
];
const container = document.getElementById("container2");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">62%</strong><strong style="font-size: ${18 * fontScale}px; margin: 0; line-height:2;">Well configured</strong><span style="font-size: ${18 * fontScale}px; margin: 0;">635 av 1030</span></div>`;
const svg = d3.select("#container2")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Web Application Configuration</h2>
<p class="u-align-center">Key aspects of web application security of the hosts monitored by this dashboard.</p>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container3"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HTTPS</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 49 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 40 },
{ name: "Sites well-configured HTTP", value: 11 },
];
const container = document.getElementById("container3");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong></div>`;
const svg = d3.select("#container3")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container4"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HTTPS Redirection</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 22 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 33 },
{ name: "Sites whose HTTP configuration has errors or lacks critical features", value: 55 },
];
const container = document.getElementById("container4");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">22%</strong></div>`;
const svg = d3.select("#container4")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container5"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HSTS</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 92 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 5 },
{ name: "Sites whose HTTP configuration has errors or lacks critical features", value: 3 },
];
const container = document.getElementById("container5");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">92%</strong></div>`;
const svg = d3.select("#container5")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container6"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">HSTS Preloaded</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 3 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 70 },
{ name: "Sites whose HTTP configuration has errors or lacks critical features", value: 27 },
];
const container = document.getElementById("container6");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">3%</strong></div>`;
const svg = d3.select("#container6")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Email Infrastructure Configuration</h2>
<p class="u-align-center">Key aspects of email security of the hosts monitored by this dashboard.</p>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container7"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">STARTTLS</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 49 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 40 },
{ name: "Sites well-configured HTTP", value: 11 },
];
const container = document.getElementById("container7");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong></div>`;
const svg = d3.select("#container7")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container8"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">DANE</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 22 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 33 },
{ name: "Sites whose HTTP configuration has errors or lacks critical features", value: 55 },
];
const container = document.getElementById("container8");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">22%</strong></div>`;
const svg = d3.select("#container8")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container9"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">SPF</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 92 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 5 },
{ name: "Sites whose HTTP configuration has errors or lacks critical features", value: 3 },
];
const container = document.getElementById("container9");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">92%</strong></div>`;
const svg = d3.select("#container9")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container10"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">DMARC</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 3 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 70 },
{ name: "Sites whose HTTP configuration has errors or lacks critical features", value: 27 },
];
const container = document.getElementById("container10");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">3%</strong></div>`;
const svg = d3.select("#container10")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Domain Name Security Overview</h2>
<p class="u-align-center">Key aspects of DNS configuration and security; only DNSSEC at the moment.</p>
</div>
<div class="grid-18 grid-sm-9 grid-md-3">
<div class="chart-container" id="container11"></div>
<span class="a-meta u-display-block u-align-center u-m-b-2 u-m-t-1">DNSSEC</span>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 49 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 40 },
{ name: "Sites well-configured HTTP", value: 11 },
];
const container = document.getElementById("container11");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">49%</strong></div>`;
const svg = d3.select("#container11")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#d8d8d8", "#8E9297"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
</section>
<section>
<div class="row justify-content-around u-p-b-2">
<div class="grid-18 u-m-b-2">
<hr>
<h2 class="alpha u-align-center u-m-t-6">Web Configuration by Group</h2>
<p class="u-align-center">Key aspects of web application security, on per group basis.</p>
</div>
</div>
<div class="row align-items-center justify-content-between">
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<a href="" class="u-link-default u-display-inline-block"><h4 class="u-p-b-0 u-m-b-0">Banker</h4></a><br>
<span class="color-granit u-font-size-medium-plus">95 hosts</span>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<div class="chart-container" id="container12"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 19 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 75 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 6 },
];
const container = document.getElementById("container12");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">19%</strong><span style="text-align:center;font-size: ${30 * fontScale}px; margin: 0;">18 av 98</span></div>`;
const svg = d3.select("#container12")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS</span>
<div id="chart" class="line-chart"></div>
<strong>49%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 507 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 366 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 169 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Redirection</span>
<div id="chart2" class="line-chart"></div>
<strong>68%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 68 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 13 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 9 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart2")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HSTS</span>
<div id="chart3" class="line-chart"></div>
<strong>37%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 37 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 25 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 38 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart3")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Preloaded</span>
<div id="chart4" class="line-chart"></div>
<strong>4%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 4 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 68 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 28 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart4")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">DNSEC</span>
<div id="chart5" class="line-chart"></div>
<strong>22%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 22 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 40 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 38 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart5")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row">
<div class="grid-18">
<hr>
</div>
</div>
<div class="row align-items-center justify-content-between">
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<a href="" class="u-link-default u-display-inline-block"><h4 class="u-p-b-0 u-m-b-0">Försäkringsbolag</h4></a><br>
<span class="color-granit u-font-size-medium-plus">28 hosts</span>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-align-center u-p-y-2">
<div class="chart-container" id="container13"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 63 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 15 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 22 },
];
const container = document.getElementById("container12");
const containerWidth = container.clientWidth || window.innerWidth;
const size = Math.min(containerWidth, window.innerHeight, 600);
const width = size;
const height = size;
const radius = Math.min(width, height) / 2;
const innerRadius = radius * 0.6;
const fontScale = size / 320;
const title = `<div style="line-height: 1;display: flex; flex-direction: column; justify-content: center; align-items: center;"><strong style="font-size: ${65 * fontScale}px; font-weight: bold; margin: 0;">63%</strong><span style="text-align:center;font-size: ${30 * fontScale}px; margin: 0;">14 av 28</span></div>`;
const svg = d3.select("#container13")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#ffce2e", "#ff4069"]);
const pie = d3.pie()
.value(d => d.value)
.sort(null);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
const titleGroup = svg.append("foreignObject")
.attr("width", innerRadius * 2)
.attr("height", innerRadius * 2)
.attr("x", -innerRadius)
.attr("y", -innerRadius)
.append("xhtml:div")
.style('height', '100%')
.style('width', '100%')
.style('display', 'grid')
.style('place-items', 'center')
.style('pointer-events', 'none')
.html(title);
const arcs = svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => color(d.data.name))
.attr("stroke", "white")
.attr("stroke-width", 2)
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.data.name}</strong><br>Value: ${d.data.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS</span>
<div id="chart6" class="line-chart"></div>
<strong>49%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 507 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 366 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 169 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart6")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Redirection</span>
<div id="chart7" class="line-chart"></div>
<strong>68%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 68 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 13 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 9 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart7")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HSTS</span>
<div id="chart8" class="line-chart"></div>
<strong>37%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 37 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 25 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 38 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart8")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">HTTPS Preloaded</span>
<div id="chart9" class="line-chart"></div>
<strong>4%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 4 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 68 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 28 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart9")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
<div class="grid-18 grid-sm-9 grid-lg-2 u-p-y-2">
<span class="u-font-size-medium">DNSEC</span>
<div id="chart10" class="line-chart"></div>
<strong>22%</strong>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const data = [
{ name: "Sites well-configured HTTPS", value: 22 },
{ name: "Sites whose HTTPS configuration has smaller problems or lacks important features", value: 40 },
{ name: "Sites whose HTTPS configuration has errors or lacks critical features", value: 38 },
];
const width = 1000;
const height = 20;
const total = d3.sum(data, d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(["#25c279", "#8E9297", "#d8d8d8"]);
const svg = d3.select("#chart10")
.append("svg")
.attr("width", "100%")
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
const x = d3.scaleLinear()
.domain([0, total])
.range([0, width]);
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "white")
.style("padding", "10px")
.style("border-radius", "5px")
.style("pointer-events", "none")
.style("opacity", 0)
.style("font-family", "Arial, sans-serif")
.style("font-size", "14px")
.style("max-width", "300px");
let xOffset = 0;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => {
const pos = xOffset;
xOffset += x(d.value);
return pos;
})
.attr("y", 0)
.attr("width", d => x(d.value))
.attr("height", height)
.attr("fill", d => color(d.name))
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 0.8);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<strong>${d.name}</strong><br>Value: ${d.value}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(200)
.attr("opacity", 1);
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
</script>
</div>
</div>
<div class="row">
<div class="grid-18">
<hr>
</div>
</div>
</section>
</main>
</div>
</div>
</div>
{{> @pre-footer }}
<div class="site__footer">
{{> @footer footer_text="Bredbandskollen är ett oberoende
konsumentverktyg som drivs av <a class='o-footer__link' href='https://internetstiftelsen.se'>Internetstiftelsen</a>.
Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation. Vi verkar
för ett internet som bidrar positivt till människan och samhället. Vi ansvarar för internets
svenska toppdomän .se och sköter drift och administration av toppdomänen .nu. Intäkterna
från affärsverksamheten finansierar en rad satsningar i syfte att möjliggöra att människor
kan nyttja internet på bästa sätt, och stimulera kunskapsdelning och innovation med
inriktning på internet." ISO_text="Certifierade enligt ISO/IEC<br>27001:2013"
CC_license="Creative Commons licens<br>Erkännande 4.0 Internationell"
ISO_image="https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg"
ISO_link="https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf"
contact_1="<ul class='u-list-clean o-footer__info__contact__address'><li class='o-footer__info__contact__address__li'>Internetstiftelsen</li><li class='o-footer__info__contact__address__li'>Hammarby Kaj 10D</li><li class='o-footer__info__contact__address__li'>Box 92073</li><li class='o-footer__info__contact__address__li'>120 07 Stockholm</li></ul>"
contact_2="<ul class='u-list-clean o-footer__info__contact__address'><li class='o-footer__info__contact__address__li'>E-post: <a class='o-footer__link' href='mailto:info@bredbandskollen.se'>info@bredbandskollen.se</a></li><li class='o-footer__info__contact__address__li'>Telefon: <a class='o-footer__link' href='tel:084523500'>08-452 35 00</a></li><li class='o-footer__info__contact__address__li'>Organisationsnummer: 802405-0190</li></ul>"
site_description_1="'En årlig studie av svenska folkets internetvanor"
site_description_2="Internetdagarna är en konferens som arrangeras av Internetstiftelsen"
site_description_3="Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen"
site_description_4="Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen"
site_description_5="Ett digitalt museum som byggts, och kureras av Internetstiftelsen"
site_description_6="Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan"
site_description_7="Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare"
site_description_8="Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället"
}}
</div>
</div>
<style>
.chart-container {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
</style>
/* No context defined. */
No notes defined.