Unable to display text label with D3 force layout [duplicate] - javascript

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
</body>
<script src="d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", function(d) {return d.r;})
.style("fill", function(d) { return color(d.group); })
node.append("title")
.text(function(d) { return d.name; });
node.append("text")
.text("A");
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</html>
The code above is using D3js to draw a Force-directed graph drawing from some data, and I just want to place some text on the circle so I use node.append("text") you can see it above.
But however when add it it does not work, there is still not text on the circle so I wonder how could it be????


SVG does not allow a text element inside an circle element. You should put the circle and the text element inside a common g. Try something like this (not tested):
var node = svg.selectAll(".node")
.data(graph.nodes).enter().append('g').classed('node', true);
node.append("circle")
.attr("r", function(d) {return d.r;})
.style("fill", function(d) { return color(d.group); })
.append("title")
.text(function(d) { return d.name; });
node.append("text")
.text("A");
And then instead of setting cx and cy on nodes, set the transform property on the g.node:
force.on("tick", function() {
// ...
node.attr("transform", function(d) { return 'translate(' + [d.x, d.y] + ')'; })
});

Related

D3.js - Text not showing up in node

I found this d3 code, and I am unable to put text to the nodes. I have seen some solutions to create a parent class for this but I am getting errors trying them out. The current code works but doesn't add text :(
Here's the plnkr link for the working code -
http://plnkr.co/edit/dqAaEhJnnK4i2nBsTaNu?p=preview
Also, this is the code
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<button id="clusterButton" type="button">Cluster</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="../netClustering.js"> </script>
<!-- <script type="text/javascript" src="groupInABox.js"> </script> -->
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
// var gb = GroupInABox(force, "");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("miserables.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.call(force.drag);
// node.append("title")
// .text(function(d) { return d.name; });
node.append("text")
.attr("dx", 12)
.attr("dy", "0.35em")
.text(function(d){ return d.name; });
// .call(force.drag);
// .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
d3.select("#clusterButton").on("click", function () {
netClustering.cluster(graph.nodes, graph.links);
svg.selectAll(".node").transition().duration(500).style("fill", function(d) { return color(d.cluster); });
});
});
</script>

You are appending a text to circle as child node. That will not render. A circle can't have a text. There are 2 ways, either define a new enter selection with the same data and append texts ,or create a g element append circle and text and on tick,vupdate transform attribute each tick. I did the first one, change the below part of your script and it will render:
// node.append("title")
// .text(function(d) { return d.name; });
var texts =svg.selectAll(".texts")
.data(graph.nodes)
.enter()
.append("text")
.attr("dx", 12)
.attr("dy", "0.35em")
.text(function(d){ return d.name; });
// .call(force.drag);
// .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
texts.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
});
You entire html:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<button id="clusterButton" type="button">Cluster</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="netClustering.js"> </script>
<!-- <script type="text/javascript" src="groupInABox.js"> </script> -->
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
// var gb = GroupInABox(force, "");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("miserables.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.call(force.drag);
var texts =svg.selectAll(".texts")
.data(graph.nodes)
.enter()
.append("text")
.attr("dx", 12)
.attr("dy", "0.35em")
.text(function(d){ return d.name; });
// .call(force.drag);
// .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
texts.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
});
d3.select("#clusterButton").on("click", function () {
netClustering.cluster(graph.nodes, graph.links);
svg.selectAll(".node").transition().duration(500).style("fill", function(d) { return color(d.cluster); });
});
});
</script>

Hide nodes on Mousedown in d3

I have an HTML file that reads a JSON graph file and displays in the browser
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 1280,
height = 960;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.fill); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.id; });
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
I have an attribute for each node called clique_nodes which is a list of nodes that need to displayed on mousedown (hide every other node in the graph on mousedown). How do I do this?

You should attach 'mousedown' event handler to your nodes where you filter the "clique_node" attribute and make their opacity 0.
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true)
.attr('clique_node', function(d,i){
if(d.attr === "clique_node"){
return true;
}
})
.on("mousedown", function(d,i){
d3.selectAll('.gnode').filter(function(d) {
if(d.attr !== "clique_node"){return d;}
})
.attr("opacity",0);
d3.selectAll('.link').filter(function(d) {
if(d.source.attr !== "clique_node" || d.target.attr !== "clique_node"){return d;}
})
.attr("opacity",0);
});
See the fiddle: https://jsfiddle.net/mcm3p2e9/1/

How to display source nodes of a clicked target?

How can I display the source nodes names of a clicked target node in a forced directed graph using D3?
The snippet below is from some example code for directed graphs by Mike Bostock. How can I go about modifying this base code so when a node is clicked on the graph, the target values of that node is displayed on the screen (in this case I would like to display the name attributes)?
For example the 0-th element in "nodes" is:
"nodes":[
{"name":"Myriel","group":1},
...
]
And in "links" the targets are define like so:
"links":[
{"source":1,"target":0,"value":1}, // Napoleon
{"source":2,"target":0,"value":8}, // Mlle.Baptistine
{"source":3,"target":0,"value":10}, // Mme.Magloire
{"source":3,"target":2,"value":6},
{"source":4,"target":0,"value":1}, // CountessdeLo
{"source":5,"target":0,"value":1}, // Geborand
{"source":6,"target":0,"value":1}, // Champtercier
{"source":7,"target":0,"value":1}, // Cravatte
{"source":8,"target":0,"value":2}, // Count
{"source":9,"target":0,"value":1}, // OldMan
...
{"source":11,"target":0,"value":5}, // Valjean
...
]
Then clicking on the node Myriel would display:
Napoleon,Mlle.Baptistine,Mme.Magloire,CountessdeLo,Geborand,Champtercier,Cravatte,Count,OldMan,Valjean
Myriel is located here in the graph:
Below is the JavaScript code:
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/9653f99dbf6050b0f28ceafbba659ac5e1e66fbd/miserables.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag)
.on("click",function(d){
var targets = graph.links.filter(function(i){
return i.target.name == d.name
});
tip.show( targets.map(function(i){ return i.source.name;}) );
});
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/9653f99dbf6050b0f28ceafbba659ac5e1e66fbd/miserables.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag)
.on("click",function(d){
var targets = graph.links.filter(function(i){
return i.target.name == d.name
});
tip.show( targets.map(function(i){ return i.source.name;}) );
});
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>

Add a click event on each node, then inside we can get all the targets by filtering the graph.links array such that we only have the elements who's target.name is the same as the clicked nodes name d.name. Once we have that you can use .map() to return the array with .source.name to give the name of those items inside targets:
.on("click",function(d) {
var targets = graph.links.filter(function(i){
return i.target.name==d.name;
});
tip.show( targets.map(function(i){ return i.source.name; }) );
});
var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.call(tip);
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/9653f99dbf6050b0f28ceafbba659ac5e1e66fbd/miserables.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag)
.on("click",function(d){
var targets = graph.links.filter(function(i){
return i.target.name == d.name
});
tip.show( targets.map(function(i){ return i.source.name;}) );
});
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
Now for easy display of those values the d3-tip library can be used. This would be initialized for the graph like so:
var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });
...
var svg = ..
svg.call(tip);
And finally the tip.show(...) function in the first code snippet will display those items on the graph.

D3.js force-directed graph from a JSON data file - not showing any nodes

I am a newbie in D3JS and I was trying to do a similar example to this one : http://bl.ocks.org/mbostock/4062045
I have generated this JSON file output.json and I try to get it running but nothing shows up!
{"nodes":[{"name":"Hiroyasu Nakata","group":1},{"name":"Kazuo Satoh","group":1},{"name":"Tyuzi Ohyama","group":1},{"name":"Yasufumi Fujiwara","group":1},{"name":"Youichi Nonogaki","group":1},{"name":"Yoshikazu Takeda","group":1},{"name":"N. Tamari","group":2},{"name":"S. H. Wemple","group":3},{"name":"Kun-Jing Lee","group":4},{"name":"Z. C. Huang","group":4},{"name":"J. C. Chen","group":4},{"name":"L. Cai","group":5},{"name":"S. Han","group":5},{"name":"G. May","group":5},{"name":"S. Kamra","group":5},{"name":"T. Krygowski","group":5},{"name":"A. Rohatgi","group":5},{"name":"Stephen Miller","group":7},{"name":"Paul H. Holloway","group":7}],"links":[{"source":1,"target":2},{"source":1,"target":3},{"source":1,"target":4},{"source":1,"target":5},{"source":1,"target":6},{"source":2,"target":3},{"source":2,"target":4},{"source":2,"target":5},{"source":2,"target":6},{"source":3,"target":4},{"source":3,"target":5},{"source":3,"target":6},{"source":4,"target":5},{"source":4,"target":6},{"source":5,"target":6},{"source":9,"target":10},{"source":9,"target":11},{"source":10,"target":11},{"source":12,"target":13},{"source":12,"target":14},{"source":12,"target":15},{"source":12,"target":16},{"source":12,"target":17},{"source":13,"target":14},{"source":13,"target":15},{"source":13,"target":16},{"source":13,"target":17},{"source":14,"target":15},{"source":14,"target":16},{"source":14,"target":17},{"source":15,"target":16},{"source":15,"target":17},{"source":16,"target":17},{"source":18,"target":19}]}
This is the HTML file :
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("output.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
What did I do wrong? And how can I fix it?
Thanks!

How to display a text when mouseover a node in D3 force layout

I am trying to display the text when I move the mouse over a node in Force-Directed Graph in D3.js. My problem is that when I move the mouse over any node, all the texts of these nodes are displayed. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.nodeDetail {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
node .text {
font: 12px sans-serif;
pointer-events: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="d3/d3.v3.min.js charset=UTF-8"></script>
<script>
var graph = {
"nodes":[
{"name":"Myriel","group":1},
{"name":"Napoleon","group":1},
{"name":"Mlle.Baptistine","group":1},
{"name":"Mme.Magloire","group":1},
{"name":"CountessdeLo","group":1}
],
"links":[
{"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":8},
{"source":3,"target":0,"value":10},
{"source":3,"target":2,"value":6},
{"source":4,"target":0,"value":1}
]
};
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var drawGraph = function(graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var gnodes = svg.selectAll('g.gnode')//('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.on("mouseover", function(d)
{
d3.select(this).transition()
.duration(750)
.attr("r", 15);
return labels.style("visibility", "visible");
})
.on("mouseout", function()
{
d3.select(this).transition()
.duration(750)
.attr("r", 5);
return labels.style("visibility", "hidden");//})
})
.call(force.drag);
var labels = gnodes.append("text")
.text(function(d) { return d.name; })
.style("visibility", "hidden");
/*gnodes.append("text")
.text(function(d) { return d.name; })
.style("visibility", "hidden");*/
force.on("tick", function() {
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; });
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
};
drawGraph(graph);
</script>
</body>
</html>
I tried to do the following codes but it did not work neither:
.on("mouseover", function(d)
{
d3.select(this).transition()
.duration(750)
.attr("r", 15);
d3.select(this).append(text)
.style("visibility", "visible");
})
How can I display the text that is related to a particular node when I move the mouse over that node? Could anyone please help me solve this problem. Thank you in advance.

This should help:
.on("mouseover", function(d)
{
d3.select(labels[0][d.index]).style("visibility","visible")
})
.on("mouseout", function(d)
{
d3.select(labels[0][d.index]).style("visibility","hidden")
})

Learning d3 myself here - also thanks very much to juvian
I find a more transparent way of coding this would be to say
.on("mouseover", function(d) {
d3.select(this).select("text").style("visibility", "visible")
})
which selects the object you hover over (a group), selects the text inside it and changes the style to visible. This also avoids the need to make a labels variable which gets a bit messy with the array indexing.

Categories

Resources