First of all sorry for eventual mistake i’m not fluent in english,
I begin a project with d3.js and i try to filter my data thanks to button.
Let me explain i want to get the name of Portfolio children to create my button.
And after it when click on it display a treemap with the children of Competences which his parent his the value of the button (see my Json File)
I never did D3js before i’m really lost
JSON FIle :
{
"name": "Portfolio",
"children": [
{
"name": "Htonic",
"children": [
{
"name": "Competences",
"children": [
{
"name": "Concevoir",
"children": [
{
"name": "encodage",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Comprendre",
"children": [
{
"name": "scénariser",
"value": 10,
"colname": "level3"
},
{
"name": "interview",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Exprimer",
"children": [
{
"name": "lumière",
"value": 10,
"colname": "level3"
},
{
"name": "cadrage",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Developper",
"children": [
{
"name": "encodage",
"value": 10,
"colname": "level3"
},
{
"name": "compression",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Entreprendre",
"children": [
{
"name": "encodage",
"value": 10,
"colname": "level3"
},
{
"name": "compression",
"value": 10,
"colname": "level3"
},
{
"name": "sémiologie",
"value": 10,
"colname": "level3"
}
]
}
]
},
{
"name": "Soft-Skills",
"children": [
{
"name": "Creativite",
"size": "1"
},
{
"name": "Curiosite",
"size": "2"
},
{
"name": "Adaptabilite",
"size": "3"
},
{
"name": "Perseverance",
"size": "4"
},
{
"name": "Empathie",
"size": "5"
}
]
},
{
"name": "Hard-Skills",
"children": [
{
"name": "Photoshop",
"taille": "1"
},
{
"name": "Illustrator",
"taille": "2"
},
{
"name": "Figma",
"taille": "3"
},
{
"name": "Canva",
"taille": "4"
},
{
"name": "Wordpress",
"taille": "5"
}
]
}
]
},
{
"name": "Trivial Trégor",
"children": [
{
"name": "Competences",
"children": [
{
"name": "Concevoir",
"children": [
{
"name": "Marsupilami",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Comprendre",
"children": [
{
"name": "scénariser",
"value": 10,
"colname": "level3"
},
{
"name": "interview",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Exprimer",
"children": [
{
"name": "lumière",
"value": 10,
"colname": "level3"
},
{
"name": "cadrage",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Developper",
"children": [
{
"name": "encodage",
"value": 10,
"colname": "level3"
},
{
"name": "compression",
"value": 10,
"colname": "level3"
}
]
},
{
"name": "Entreprendre",
"children": [
{
"name": "encodage",
"value": 10,
"colname": "level3"
},
{
"name": "compression",
"value": 10,
"colname": "level3"
},
{
"name": "sémiologie",
"value": 10,
"colname": "level3"
}
]
}
]
},
{
"name": "Soft-Skills",
"children": [
{
"name": "Creativite",
"size": "1"
},
{
"name": "Curiosite",
"size": "2"
},
{
"name": "Adaptabilite",
"size": "3"
},
{
"name": "Perseverance",
"size": "4"
},
{
"name": "Empathie",
"size": "5"
}
]
},
{
"name": "Hard-Skills",
"children": [
{
"name": "Photoshop",
"taille": "1"
},
{
"name": "Illustrator",
"taille": "2"
},
{
"name": "Figma",
"taille": "3"
},
{
"name": "Canva",
"taille": "4"
},
{
"name": "Wordpress",
"taille": "5"
}
]
}
]
}
]
}
JS File :
//Générer le Treemap avec D3.js
// Taille du graph
const margin = { top: 10, right: 10, bottom: 10, left: 10 },
width = 445 - margin.left - margin.right,
height = 445 - margin.top - margin.bottom;
// Choix div + taille du svg dans la div
const svg = d3.select("#treemap")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
`translate(${margin.left}, ${margin.top})`);
// Lecture données
d3.json("data-plus.json").then(function (data) {
// Trie des données de façon hiérarchique
const root = d3.hierarchy(data).sum(function (d) { return d.value }) // Compute the numeric value for each entity // Récupération de la valeur de chaque cellules
const color = d3.scaleOrdinal()
.domain(["Comprendre", "Concevoir", "Exprimer", "Developper", "Entreprendre"])
.range(["red", "orange", "yellow", "green", "blue"])
const opacity = d3.scaleLinear()
.domain([10, 30])
.range([.5, 1])
// Positionnement des cellules
d3.treemap()
.size([width, height])
.padding(2)
(root)
// Ajout des cellules
svg
.selectAll("rect")
.data(root.leaves())
.join("rect")
.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; })
.style("stroke", "black")
.style("fill", function (d) { return color(d.parent.data.name) })
.style("opacity", 1)
// Ajout des Mots-clés
svg
.selectAll("text")
.data(root.leaves())
.join("text")
.attr("x", function (d) { return d.x0 + 5 }) // Position texte (augmenter valeur pour bouger vers la droite)
.attr("y", function (d) { return d.y0 + 20 }) // Position txt Verticale ( augmenter pour faire descendre)
.text(function (d) { return d.data.name })
.attr("font-size", "12px")
.attr("fill", "white")
});
and HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<div class="button-container" id="buttons"></div>
<div id="treemap"></div>
<script src="treemap.js"></script>
</body>
</html>
I try with the enter() update() exit() method but i think how i filter my value is not correct
New contributor
Kilian is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.