🌳 LinkedIn Job Posting Tree
< svg width="950" height="500">
< script>
const data = {
n ame: "'inkedIn Job Postings"'
c hildren: [
{
n ame: "'rocs"'
children: [
{
n ame: "'ew York"'
c hildren: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"' },
] ],
},
{
n ame: "'os Angeles"'
children: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"' },
]
,
}
,
]
,
},
{ {
name: "'tealth"'
children: [
{
name: "'ustin"'
c hildren: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"'}
, ] ],
},
{
name: "'hicago"'
c hildren: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"'}
, ] ],
}
,
] ],
}
,
]
,
};
const svg = d3.select("'svg';
const width = +svg.attr("'idth"';
const height = +svg.attr("'eight"';
const margin = {
top: 20,
right: 80,
bottom: 20,
left: 60
},
innerWidth = width - margin.left - margin.right,
nnerHeight = height - margin.top - margin.bottom;
c onst g = svg.
append("'g')
.attr("
'transform',
`translate(${margin.left},${margin.top})`),
;
c onst root = d3.hierarchy(data);
c onst treeLayout = d3.
.tree()
size([innerHeight, innerWidth]);
treeLayout(root);
/ / Draw links
g .selectAll("'link"'
.data(root.links())
. join("'ath"'
. attr("'lass"', 'ink"'
.attr("
'd',
d3
linkHorizontal()
. x(d( )=> d.y)
. y(d( )=> d.x)),
;
// Draw nodes
const node = g.
selectAll("'node"'
.data(root.descendants())
. join("'g')
.attr("'lass"', 'ode"'
.attr("
'transform',
(d)=> `translate(${d.y},${d.x})`),
;
// Add shapes by depth
node.each(function (d) {
c onst g = d3.select(this);
if (d.depth === 0) {
g .append("'ath"'
.attr("
'd',
d3.symbol().type(d3.symbolDiamond).size(80)),
)
.attr("'ill"', 'lack"';
} else if (d.depth === 1) {
g .append("'ircle"'
.attr("'r' 6)
.attr("'ill"', 'urple"';
} else if (d.depth === 2) {
g .append("'ect"'
. attr("'x' -5)
. attr("'y' -5)
.attr("'idth"' 10)
.attr("'eight"' 10)
.attr("'ill"', 'range"';
} else {
g.append("'ath"'
.attr("
'd',
d3.symbol().type(d3.symbolStar).size(70)),
)
.attr("'ill"', 'odgerblue"';
} }
});
// Add labels
n ode.
append("'ext"'
. attr("'dy' 3)
. attr("'x', (d)=> d(.children ? -10 : 10)
)
. style("'ext-anchor"', (d) =>
d.children ? "'end' : 'tart"',
)
.text(d(d)=> d.data.name);
< /body>