Skip to main content
SimilarExport ZIP
100%

Assignment 2_task 6(ii)

✓ Published0🌍 Public
KKeerthiAnnem
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

This example displays a single-path SVG map of Canada, rendered using a Mercator projection fitted to the country’s boundaries. The code loads world country geometries from the world-atlas TopoJSON file, filters for Canada via `topojson.feature`, and projects it with `d3.geoMercator` and `d3.geoPath`. The resulting vector shape is appended to an SVG element with no additional styling or interactivity.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 8 Canada

This example displays a map of Canada using a Mercator projection fitted to the country’s geographic boundaries. The visualization renders the nation’s outline as a single SVG path, shaded in black against a white background for clear contrast. The code loads world country geometries from the World Atlas TopoJSON dataset, extracts Canada’s feature, and draws it with d3.geoPath coupled with d3.geoMercator. It relies on d3.json for data fetching, topojson-client for feature extraction, and appends the resulting SVG to the page.

JJayanthKumarkoni
87% match
Loading thumbnail…

Assignment2_Task6_CountryMap

This example displays a map of Greenland rendered as a filled SVG path against a blank background. It loads geographic data from the world-atlas TopoJSON collection, extracts the Greenland feature using `topojson.feature`, and fits a `d3.geoMercator` projection to the country’s bounds with `fitSize`. The resulting shape is drawn on an SVG canvas using a `d3.geoPath` generator. D3 v5 and the topojson-client library are loaded via CDN to handle the data processing and map rendering.

Rrikhitakoganti12
83% match
Loading thumbnail…

Assignment2_question6

This example displays a static map of the United States rendered as an SVG path. It extracts the country’s geometry from a TopoJSON dataset loaded from the world-atlas package, then projects it using `d3.geoAlbersUsa` and draws it with `d3.geoPath`. The map is fitted to a 960×500 viewport and appended to the page body via D3 v5.

Vvineelaramulapalli32
82% match
Loading thumbnail…

Canada p2

This example displays a map of Canada using a conic conformal projection, with SVG paths outlining the country's boundaries and small circles marking the starting point of each arc in the TopoJSON data. The visualization is built with D3 v5, using `d3.geoPath` and `topojson.mesh` to render the geographic shapes, while the projection is configured with specific parallels and rotation. The data originates from a local JSON file containing topology information, and the map is drawn within an SVG canvas.

Kkasalwelengwe@gmail.com
82% match
Loading thumbnail…

Canada Map

This example displays a static choropleth map of Canada rendered as SVG paths. It loads GeoJSON data from `canada.json` and uses `topojson.feature` to convert the TopoJSON collection. A Mercator projection (`d3.geoMercator`) centers the country, with `d3.geoPath` generating the path data for each province. The map applies a uniform gray fill and dark strokes, using D3 v7 with a standard SVG element.

GGogineni44
81% match
Loading thumbnail…

Assignment 2 Question 6

This example displays an interactive orthographic globe of world countries, rendered as SVG paths with a sky-blue sphere and light-green landmasses that turn maroon on hover. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas repository. The map supports pan and zoom through D3’s `zoom` behavior, which applies a transform to the entire SVG, while country features are generated using TopoJSON’s `feature` method.

Lleftymadi
81% match
Loading thumbnail…

Assignment2_Task6

This visualization displays an interactive world map using a spherical representation with geographic country boundaries. The map is rendered as SVG with an equirectangular projection, allowing users to zoom the entire globe. Countries are colored pale green with black borders and turn white when hovered. The code uses `d3.geoPath` and `d3.geoEquirectangular` for map rendering, `d3.zoom` for pan-and-zoom interactions, and the `topojson` `feature` method to convert TopoJSON data from the world-atlas dataset into GeoJSON for drawing country paths.

Rrikhitakoganti12
80% match
Loading thumbnail…

Activity 8 Task 5-2 Country

This example displays a map of India rendered as an SVG path, centered within a 960-by-500 viewport. It uses D3 version 5 and TopoJSON to load the world-atlas dataset, extract the country’s geometry by name, and project it with a Mercator projection fitted to the country’s bounds. The `d3.geoPath` generator then draws the boundary, with no additional styling or interactive elements.

VVishnu Sudireddy
80% match