Published
Edited
Dec 3, 2019
Insert cell
< 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"
}
]
}
]
},
]
}
];


// ************** Generate the tree diagram *****************
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) {

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 150; });

// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
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);

// Transition nodes to their new position.
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);

// Transition exiting nodes to the parent's new position.
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);

// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
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});
});

// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);


// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}

// Toggle children on click.
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>


Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more