d3plus treemap provincias y departamentos

100%

d3plus treemap provincias y departamentos

✓ Published0🌍 Public

Last edited Jan 20, 2022

Created on Jul 7, 2018

This interactive treemap displays hierarchical data for provinces and departments, rendered with SVG and canvas using the D3plus library. The visualization animates transitions between levels of the hierarchy, with each rectangle sized proportionally to its value and colored to distinguish categories. Hovering reveals labels and tooltips, enabling exploration of the geographic administrative divisions. The example demonstrates D3plus's built-in treemap layout with support for smooth animated updates and interactive filtering.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 Provincie Nederland

This interactive map of Dutch provinces uses D3.js to display geographic boundaries and animate a zoom-and-pan interface. It fetches TopoJSON data from Cartomap, projects it with `d3.geoMercator`, and renders paths via `d3.geoPath`. Clicking a province highlights it in red and smoothly zooms using `d3.zoom` and `transform` transitions, while a custom dummy coordinate marker appears as a small circle. The SVG output includes subtle stroke opacity and a dark background for contrast.

Rralfz123

72% match

Loading thumbnail…

Departamentos Argentina - interactivo

This interactive visualization displays a zoomable map of Argentina’s departments, with each region filled in light green and labeled by its department and province in a hover tooltip. Built with D3.js and the d3-geo-projection extension, it uses a transverse Mercator projection centered on the country and renders geographic paths as SVG elements. The map draws from a public GeoJSON dataset of Argentine departments, while a zoom interaction, implemented via D3’s `zoom` event, adjusts the map’s transform. Hovering changes the fill color to pink, and the sphere background is light blue.

Jjeronimoek

70% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

70% match

Loading thumbnail…

D3.js Canvas Example

This interactive map displays the provinces of Ontario, Canada, using a custom Albers projection. Users can click on individual divisions to zoom in and highlight them in blue, with a reset function to restore the original view. Built with D3.js v5 and React, it fetches GeoJSON data from GitHub and renders paths using `d3.geoPath`, with zoom behavior driven by `d3.zoom` and color transitions applied via `transition.attrTween`.

PPedram

70% match

Loading thumbnail…

(Topojson)

This visualization displays an interactive map of Argentina, with each department and province rendered as a distinct geographic region. Users can hover over individual areas to see their names via a tooltip, and the map supports zooming and panning. It uses `d3.geoPath` with a `d3.geoTransverseMercator` projection to draw the shapes from TopoJSON data, alongside the `topojson` library's `feature` function for parsing. The zoom interaction is implemented using `d3.zoom` and `d3.event`, while the data is loaded from a remote JSON file containing department boundaries.

Ggeethanjalikotaru

70% match

Loading thumbnail…

Anv_ICE8_Argentina_(Topojson)

This example displays a choropleth-style map of Argentina’s provinces and departments, rendered with a Transverse Mercator projection and interactive zoom. The map shows administrative boundaries filled in green, with a title tooltip revealing each department’s name and province on hover. It uses D3’s `geoPath`, `geoTransverseMercator`, and `zoom` APIs, along with TopoJSON’s `feature` method, to load and draw geographic data from a GitHub-hosted JSON file. The SVG output includes a styled ocean sphere and country paths.

AAnvesh Chinta

70% match

Loading thumbnail…

Untitled

This example presents an interactive map of Canada that displays a tooltip with the name of each province on hover. The map is rendered as SVG using d3.v7, with province shapes generated via `d3.geoPath` and the Albers projection. On mouse movement over a province, a styled `div` tooltip is positioned and populated with the province’s name, while the province’s CSS class changes its fill color; on mouse-out, the tooltip is hidden. The geographic data is loaded as JSON from a remote gist.

Ssnehareddygurram

69% match

Loading thumbnail…

Untitled

This example shows an interactive map of Canada with SVG paths representing provinces, initially colored dark green. When the mouse hovers over a province, the CSS class changes to turn it red and a tooltip div appears, displaying information about the province. The tooltip is positioned and shown by modifying its CSS properties on mouse move, and hidden on mouse out. Built with D3.v7, it loads GeoJSON data from GitHub and renders paths using `d3.geoPath` with an Albers projection, while D3's `select` and `join` methods handle the interactive state changes.

PPedram

69% match