< DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Journalists Killed in 2019</title>
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: #d7d7d7;
stroke-width: 2px;
}
.node text {
font: 10.5px Sans-Serif;
}
.link {
fill: #fff;
stroke: #d7d7d7;
stroke-width: 2px;
}
</style>
</head>
<body>
<header>
<p>This Interactive Visualisation aims to show the tragic number of journalists killed this year, categorised in two categories (motive of death confirmed or unconfirmed) and classified by the location of death. If you want to know more click <a href="https://cpj.org/">here</a><br />
</p>
</header>
</body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var treeData = [
{
"name": "Journalists killed in 2019",
"parent": "null",
"children": [
{
"name": "Motive confirmed",
"parent": "Journalists killed in 2019",
"children": [
{
"name": "Ghana",
"parent": "Motive confirmed",
"children": [
{
"name": "Ahmed Hussein-Suale Divela",
"parent": "Ghana"
}
]
},
{
"name": "Syria",
"parent": "Motive confirmed",
"children": [
{
"name": "Alaa Nayef al-Khader al-Khalidi",
"parent": "Syria"
},
{
"name": "Amjad Hassan Bakir",
"parent": "Syria"
},
{
"name": "Abdul Hameed al-Yousef",
"parent": "Syria"
},
{
"name": "Mohammed Hussein Rasho",
"parent": "Syria"
},
{
"name": "Saad Ahmed",
"parent": "Syria"
}
]
},
{
"name": "Mexico",
"parent": "Motive confirmed",
"children": [
{
"name": "Francisco Romero Diaz",
"parent": "Mexico"
},
{
"name": "Jorge Celestino Ruiz Vasquez",
"parent": "Mexico"
},
{
"name": "Nevith Condes Jaramillo",
"parent": "Mexico"
},
{
"name": "Rafael Murua Manriquez",
"parent": "Mexico"
},
{
"name": "Norma Sarabia Garduza",
"parent": "Mexico"
}
]
},
{
"name": "Philippines",
"parent": "Motive confirmed",
"children": [
{
"name": "Eduardo Dizon",
"parent": "Philippines"
}
]
},
{
"name": "Somalia",
"parent": "Motive confirmed",
"children": [
{
"name": "Mohamed Sahal Omar",
"parent": "Somalia"
}
]
},
{
"name": "UK",
"parent": "Motive confirmed",
"children": [
{
"name": "Lyra Mckee",
"parent": "UK"
}
]
},
{
"name": "Haiti",
"parent": "Motive confirmed",
"children": [
{
"name": "Nehemie Joseph",
"parent": "Haiti"
}
]
},
{
"name": "Chad",
"parent": "Motive confirmed",
"children": [
{
"name": "Obed Nangbatna",
"parent": "Chad"
}
]
},
{
"name": "Honduras",
"parent": "Motive confirmed",
"children": [
{
"name": "Leonardo Gabriel Hernandez",
"parent": "Honduras"
}
]
},
{
"name": "Nigeria",
"parent": "Motive confirmed",
"children": [
{
"name": "Precious Owolabi",
"parent": "Nigeria"
}
]
},
{
"name": "Ukraine",
"parent": "Motive confirmed",
"children": [
{
"name": "Vadym Komarov",
"parent": "Ukraine"
}
]
}
]
},
{
"name": "Motive unconfirmed",
"parent": "Journalists killed in 2019",
"children": [
{
"name": "Honduras",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Edgar Joel Aguilar",
"parent": "Honduras"
}
]
},
{
"name": "Yemen",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Ziad al-Sharabi",
"parent": "Yemen"
}
]
},
{
"name": "Mexico",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Edgar Alberto Nava López",
"parent": "Mexico"
},
{
"name": "Jesús Eugenio Ramos Rodríguez",
"parent": "Mexico"
},
{
"name": "Omar Iván Camacho Mascareño",
"parent": "Mexico"
},
{
"name": "Rogelio Barragán Pérez",
"parent": "Mexico"
},
{
"name": "Telésforo Santiago Enríquez",
"parent": "Mexico"
},
{
"name": "Santiago Barroso Alfaro",
"parent": "Mexico"
}
]
},
{
"name": "Philippines",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Dindo Generoso",
"parent": "Philippines"
}
]
},
{
"name": "Pakistan",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Muhammad Bilal Khan",
"parent": "Pakistan"
}
]
},
{
"name": "Afghanistan",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Nadir Shah Sahibzada",
"parent": "Afghanistan"
},
{
"name": "Sultan Mahmoud Khairkhwah",
"parent": "Afghanistan"
}
]
},
{
"name": "Haiti",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Pétion Rospide",
"parent": "Haiti"
}
]
},
{
"name": "Brazil",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Romário Barros",
"parent": "Brazil"
},
{
"name": "Robson Giorno",
"parent": "Brazil"
}
]
},
{
"name": "Colombia",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Libardo Montenegro",
"parent": "Colombia"
},
{
"name": "Mauricio Lezama Rengifo",
"parent": "Colombia"
}
]
},
{
"name": "India",
"parent": "Motive unconfirmed",
"children": [
{
"name": "Katha Satyanarayana",
"parent": "India"
}
]
}
]
},
]
}
];
var margin = {top: 20, right: 170, bottom: 20, left: 170},
width = 900 - margin.right - margin.left,
height = 650 - margin.top - margin.bottom;
var i = 0,
duration = 1000,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "500px");
function update(source) {
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 150; });
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "#a0b2c9" : "#dbe4f0"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -13 : 13; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 7)
.style("fill", function(d) { return d._children ? "#e1be91" : "#f0dec8"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
link.transition()
.duration(duration)
.attr("d", diagonal);
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
</script>
</body>
</html>