A

Amar Nath Yogi

@cyogian·17 public vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world economies with colors from a spectral scale, letting users filter countries by clicking legend categories to dim non-matching regions. The visualization uses a natural Earth projection rendered as SVG paths via `d3.geoPath`, with geographic data from the world-atlas package and economic classifications from a TSV file. Interactive zooming and panning are enabled through `d3.zoom`, while legend clicks toggle color-based highlighting, emphasizing selected economy types while reducing opacity of unrelated countries.

Loading thumbnail…

Choropleth Map

This choropleth map uses color to depict each country's economy category, sourced from world-atlas data. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it renders SVG paths colored via d3.scaleOrdinal with d3.schemeSpectral. Animated color legend transitions, hover effects highlight countries, and topojson-client processes geographic features alongside TSV metadata.

Loading thumbnail…

Color & Size Legends

This example demonstrates two types of chart legends: a color legend mapping ordinal data (apple, orange, lemon) to a d3.scaleOrdinal color scale, and a size legend using d3.scaleSqrt to map a numeric range from 0 to 10 to circle radii. Both legends are rendered as SVG groups, with each tick containing a circle and label. The code utilizes d3.selection, d3.transition, and the .merge() API to animate legend updates over 1000ms, shrinking exiting circles and repositioning entries when the underlying scales change. The size legend positions its ticks horizontally, offsetting each by its radius to avoid overlap.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable natural Earth projection map where hovering over any country turns it crimson. The visualization loads world country boundaries from a TopoJSON file via d3.json, then renders them as SVG paths using d3.geoPath and d3.geoNaturalEarth1. Interaction comes from d3.zoom, which applies a transform to a group element, while CSS :hover rules change country fill colors. The map also includes a blue sphere backdrop drawn from a GeoJSON sphere object.

Loading thumbnail…

World Countries Tree(Dendogram)

This dendrogram visualizes the hierarchical structure of world countries, organized by continent and subregion, using a left-to-right tree layout. It renders each node as a text label with horizontal curved links, with font size decreasing by depth. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs on an SVG, with zoom functionality via `d3.zoom`. Data comes from a static JSON file, and labels are styled with Roboto font and a white text shadow for readability.

Loading thumbnail…

Let's make a map with D3.js

This example visualizes world countries as a natural Earth projection map, with landmasses rendered in light green against a dark blue spherical backdrop. Using D3 v5, it loads TopoJSON data from the world-atlas package and converts it to GeoJSON via topojson.feature, then draws each country with d3.geoPath and a d3.geoNaturalEarth1 projection. The map is rendered as SVG paths onto a fixed 960×500 canvas.

Loading thumbnail…

Fruit Bowl - Hover To Select

Five fruits sit in a brown-rimmed seashell bowl as SVG shapes, rendered with D3 v5. Hovering a fruit selects it with a black stroke while a mouse-out deselects. Using D3's `scaleOrdinal` for color and radius, the code binds fruit data with key functions, applies enter/exit transitions, and animates fruit position and type over timed intervals.

Loading thumbnail…

Fruit Bowl - Click To Select

Five pieces of fruit sit in a simple bowl, rendered as SVG circles with labels. Clicking a fruit selects it, giving it a black outline. Through scheduled re-renders, fruit types change, fruits are removed from the end, and a new lemon is prepended, with exit animations shrinking removed circles. The code uses d3-selection’s data join, d3-transition for animated radius changes, and d3-scaleOrdinal for color and size mapping.

Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot shows one week of temperature readings in San Francisco, using a maroon line to connect the data points and circles for each hourly measurement. The visualization highlights temperature fluctuations over time, with the y-axis representing degrees Celsius and the x-axis representing time. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, alongside `axisBottom` and `axisLeft` for ticks and labels. The data comes from the "Data Canvas: Sense Your City" project, rendered as an SVG with hover effects that highlight individual points.

Loading thumbnail…

World Population Area Chart 2015

This area chart visualizes global population growth from 1960 to 2018, drawing on data from the United Nations World Population Prospects 2019. The chart displays population values against a time axis, with the filled area emphasizing growth trends. It uses D3 v5 with an SVG rendering, employing d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, and d3.area with curveBasis to generate the smooth filled path. Axis ticks are formatted using d3.format to abbreviate large numbers.

Loading thumbnail…

Customizing Axis

This example displays the populations of the top 10 most populous countries from the 2018 United Nations World Population Prospects dataset. It uses d3.csv to load the data and d3.scaleLinear and d3.scaleBand to map population and country names to bar positions. Custom tick formatting converts abbreviations like G to B, and d3.axisBottom and d3.axisLeft render the axes with custom margins and tick sizes. The SVG bars highlight on hover.

Loading thumbnail…

Population Scatter Plot

This chart shows the top 10 most populous countries as labeled circles on a scatter plot, using a point scale for country names and a linear scale for population. Data is loaded from a CSV file containing 2018 United Nations population estimates. The visualization uses d3.csv, d3.scaleLinear, d3.scalePoint, and d3.axisLeft with d3.axisBottom, rendering circles in SVG with axis tick lines. Hover effects change circle fills, and the chart includes a title and axis label formatted with d3.format.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the quantitative scales and render axes with gridlines. Data is loaded via `csv` from an external auto-mpg dataset and drawn as SVG circles with opacity and hover effects. The code also applies `extent` and `nice` to domain calculations, and styles the visualization with custom CSS for interactive feedback.

Loading thumbnail…

Working Hours Scatter Plot

A scatter plot displays the relationship between age and hours worked per week for individuals from the 1994 Census Income Data Set, with each point colored by gender. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes and gridlines, while `select` and `csv` load and bind the data. The SVG rendering applies a semi-transparent fill to each circle, and a legend distinguishes male and female data points. Hovering over a circle changes its fill to whitesmoke.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top ten most populated countries using 2018 estimates from the United Nations World Population Prospects. It encodes country names on the y-axis with a d3.scaleBand and population values on the x-axis with a d3.scaleLinear, rendering rectangles in SVG. The visualization uses d3.axisLeft and d3.axisBottom for the value labels and applies a hover effect that changes rectangle fill via CSS. Data is loaded through d3.csv and parsed as numbers before being mapped to the scales.

Loading thumbnail…

Let's make a face with D3.js

This example assembles a cartoon face from geometric primitives using D3.js v5. A yellow circle forms the head, with two black eyes, a nose, eyebrows, and a mouth built from SVG paths generated by the `arc` API. The eyebrows animate vertically via a repeating `setInterval` loop, with transitions applied using the `transition` API to move them up and down every 1.5 seconds. All elements are grouped and positioned using SVG transforms within a fixed 960x500 canvas.

Loading thumbnail…

Shapes with SVG & CSS

A green frog-like face drawn with SVG shapes and CSS styling. The image shows a large green circle with two layered eyes, a curved mouth, and a brown rectangular nose with horizontal lines. The SVG markup uses primitive shapes like `<circle>`, `<rect>`, `<path>`, and `<line>`, with CSS rules in `index.css` controlling stroke color and width for specific elements. The `src` attribute links the stylesheet, and the rendering is entirely vector-based in the browser.