Skip to content
This repository has been archived by the owner on Jan 9, 2020. It is now read-only.

Commit

Permalink
prep for gh-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lislis
lislis committed Aug 13, 2019
1 parent c859109 commit b7901a1
Show file tree
Hide file tree
Showing 3 changed files with 325 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/datenquellen/d3.min.js
View file

Large diffs are not rendered by default.

49 changes: 49 additions & 0 deletions docs/datenquellen/data.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"nodes": [
{"id": "okpower", "group": 0, "label": "OK Power"},
{"id": "gruenerstrom", "group": 0, "label": "Grüner Strom"},
{"id": "ecotopten", "group": 3, "label": "EcoTopTen"},
{"id": "oekotest", "group": 3, "label": "ÖkoTest"},
{"id": "stromauskunft", "group": 2, "label": "Stromauskunft.de"},
{"id": "verivox", "group": 2, "label": "Verivox"},
{"id": "check24", "group": 2, "label": "Check24.de"},
{"id": "utopia", "group": 3, "label": "Utopia.de"},
{"id": "tuvnord", "group": 1, "label": "TÜV Nord"},
{"id": "omnicert", "group": 1, "label": "OmniCert"},
{"id": "robinwood", "group": 3, "label": "Robin Wood"}
],
"links": [
{"source": "utopia", "target": "gruenerstrom", "kind": 0},
{"source": "utopia", "target": "okpower", "kind": 0},
{"source": "utopia", "target": "tuvnord", "kind": 0},
{"source": "utopia", "target": "oekotest", "kind": 0},
{"source": "utopia", "target": "ecotopten", "kind": 0},
{"source": "oekotest", "target": "okpower", "kind": 0},
{"source": "oekotest", "target": "gruenerstrom", "kind": 0},
{"source": "oekotest", "target": "ecotopten", "kind": 0},
{"source": "ecotopten", "target": "okpower", "kind": 0},
{"source": "ecotopten", "target": "gruenerstrom", "kind": 0},
{"source": "stromauskunft", "target": "okpower", "kind": 0},
{"source": "stromauskunft", "target": "gruenerstrom", "kind": 0},
{"source": "stromauskunft", "target": "ecotopten", "kind": 0},
{"source": "stromauskunft", "target": "omnicert", "kind": 0},
{"source": "stromauskunft", "target": "tuvnord", "kind": 0},
{"source": "stromauskunft", "target": "oekotest", "kind": 1},
{"source": "stromauskunft", "target": "robinwood", "kind": 1},
{"source": "verivox", "target": "okpower", "kind": 1},
{"source": "verivox", "target": "gruenerstrom", "kind": 1},
{"source": "verivox", "target": "tuvnord", "kind": 1},
{"source": "check24", "target": "okpower", "kind": 1},
{"source": "check24", "target": "gruenerstrom", "kind": 1}
],
"groups": [
{"id": "label", "label": "Ökostromlabel"},
{"id": "cert", "label": "Zertifizierung"},
{"id": "comparison", "label": "Vergleichsportal"},
{"id": "other", "label": "Empfehlungslisten"}
],
"linkTypes": [
{"id": "includes", "label": "berücksichtigt"},
{"id": "mentions", "label": "erwähnt"}
]
}
274 changes: 274 additions & 0 deletions docs/datenquellen/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graph Ökostromanbieterinfos</title>
<style type="text/css">
html {
font: 16px sans-serif;
}
.links line {
stroke: #ccc;
marker-end: url(#triangle)
}

.nodes circle {
stroke: #fff;
stroke-width: 1px;
opacity: 0.9;
}

.tooltip {
position: absolute;
pointer-events: none;
padding: 12px;
border: 0px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.7);
}

.legend {
display: flex;
}

.legend div {
padding: 0 2em;
margin-bottom: .8rem;
}
.legend div:before {
content: "";
width: 1.3rem;
height: 1.3rem;
display: inline-block;
margin-right: .3rem;
}
.label:before {
background-color: forestgreen;
}
.cert:before {
background-color: yellowgreen;
}
.comparison:before {
background-color: slategrey;
}
.other:before {
background-color: dimgrey;
}

.mentions:before {
border-top: 3px dotted #999;
width: 3rem !important;
vertical-align: bottom;
height: 0.5em !important;
}
.includes:before {
border-top: 3px solid #999;
width: 3rem !important;
vertical-align: bottom;
height: 0.5em !important;
}

</style>
</head>
<body>
<h1>Verflechtung der Datenquellen für Ökostromanbieter</h1>
<svg width="960" height="600">
<defs>
<marker id="triangle" viewBox="0 0 25 25"
refX="30" refY="5"
markerUnits="strokeWidth"
markerWidth="10" markerHeight="20"
orient="auto">
<path d="M 0 0 L 25 5 L 0 10 z" fill="#cccccc"/>
</marker>
</defs>
</svg>
<script src="d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");

var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

var legend = d3.select("body")
.append("div")
.attr("class", "legend");



const data = d3.json("data.json").then(function (data) {
var simulation = d3.forceSimulation()
.nodes(data.nodes);

simulation
.force("charge_force", d3.forceManyBody().strength(40))
.force("center_force", d3.forceCenter(width / 2, height / 2))
.force("collision_force", d3.forceCollide(80));


var bars = legend.append("div")
.attr("class", "bar")
.selectAll("div")
.data(data.groups)
.enter()
.append("div")
.attr("class", (d) => d.id)
.html((d) => d.label)

var edges = legend.append("div")
.attr("class", "edges")
.selectAll("div")
.data(data.linkTypes)
.enter()
.append("div")
.attr("class", (d) => d.id)
.html((d) => d.label)


/* function onlyUnique(value, index, self) {
* return self.indexOf(value) === index;
* }
* var sizes_helper = data.nodes.map((x) => {
* return data.links
* .filter((y) => y.target == x.id)
* .length
* }).filter(onlyUnique).sort()
* var sizes = legend.append("div")
* .attr("class", "radi")
* .selectAll("div")
* .data(sizes_helper)
* .enter()
* .append("div")
* .attr("class", (d) => `size-${d}`)
* .html((d) => `${d} Verweise`)
*/

function getNumOfLinks(d) {
return data.links.filter(a => a.target == d.id).length;
}

function circleRadius(d) {
return getNumOfLinks(d) * 6 + 15;
}

function circleColor(d){
switch (d.group) {
case(0):
return "forestgreen";
case(1):
return "yellowgreen";
case(2):
return "slategrey";
case(3):
return "dimgrey";
}
}

function tickActions() {
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })

link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}

var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(data.links)
.enter().append("line")
.attr("stroke-width", 5)
.attr("stroke-dasharray", strokeStyle)
.attr("title", (d) => data.linkTypes[d.kind].label)
/* .on("mouseover", function(d) {
* div.transition()
* .duration(200)
* .style("opacity", .9);
* div
* .html(`<strong>${data.linkTypes[d.kind].label}</strong>`)
* .style("left", (d3.event.pageX) + "px")
* .style("top", (d3.event.pageY + 30) + "px");
* })
* .on("mouseout", function(d) {
* div.transition()
* .duration(500)
* .style("opacity", 0);
* }); */

var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("r", circleRadius)
.attr("fill", circleColor)
.attr("title", (d) => `${d.label} (${data.groups[d.group].label})`)
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div
.html(`<strong>${d.label}</strong>`)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 30) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});



function strokeStyle(d) {
if (d.kind == 0) {
return 0;
} else {
return 4;
}
}

var drag_handler = d3.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);

function drag_start(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}

function drag_drag(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}

function drag_end(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = d.x;
d.fy = d.y;
}

drag_handler(node)

simulation.on("tick", tickActions );

var link_force = d3.forceLink(data.links)
.id(function(d) { return d.id; })
simulation.force("links",link_force);

})
</script>
<body>
</html>

0 comments on commit b7901a1

Please sign in to comment.