A

Abhijeet Panda

@abhijeetpanda12·19 public vizzes

Loading thumbnail…

Choropleth Map interactive

This interactive choropleth map colors countries by economic classification using a spectral color scale, with a legend showing the ordinal categories. Users can pan and zoom the map via d3.zoom, which applies a transform to the map group. The visualization loads world geometry from TopoJSON and joins it with tabular data from a TSV file, then renders the map with d3.geoPath and a Natural Earth projection. Hovering highlights a country in red, and tooltips display country names and their economy values.

Loading thumbnail…

choropleth!

This choropleth displays a world map rendered with a natural Earth projection, coloring countries in light green against a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset and draws them as SVG paths using d3.geoPath. Interactive zooming is enabled through d3.zoom, and hovering over any country turns it red. Each country path includes a title element showing its name, though the display of that name is not implemented.

Loading thumbnail…

Let's make a map - interactions!

This example demonstrates interactive pan and zoom on a natural Earth projection map of world countries. Users can drag to pan and scroll to zoom, with the map updating smoothly through D3’s zoom behavior. The visualization renders country boundaries from the world-atlas TopoJSON dataset, using d3.geoPath and d3.geoNaturalEarth1 to project the geometry into SVG paths. Hovering highlights a country in red, and the map includes a blue sphere background. The code relies on d3.json for data loading and topojson.feature for converting TopoJSON to GeoJSON.

Loading thumbnail…

Tree!

This visualization shows a hierarchical tree of world geography, starting from continents and drilling down to countries and subregions. The data is structured as nested JSON objects representing the world, with nodes labeled for regions like Asia and individual nations. Built with D3 v5, it uses the `tree` and `hierarchy` layout functions to compute node positions and `linkHorizontal` to draw the connecting paths. Text labels scale in font size based on depth, and the entire SVG canvas supports pan and zoom via the `zoom` event.

Loading thumbnail…

Blank Canvas!

A black rounded rectangle fills the entire browser window, creating a stark, minimalist blank canvas. The visualization uses D3 v5’s `select` method to target the SVG element, then sets its width and height to match the viewport dimensions. It appends a single `rect` with rounded corners (`rx`) and a black fill via CSS. The code dynamically reads `document.body.clientWidth` and `clientHeight` to size the graphic responsively, demonstrating a simple SVG rendering approach with no data or interaction.

Loading thumbnail…

Let's make a map!

This map visualization displays countries as light green polygons with black outlines, set against a blue spherical background representing the globe. The example uses D3.js v5, specifically d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with the TopoJSON library to convert geographic data into SVG paths. Country boundaries are rendered from the world-atlas countries-110m.json dataset, which is fetched and processed asynchronously. The visualization demonstrates a basic choropleth-free world map, focusing on geographical shape rendering rather than data encoding.

Loading thumbnail…

hover-interactions

Five fruit circles render in an SVG, transitioning between apple and lemon types with color and radius changes. Hovering a circle highlights it with a blue stroke, and removal animations shrink and delete circles. Built with D3 v5, the example uses data joins, `transition()`, and `scaleOrdinal` for color and size, with `mouseover` and `mouseout` events triggering state updates.

Loading thumbnail…

interactions

Five fruit shapes render as SVG circles with color and radius scales mapping apple and lemon types. The d3.v5 fruitBowl module transitions new and exiting circles, while click events update a selected fruit’s blue stroke. Timed mutations remove and modify fruits, demonstrating animated binds through `selection.merge` and `transition.duration`.

Loading thumbnail…

Fruit Bowl

Five circles enter an SVG as apples, then one is removed, another turns into a lemon, and a third is filtered out. The fruitBowl function uses d3's scaleOrdinal for color and radius mappings, and transitions animate the circle area and removal over one-second durations. The data is generated in index.js with d3.range and Math.random for unique IDs.

Loading thumbnail…

Fruit Bowl

Fruit Bowl demonstrates dynamic data visualization with D3.js, showing a bowl of fruit that updates over time. Animated transitions adjust the bowl's width while apples and lemons appear, disappear, and change types through shifting SVG circle and text elements. The code uses d3.scaleOrdinal for color and radius mapping, selection joins with enter/merge/exit patterns, and d3.transition for smooth updates. Three timed steps trigger data mutations, including pop, type replacement, and filtering.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with timestamps mapped to a time scale and temperatures to a linear scale. The visualization uses d3.csv to load the dataset, then applies d3.area with a curveBasis interpolation to create a smooth, filled area path beneath the temperature trend. Axes are rendered using d3.axisBottom and d3.axisLeft, with custom tick sizes and labels for Time and Temperature. The SVG output includes a title and grid lines, styled via external CSS for clarity.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization plots temperature over time, with a smooth curve connecting the data points using D3’s `line` generator with `curveBasis`. The code uses `d3.scaleTime` and `d3.scaleLinear` to map timestamps and temperatures to SVG coordinates, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as an SVG, with a maroon line and gridlines, and includes axis labels and a title.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots temperature in degrees Celsius against time, with the title "A Week in San Francisco" above the chart. Created with D3 v5, it uses `scaleTime` and `scaleLinear` to map axes, `line` with `curveBasis` to generate the smooth temperature path, and `axisBottom` and `axisLeft` for the grid and labels. The SVG rendering includes margins and axis labels for clarity.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Each circle represents a car, and the chart uses d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft to render tick marks and labels. The SVG is configured with custom margins, and circles are styled with red fill and opacity for overlapping points. Data is loaded via d3.csv and parsed as numeric values before rendering.

Loading thumbnail…

Customizing Axes

This example shows the populations of the top 10 most populous countries as circles on a scatter plot, with a customized axis design. Using D3 v5, it loads data from a CSV file and renders an SVG, employing `d3.scaleLinear` for the population axis and `d3.scalePoint` for country names. The code customizes axes with `d3.axisBottom` and `d3.axisLeft`, formats population ticks with D3’s `format` function to abbreviate billions as “B,” and adds grid lines via tick sizes.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, including a horizontal axis that converts large population values into abbreviated units like “1.4B” and styled tick lines and labels. Built with d3.v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV file and rendered as SVG.

Loading thumbnail…

Ordinal Scatter Plot

This visualization displays the populations of the top 10 most populous countries as large circles plotted along an ordinal y-axis using a categorical point scale, with population on a linear x-axis. It uses D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to load and render the data. The SVG circles are positioned with the `cx` and `cy` attributes, and population values are converted from thousands. Data comes from the 2018 United Nations World Population Prospects estimate.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, including a horizontal axis that converts large population values into abbreviated units like “1.4B” and styled tick lines and labels. Built with d3.v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV file and rendered as SVG.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with circular eyes, rectangular eyebrows, and an arc-based mouth. The face’s eyebrows and mouth animate over two-second transitions, moving upward and downward repeatedly. The code selects the SVG element, appends groups for positioning, and uses D3’s `arc()` generator to shape the mouth, while `transition().duration()` drives the timed movements.