🌳 LinkedIn Job Posting Tree
< svg width="1300" height="700">
< script>
const data = {
n ame: "'inkedIn Job Postings"'
c hildren: [
{ {
name: "'rocs"'
children: [
{ {
name: "'ew York"'
children: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"' },
]
, } ,
{ {
name: "'os Angeles"'
children: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"'}
, ] ],
}
,
] ],
},
{
n ame: "'tealth"'
children: [
{ {
name: "'ustin"'
children: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"' },
] ],
},
{
n ame: "'hicago"'
children: [
{ name: "'ull Time"'},
{ name: "'art Time"'},
{ name: "'nternship"'},
{ name: "'ontract"' },
]
,
}
,
]
, } }, ] ],
};
c onst svg = d3.select("'svg',
idth = +svg.attr("'idth"',
eight = +svg.attr("'eight"';
const g = svg.
.append('g')
attr("'ransform"', 'ranslate(80,50)"';
c onst treeLayout = d3.
.tree()
size([height - 100, width - 250]);
c onst root = d3.hierarchy(data);
t reeLayout(root);
// Draw links
g .selectAll("'link"'
. data(root.links())
. enter()
.append("'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())
. enter()
. append("'g')
.attr("'lass"', 'ode"'
. attr("
'transform',
(d)=> `translate(${d.y},${d.x})`),
;
// Draw shapes based on depth
n ode.each(function( d) {
c onst g = d3.select(this);
if (d.depth === 0) {
g .append("'ath"'
.attr("
'd',
d3.symbol().type(d3.symbolDiamond).size(120)),
)
.attr("'ill"', 'lack"';
} else if (d.depth === 1) {
g .append("'ircle"'
.attr("'r' 8)
. attr("'ill"', 'urple"';
} else if (d.depth === 2) {
g .append("'ect"'
. attr("'x' -6)
. attr("'y' -6)
. attr("'idth"' 12)
. attr("'eight"' 12)
.attr("'ill"', 'range"';
} else {
g.append("'ath"'
.attr("
'd',
d3.symbol().type(d3.symbolStar).size(100)),
)
.attr("'ill"', 'odgerblue"';
} }
});
// Add labels
n ode.
append("'ext"'
.attr("'dy' 4)
.attr("'x', (d)=> d(.children ? -12 : 12)
)
. style("'ext-anchor"', (d) =>
d.children ? "'end' : 'tart"',
)
.text(d(d)=> d.data.name);
< /body>