aruna-rajeswari

@aruna-rajeswari·8 public vizzes

Fork of 明细能力匹配面板

Two interactive donut charts and a choropleth map visualize crime cases against women in India from 2001 to 2012, with the map colored by crime type and the donuts breaking down yearly totals by crime category and individual states. The visualization uses D3 v7 and the `topojson` library to render the map, while the donut charts and map update through dropdown menus that filter by year and crime type. Data comes from a CSV file hosted on GitHub, fetched via `fetchData()`, and the charts animate transitions using D3’s built-in `transition` methods.

Mar 8, 2023

Loading thumbnail…

Fork of worldmap

This example displays a natural Earth projection world map, with countries filled in light green against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method from topojson. The map is rendered as SVG paths, with the projection and path generation handled by `d3.geoNaturalEarth1` and `d3.geoPath`. A separate path outlines the globe’s sphere, while country borders use a subtle black stroke.

Mar 8, 2023

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This choropleth map visualizes world population data by country income group, using color intensity to show distribution across regions. The visualization supports interactive zooming and panning, with hover effects highlighting individual countries. Built with D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoMercator` for map rendering, while `scaleOrdinal` with `schemeReds` maps income categories to colors. A dynamic color legend animates its circles using transitions. Country boundaries and income classifications come from the World Atlas TopoJSON dataset, with a hover tooltip displaying country names.

Mar 8, 2023

Loading thumbnail…

Fork of Covid19 world map

This map visualizes cumulative COVID-19 cases per country as of June 6, 2021, using circle size to encode case counts over a natural Earth projection. Missing data appears in red, while countries with data are gray. The visualization loads spatial boundaries from TopoJSON and joins them with case counts from a CSV using `d3.csv` and `d3.json`. It employs `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, and `d3.scaleSqrt` for proportional symbol sizing, with zoom via `d3.zoom` and interactive tooltips.

Mar 8, 2023

Loading thumbnail…

Fork of worldmap

This fork of a world map shows country boundaries from the World Atlas TopoJSON dataset, with each country rendered as a light green SVG path that turns red on hover and displays its name in a tooltip. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate the geographic paths, and d3.zoom to enable panning and zooming on the map. Country outlines are stroked in black with low opacity, and the sphere background is filled with a blue color.

Mar 8, 2023

Loading thumbnail…

Fork of Fork of Cheap Tricks for Interaction

This interactive visualization displays a world map using a natural Earth projection, with countries rendered as light-green SVG paths that turn red on hover. The code leverages D3 v5’s `geoNaturalEarth1`, `geoPath`, and `zoom` APIs to enable panning and scaling via mouse or touch, transforming a grouped `<g>` element during zoom events. Country boundaries come from TopoJSON data in the world-atlas package, matched to names from a TSV file, with tooltips showing country names via appended `<title>` elements. The map is framed by a blue sphere path, and interaction is enhanced through CSS `:hover` styling.

Mar 1, 2023

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive world map displays country names as tooltips and highlights nations in red on hover. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render SVG paths from TopoJSON world-atlas data, with country names joined from a TSV file. Zooming and panning are enabled through `d3.zoom`, which applies transforms to the map group. The styling, including the blue ocean sphere and green countries, is defined in CSS with hover effects.

Mar 1, 2023

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This choropleth map of U.S. states displays the log number of COVID-19 positive cases per day over a seven-day average, using a threshold color scale with a sequential orange-red scheme. The visualization loads CSV data and TopoJSON geography, rendering SVG paths via `d3.geoPath` and `geoAlbersUsa` projection. A React-based `VoronoiOverlay` enables mouse hover interactions, while a custom legend component and appended `<title>` elements provide state-specific statistics like death tolls, test counts, and positivity rates.

Mar 1, 2023