ankita1mit

@ankita1mit·16 public vizzes

Arc Generator

This visualization displays asylum-seeking flows between countries on a world map using curved arcs that connect country centroids. When hovering over a country, arcs appear linking it to several pre-selected destinations, though the data shown represents a small sample rather than the full asylum.json dataset. The visualization uses an SVG rendering approach with D3 v5's geoNaturalEarth1 projection and geoPath to draw country boundaries, while custom arc-generating logic creates the connecting paths. The style.css file defines the map aesthetics, including light green country fills and red arcs.

Mar 27, 2020

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with points sized by city population, using data from the Simplemaps World Cities Database for cities with over 50,000 residents. D3’s `geoNaturalEarth1` projection and `geoPath` render the sphere, graticules, and land boundaries from the World Atlas TopoJSON. A `scaleSqrt` maps population values to circle radii up to 15 pixels, while React composes the SVG elements. The semi-transparent teal circles overlay a light gray landmass, with country borders and graticules providing geographic context.

Mar 19, 2020

Loading thumbnail…

Circles on Map

This visualization displays asylum seeker data on a world map using a natural Earth projection. Small black circles mark the approximate centroid of each country, with circle size not varying by value. The map is rendered with SVG paths and supports zoom and pan through d3.zoom. Data comes from a CSV file of asylum claims, loaded and joined with TopoJSON country boundaries using TopoJSON's feature method and d3.csv.

Mar 18, 2020

Loading thumbnail…

Untitled

This example displays a simple React application that renders a static HTML page. It does not include any data visualization, charts, or interactive graphics. The code consists of a minimal `index.html` file and a README, with no JavaScript for drawing or data processing. It functions as a bare-bones starter template for React projects, using the framework’s standard structure without additional libraries or APIs for visual output.

Mar 17, 2020

Loading thumbnail…

Make a Map

This example shows a natural Earth projection of the world, with countries rendered as semi-transparent green shapes against a blue ocean sphere. Using d3.geoPath and d3.geoNaturalEarth1, it projects geographic coordinates onto an SVG canvas. Country boundaries come from the world-atlas TopoJSON dataset, which is parsed with topojson.feature. The visualization demonstrates a straightforward choropleth-free map, highlighting the projection and path generation pipeline from raw TopoJSON data to interactive SVG paths.

Mar 17, 2020

Loading thumbnail…

Untitled

This visualization displays the number of asylum seekers arriving in Canada from various countries of origin between 1959 and 1970. It uses a red arc to connect Washington, D.C. and Beijing across an equirectangular projection of the world map. The map is rendered using the `d3.geo` API, with graticule, land, and boundary layers. The asylum data is loaded from a CSV file and joined with the country features from a TopoJSON world atlas.

Mar 17, 2020

Loading thumbnail…

Untitled

This visualization displays a world map with asylum seeker data, highlighting the flow of refugees from various countries to Canada over time. Using D3 version 3, the map employs a geographic equirectangular projection with graticules, land boundaries, and a red arc connecting two specific locations. The code loads TopoJSON world data to render land masses and country borders, while the asylum data is loaded from an external CSV file. The visualization demonstrates how geographic and temporal asylum patterns can be represented through interactive map-based data visualization.

Mar 17, 2020

Loading thumbnail…

Circles on Map

This visualization displays circles on a world map, with each circle positioned at the centroid of its corresponding country. The circles are rendered on top of countries colored in orange, using a natural Earth projection. The code loads asylum data from a CSV file and country geometries from TopoJSON, and uses `d3.geoPath` and `d3.geoCentroid` to project and place the circles. Zooming is enabled through `d3.zoom` on an SVG canvas.

Mar 17, 2020

Loading thumbnail…

Circles on Map

Mar 17, 2020

Loading thumbnail…

Circles on Map

This example displays a world map with circles positioned at the centroids of countries, sized to reflect their 2018 population estimates. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic boundaries with `d3.geoPath`, while circle radii are scaled with `d3.scaleSqrt`. Populated countries appear with teal circles, and gray or pink fills indicate data availability. The visualization loads population data from a CSV and country geometries from TopoJSON, and supports zooming through `d3.zoom`. Hovering reveals a tooltip with the region name and population count.

Mar 17, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map uses colors to display the economy category of each country, with an interactive color legend that filters the map. Clicking a legend item dims all countries not in that category, while hovering over a country turns it red. Built with D3 v5, the visualization uses `geoPath` and `geoNaturalEarth1` for map projection and `scaleOrdinal` with `schemeSpectral` for coloring. The code loads world country boundaries from TopoJSON and economy data from a TSV file using `d3.tsv` and the `topojson` library.

Mar 17, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5, displaying country boundaries as light green polygons on a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and renders it as SVG using `d3.geoPath` with the `geoNaturalEarth1` projection. The code processes the TopoJSON through the `topojson.feature` API and applies a `geoPath` generator to draw each country outline with stroke opacity styling.

Mar 17, 2020

Loading thumbnail…

Circles on a map

This visualization shows a world map colored by each country's economy category, with a legend displaying the color scale on the left side. The map uses a natural Earth projection, rendered as SVG paths with a blue ordinal color scheme. The code loads geographic data from world-atlas TopoJSON and country metadata from a TSV file, merging them via ISO country codes. Interaction includes zooming via d3.zoom and a hover effect that turns countries red. The color legend is built with custom d3 selections, circles, and text labels.

Mar 17, 2020

Loading thumbnail…

HTML Starter

This example visualizes asylum seekers departing from countries worldwide, with a choropleth map coloring each nation by the number of departures for a selected year. It uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with data loaded from a TopoJSON world atlas and a local asylum JSON file. A threshold color scale and `d3.legendColor` display the legend, while a slider updates the displayed year and re-renders the map with `d3.queue`.

Mar 16, 2020

Loading thumbnail…

let's make a bar chart.js

This bar chart displays the annual number of asylum seekers arriving in Australia, broken down by country of origin from 1976 to 1995. The chart uses a horizontal bar layout where each bar’s length represents the refugee count for a specific origin in a given year. Built with React and D3 v5, the visualization relies on `d3.csv` to parse the data, `scaleLinear` for the x-axis value mapping, and `scaleBand` for the y-axis categorical placement. All rectangles are rendered as SVG elements within a 960×500 viewport, with bar heights determined by the bandwidth of the band scale.

Mar 15, 2020

Loading thumbnail…

let's make a face with d3.js

A smiling face is drawn on an SVG canvas using D3.js v5, with a yellow circle head, two black eyes, and an arc-based mouth. The code selects the SVG, sets its dimensions from attributes, and appends shapes with explicit coordinates and styling. Eye animations use chained `transition()` calls with `duration(2000)` to move them upward and enlarge their radius, then return to the original position and size. The mouth is rendered via a path generated by the `arc()` generator with specified inner and outer radii and angled start/end points, all accomplished through imperative D3 selections and attribute manipulation.

Mar 15, 2020