Please explain what d3. treemap is

StudiousArgyle · March 2, 2023, 5:12pm

I need help with my FCC d3 treemap project.
here is the link.

I got all the tests to pass, but it doesn’t look right and I believe I may have missed the point of this exercise.
I know in general what a treemap is and how it’s made, but i don’t fully understand how to use the d3 treemap function.
An explanation would be helpful, because I am very sick of this project and am ready to be done, but it needs to be done right.

igorgetmeabrain · March 2, 2023, 5:40pm

Sorry, I don’t have time to go through your code right now but I can at least give you a pointer about what you should be trying to achieve.

This is my treemap: https://codepen.io/igorgetmeabrain/full/BawPJxb

Essentially it’s a rectangular grid where the size of each square represents the amount the movie grossed at the US box office. d3 cleverly tessellates it all into the grid for you, once you’ve divided the movies into genre categories. As with other d3 projects, you can mouseover each item to see more info. The key (on the right) is also important.

Whilst yours (somehow) passes all of the tests, it’s obviously not working as intended. Hopefully you can have a look at mine and see how you can tweak your existing code so that the treemap displays correctly?

r5.m5.g5.55 · March 2, 2023, 7:07pm

¡Hola!

@ StudiousArgyle

Esto te puede servir como punto de partida, es de la documentación oficial de D3 y a mi me ayudo bastante para completar el proyecto.

github.com

d3/d3-hierarchy/blob/v3.1.2/README.md#treemap

# d3-hierarchy

Many datasets are intrinsically hierarchical. Consider [geographic entities](https://www.census.gov/programs-surveys/geography/guidance/hierarchy.html), such as census blocks, census tracts, counties and states; the command structure of businesses and governments; file systems and software packages. And even non-hierarchical data may be arranged empirically into a hierarchy, as with [*k*-means clustering](https://en.wikipedia.org/wiki/K-means_clustering) or [phylogenetic trees](https://observablehq.com/@mbostock/tree-of-life).

This module implements several popular techniques for visualizing hierarchical data:

**Node-link diagrams** show topology using discrete marks for nodes and links, such as a circle for each node and a line connecting each parent and child. The [“tidy” tree](#tree) is delightfully compact, while the [dendrogram](#cluster) places leaves at the same level. (These have both polar and Cartesian forms.) [Indented trees](https://observablehq.com/@d3/indented-tree) are useful for interactive browsing.

**Adjacency diagrams** show topology through the relative placement of nodes. They may also encode a quantitative dimension in the area of each node, for example to show revenue or file size. The [“icicle” diagram](#partition) uses rectangles, while the “sunburst” uses annular segments.

**Enclosure diagrams** also use an area encoding, but show topology through containment. A [treemap](#treemap) recursively subdivides area into rectangles. [Circle-packing](#pack) tightly nests circles; this is not as space-efficient as a treemap, but perhaps more readily shows topology.

A good hierarchical visualization facilitates rapid multiscale inference: micro-observations of individual elements and macro-observations of large groups.

## Installing

If you use npm, `npm install d3-hierarchy`. You can also download the [latest release on GitHub](https://github.com/d3/d3-hierarchy/releases/latest). For vanilla HTML in modern browsers, import d3-hierarchy from Skypack:

```html
<script type="module">

This file has been truncated. show original

Termine ese proyecto hace un par de semanas y no me considero listo para explicarte pasp a paso como abordarlo, si ocupas ayuda en detelles mas puntuales posiblemente pueda ayudarte.

Solo te diria que los datos tal y como se encunetran en la API JSON son necesarios para aplicar los metodos D3 requeridos, veras un formato con la misma estructura en el enlace que te envio.

saludos

StudiousArgyle · March 3, 2023, 1:51pm

¡Muchas gracias! Puedo empezar a trabajar inmediatamente.

StudiousArgyle · March 3, 2023, 4:22pm

@igorgetmeabrain and @r5.m5.g5.55

Thanks for your help, I managed to get it figured out!

!Gracias por tu ayuda, finalmente yo lo resuelvó!