D3.js Canvas Example

100%

D3.js Canvas Example

✓ Published0🌍 Public

Last edited Jun 8, 2023

Created on May 6, 2023

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`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

79% match

Loading thumbnail…

Untitled

This example displays a map of Canada loaded from a GeoJSON file and rendered as SVG paths using D3 v7. When the mouse moves over a province, the code positions an HTML tooltip div through its style attributes. The tooltip reveals the province name, sourced from the GeoJSON properties. The D3 geoPath and geoAlbers APIs handle the map projection and path generation, while province colors change via CSS :hover rules.

LLokeshBachu5

79% match

Loading thumbnail…

Untitled

This example displays a choropleth map of Canada using D3 v7, with provinces rendered as SVG paths via `d3.geoPath` and an Albers projection. Hovering over a province changes its fill color from green to red and triggers a tooltip div, positioned via mouse event coordinates, that shows the province name from the loaded GeoJSON data. The tooltip is shown and hidden by toggling a CSS class, and the map data is fetched from a GitHub-hosted GeoJSON file.

SSUSHMA CHIRRA

79% match

Loading thumbnail…

Untitled

This example displays a map of Canada using GeoJSON data, with each province rendered as an SVG path. On mouse movement over a province, a tooltip div appears and tracks the cursor, displaying the province name from the data properties. The tooltip is shown by removing its hidden class and repositioned via inline CSS, while the province’s fill color changes on hover using CSS rules. The code uses `d3.geoPath` with an Albers projection and loads data from a remote GitHub repository.

NNICHAPA

78% match

Loading thumbnail…

Canada Map

This example presents a choropleth-style map of Canada’s provinces, rendered as orange SVG paths with white strokes on a blue background. It uses `d3.json` to load the `provinces-10m.json` TopoJSON dataset from the `canada-atlas` package, then converts it to GeoJSON via `topojson.feature`. The `d3.geoPath` generator applies a `d3.geoMercator` projection with a scale of 1500 to draw each province boundary, with styling handled through static attributes.

NNitheeshSama

78% match

Loading thumbnail…

Untitled

This example shows an interactive map of Canada where hovering over a province highlights it in red and displays a tooltip with the province name. The tooltip follows the mouse position and is hidden on mouseout. The map is rendered as SVG paths using D3 v7’s `d3.geoPath` with a `d3.geoAlbers` projection, and the geographic data comes from a GeoJSON file hosted on GitHub. CSS classes control the hover color change and tooltip visibility.

MMohammad Shakirul Islam

77% 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

77% match

Loading thumbnail…

Untitled

This interactive map of Canada displays province names in a tooltip as the mouse moves over each region. Hovering a province turns it red via a CSS `:hover` rule, while the tooltip div follows the cursor and is hidden on mouse-out. The visualization uses d3.v7’s `d3.json` to load GeoJSON data and `d3.geoAlbers` projection with `d3.geoPath` to render the SVG paths. Tooltip positioning and visibility are managed through CSS classes and inline styles.

YYerlan Yeszhanov

77% match