Dot Plot with Date Scale and Axis
This example shows a collapsible tree diagram that maps the hierarchical structure of global water footprint data, using a date scale and axis metaphor to organize the hierarchy. The visualization is rendered with D3 v3 using SVG and animation. Rooted at “Water,” the tree branches into country-level footprints and a detailed breakdown of the global average water consumption across agricultural, industrial, and domestic categories. Nodes are interactive—clicking toggles child visibility—while pink circular nodes and curved black links depict the hierarchy. The layout places the root on the left and expands horizontally by depth, with each level spaced 180 pixels, and nodes smoothly animate into place. Country nodes like the US, Germany, and Burundi are initially collapsed, revealing only on interaction, allowing the viewer to explore the nested structure of water footprint data. Although titled a "Dot Plot", it is actually a collapsible tree diagram rendered with SVG, using a date-scale-like axis metaphor in the visualization layout.
</script>
</body>
</html>
Write a concise description (approx 2-3 sentences) of the visualization for the gallery. Avoid writing
"this is an example of..." Focus on the content and on the visual design. Be
specific and mention the chart type. Note:
- The HTML file includes both the visible webpage and an embedded D3 script.
- The CSS styles might include "node", "link", "circle", etc. This is a standard D3 collapsible tree example.
- The data is about the water footprint. There is some inconsistency in the title and data, because the author may have been experimenting with other datasets.
- The actual example may display a tree diagram.
Your output will be evaluated as follows:
- If the description includes an explicit visualization type, mention of interaction, and describes visual encoding, then it passes.
A concise description is a 3-4 sentence paragraph (up to 400 characters) with a clear structure. It needs to identify a single visualization type, mention its central data and task(s), and list 2 to 3 visible marks+channels. Include a clear 1-sentence summary. Use present tense. Avoid invalid or empty href in <a>. Mentioning other details is allowed but keep it concise. Characters counts.
Output format: only the description, without any additional text before or after. No code block. No title.
A collapsible tree diagram displays the hierarchical structure of global water footprint data, with interactive circle nodes and text labels representing categories like agricultural and industrial consumption. The visualization uses a date-scaled axis to organize the hierarchy, where clicking a node expands or collapses its children with animated transitions along diagonal links. Pink-filled circles indicate collapsed parent nodes, while white-filled circles represent leaf nodes, with node labels positioned to the left or right based on depth. The dataset is encoded in the hierarchy, with each node’s “size” attribute reflecting water consumption values (e.g., 2,842 for the US, 3,136 for the UAE, 719 for Burundi). The chart updates smoothly when nodes are toggled, and the layout is structured around a left-to-right tree with adjustable depth. Interactions include clicking to expand/collapse branches, with the visualization focusing on the structural relationships of water footprint categories rather than using a date scale or axis as the title might suggest.