M

MounikaBeerelly

@MounikaBeerelly·26 public vizzes

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map colors countries by their economy category using a spectral color scale. Clicking a country highlights it, dims all others, and fades the world sphere; clicking again deselects it. A color legend allows filtering by economy category. The map uses D3 v5’s geoNaturalEarth1 projection and geoPath, with TopoJSON world data processed via loadAndProcessData and styled using SVG.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population over time by region, with multiple colored lines representing different world regions from 1950 to 2100. The chart uses D3 v5’s `nest()` to group data by region, `scaleTime` and `scaleLinear` for axes, and `line` with `curveBasis` to generate smooth paths. Data comes from UN population estimates and medium variant projections, processed by melting wide-format CSV data into tidy long format. A custom `colorLegend` function renders the categorical color scale, and the visualization includes gridlines, axis labels, and a title.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line from the d3.schemeCategory10 scale. The visualization uses d3.nest() to group data by city and d3.line() with curveBasis to create smooth paths, while d3.scaleTime() and d3.scaleLinear() map timestamps and temperatures to the SVG canvas. A custom colorLegend module renders the city labels, and the chart includes gridlines from axisBottom and axisLeft with tick marks. The data comes from a CSV file containing hourly temperature observations.

Loading thumbnail…

Circles on a Map

A world map visualizes population by country via teal circles, with circle area scaled to 2018 population data. Pan and zoom are enabled through the `d3.zoom` behavior. Hovering a country reveals details, while a custom size legend displays the population scale. The visualization uses the `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering country borders, and `d3.scaleSqrt` for circle sizing. Data merges UN CSV statistics with world atlas TopoJSON, rendered as SVG with CSS styling for hover effects.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from a CSV file, allowing users to compare any two numeric attributes. The visualization uses D3 v5 with dropdown menus to select which columns to display on the x and y axes. Each data point is rendered as a red circle with a transition animation. The visualization also includes labeled axes, grid lines, and scales that automatically adjust when different data columns are selected.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications, with each country colored according to its economy category from a tsv-loaded world-atlas dataset. A color legend allows users to click a category, which filters the map by dimming non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render SVG paths, with d3.zoom for pan and zoom interactions. Color encoding is handled by d3.scaleOrdinal with d3.schemeSpectral, while data loading uses d3.tsv, d3.json, and topojson.feature.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries’ income groups using an ordinal color scale, coloring each nation from a world-atlas dataset. The map renders geographic boundaries via `d3.geoPath` with a natural Earth projection, and supports panning and zooming through d3.zoom. A legend, built with the custom `colorLegend` function, displays income group categories as colored circles. Hovering highlights countries in red, while tooltips reveal each country’s name and income group, sourced from the accompanying TSV metadata.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales in D3 v5. The color legend uses a `scaleOrdinal` with fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups using custom reusable functions that bind data to enter/merge/exit selections, positioning circles and text labels with transform attributes and spacing offsets.

Loading thumbnail…

World Countries Tree Map

This visualization shows the hierarchical structure of world countries organized by continent and subregion using a tree layout. The interactive chart displays country names as text labels positioned along curved horizontal links from the root node. Users can pan and zoom through the hierarchy using d3.zoom. The implementation uses d3.tree, d3.hierarchy, and d3.linkHorizontal to position nodes and generate paths, with Playfair Display font styling applied via text shadows.

Loading thumbnail…

Basic Tree Map

This visualization shows a hierarchical tree map of world regions and countries, with the root labeled "World" branching into continents and subregions before reaching individual nations. The layout positions nodes horizontally, with parent-child relationships drawn as curved links using the `linkHorizontal` path generator. The visualization loads data from a local JSON file and uses D3 v5's `tree` and `hierarchy` functions to compute the layout, while SVG elements are selected and managed with `select` and `selectAll`.

Loading thumbnail…

Blank Canvas

A full-screen SVG canvas is rendered with a single rounded rectangle that fills the entire browser viewport, adjusted dynamically to the window’s dimensions. The effect is a blank, bordered drawing area, with the current viewport dimensions logged to the console. Using D3 v5’s `select` method, the code sets the SVG’s width and height attributes, then appends a `rect` element with a 40-pixel corner radius, relying on `document.body.clientWidth` and `clientHeight` for sizing. No data or interactions are involved; the example simply demonstrates basic D3 SVG setup and responsive layout.

Loading thumbnail…

Adding interactions to a map with D3.js!

This example demonstrates how to add interactive features to a geographic map using D3.js. It shows a world map rendered with SVG paths, where hovering over a country highlights it in red, and a tooltip displays the country name. The map also supports panning and zooming through the `d3.zoom` API. The visualization uses `d3.geoPath` and the `topojson` library to process GeoJSON data from the world-atlas package, with country names loaded from a TSV file.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean as a blue sphere. It uses the D3.js v5 library along with TopoJSON to load and parse geographic data from the world-atlas package. The code applies a natural Earth projection via `d3.geoNaturalEarth1` and a `d3.geoPath` generator to draw both the sphere outline and country borders. A static 1000x500 SVG canvas displays the result.

Loading thumbnail…

Bowl of Fruit: Animated Transitions

A bowl of fruit demonstrates animated transitions as apples disappear and one transforms into a lemon over time. The visualization uses D3 v5 with an SVG rendering approach, employing scaleOrdinal for color and radius mappings. The fruitBowl function manages the enter, update, and exit states of grouped circles and text labels, while the index script uses setTimeout to trigger sequential data modifications.

Loading thumbnail…

Bowl of Fruit: General update pattern

Six circles representing apples enter an SVG bowl with a grow-in animation, then a shared transition pattern animates their positions and radii. The example demonstrates D3’s general update pattern with `selection.data`, `enter`, `merge`, and `exit` selections. Using `d3.scaleOrdinal` for color and radius, fruit type changes from apple to lemon trigger a color shift, while removal shrinks circles to zero before `remove()`. Timed `setTimeout` calls drive the enter, update, and exit phases.

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, with the x-axis representing years and the y-axis showing population in billions. It uses d3.csv to load the dataset, then builds the visualization with d3.scaleTime, d3.scaleLinear, d3.area, and d3.curveBasis to generate a smooth filled path. The chart includes labeled axes with tick formatting that converts values like billions, and the SVG rendering is styled with custom CSS for the title, axis labels, and maroon area fill.

Loading thumbnail…

Temperature in Sans Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, displaying temperature changes over time. The visualization uses D3.js with SVG rendering, employing d3.area with a curveBasis for the filled path, scaleTime and scaleLinear for axes, and d3.csv to load the dataset from a remote source. The chart includes gridlines, axis labels, and a title.

Loading thumbnail…

Temperature in Sans Francisco Line Chart

This line chart displays one week of temperature readings in San Francisco over time. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, and d3.line with curveBasis to draw the smooth orange path. Axes are rendered via d3.axisBottom and d3.axisLeft, with grid lines and labels styled through SVG text elements and CSS classes. The chart includes a title and axis labels, with margins and an SVG canvas sized at 960 by 500 pixels.

Loading thumbnail…

Temperature in Sans Francisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each semi-transparent pink circle represents a single temperature measurement, and the chart includes labeled axes and a title. The visualization is built using D3 v5, leveraging `d3.csv` for data loading, `scaleTime` and `scaleLinear` for scaling, and `axisBottom` and `axisLeft` for axes. Data comes from a CSV file hosted on VizHub, rendered as an SVG with circle elements.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower for a dataset of cars, with each car represented by a red semi-transparent circle. The visualization uses D3 v5's `scaleLinear` for both axes, `axisLeft` and `axisBottom` for the labeled axes, and `selectAll`/`enter` patterns to render the SVG circles. Data is loaded from a CSV file and parsed into numeric fields. The chart includes a title, axis labels, and grid lines to aid interpretation.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Each circle represents a country, positioned along a linear population scale and a point-based categorical scale for country names, with a bar-chart-like layout. The visualization is built with d3.csv, d3.scaleLinear, d3.scalePoint, axisBottom, and axisLeft, rendering circles as SVG elements. Population values are formatted with d3.format and converted from thousands, with axes extended by grid lines via tickSize.

Loading thumbnail…

Customizing Axes of a Bar Chart

A bar chart displays the estimated 2018 populations of the top 10 most populous countries, based on United Nations data. It uses D3 v5 with an SVG rendering, employing `scaleLinear` and `scaleBand` for the axes. Customized axes include a formatted tick label replacing "G" with "B" and grid lines, while country labels are simplified. Population values are multiplied by 1000, and the chart is titled "Top 10 Population Countries".

Loading thumbnail…

Making a Bar Chart

This example displays the populations of the ten most populous countries in 2018, ordered along a vertical bar chart. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to horizontal bar widths and country names to vertical bands. The data, sourced from the United Nations’ 2017 World Population Prospects, is loaded via `csv` and rendered as SVG rectangles. The code explicitly multiplies population figures by 1,000 to reflect actual counts.

Loading thumbnail…

Let's make a Smiley

This example shows a stylized smiley face built with D3.js that animates its eyebrows up and down. The face is constructed from SVG shapes: a yellow circle for the head, two dark circles for eyes, and a path generated with the `arc` function for the mouth. The eyebrows are rectangles that move via chained `transition().duration(2000)`, shifting vertically to create a playful expression. D3 v5 selections and attribute methods are used throughout, with the entire figure centered in a green-background SVG.

Loading thumbnail…

Shapes with SVG and HTML

This example showcases a collection of SVG shapes—circles, rectangles, lines, and paths—rendered directly within an HTML page using React. It demonstrates how SVG attributes like `fill`, `stroke`, and `stroke-width` control the appearance of each shape, alongside CSS classes (e.g., `.lines`) that apply styling to entire groups. The code employs SVG `<g>` elements with `transform` attributes to translate and scale the drawing, and includes a `<path>` with a minimal `d` attribute. The visualization is a static, pure SVG illustration with no external data source, focusing on fundamental vector graphics composition.

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page structure with a centered layout and “Hello World” text. It uses plain HTML and embedded CSS to create a simple static page with a heading and body text. The visualization shows basic text rendering without any external libraries or data sources, serving as a starting point for HTML-based projects.