sravaniboggaram

@sravaniboggaram·10 public vizzes

Country vs population

This visualization shows the populations of countries worldwide, with each country represented as a horizontal bar scaled by its population size. The code uses D3 v6 APIs including `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file via `csv()`, and the bars are rendered as SVG rectangles. The x-axis uses a custom tick format that replaces the standard "G" with "B" to label billions.

Jul 7, 2021

Loading thumbnail…

Fork of General Update Pattern

This example demonstrates the general update pattern for animated data visualizations, showing how D3.js can add, remove, or modify elements in response to data changes. The visualization displays a set of circles representing fruits, which transform over time as apples are removed and one apple is replaced by a lemon. The implementation uses `d3.select` for SVG selection, `scaleOrdinal` for color and radius mapping, and D3's transition system with `.enter()`, `.merge()`, and `.exit()` methods to handle smooth animations. The React framework renders the SVG output with 1000-millisecond transitions for each state change.

May 28, 2021

Loading thumbnail…

General Update Pattern

This example demonstrates the general update pattern in D3, using a fruit bowl visualization of apples and lemons. The code renders SVG circles with positions and radii determined by ordinal scales, and animates changes over time. Using `selection.join`-style logic with `enter`, `merge`, and `exit` selections, it handles data updates where fruits are added, removed, or change type. React serves as the framework, while D3 v6 drives the transitions and data binding, with each fruit assigned a unique ID via `Math.random()` for stable keying.

May 28, 2021

Loading thumbnail…

Customizing Axes

A horizontal bar chart ranks the top 10 most populous countries, displaying population sizes along the x-axis with custom tick labels that abbreviate large numbers (e.g., “1.42B” for China). The example uses React with D3 v6, importing `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load `data.csv`, scale the data, and render SVG axes. It customizes the x-axis tick format via `format('.3s')` and applies styling to axis lines, ticks, and labels through CSS.

May 27, 2021

Loading thumbnail…

Temperature Scatter Plot

This scatter plot displays the relationship between weight and horsepower for cars, with each circle representing a data point from the auto-mpg dataset. The visualization uses D3 v6’s scaleLinear, axisBottom, and axisLeft functions to map the data to SVG coordinates, while csv loading retrieves the dataset from VizHub. Circle elements are appended to the SVG container with fixed radius, and custom tick formatting via d3.format converts large weight values into abbreviated notation. The chart includes labeled axes, a title, and tick lines that extend across the full plotting area.

May 27, 2021

Loading thumbnail…

Cars Scatter Plot

This example uses a scatter plot to show the relationship between horsepower and weight for cars from the auto-mpg dataset. The code imports specific D3 v6 modules, including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent`. It renders SVG circles with a fixed radius of 10, using semi-transparent steelblue fill, and adds labeled axes with tick marks and gridlines via `tickSize`. The chart includes custom axis tick formatting using `format` and a manually positioned title.

May 27, 2021

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, mapping population size on the x-axis and country names on the y-axis. The visualization uses D3 v6 with React, rendering circles in an SVG. It employs d3.scaleLinear for the x-scale, d3.scalePoint for the y-scale, and d3.axisLeft and d3.axisBottom for axes. Data is loaded from a CSV file using d3.csv, with population values multiplied by 1000. Custom tick formatting converts large numbers to abbreviated forms, and grid lines extend across the chart.

May 25, 2021

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations using a bar for each row of data. It renders SVG bars with a steelblue fill, using D3 v6 functions such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The code loads population data from a CSV file, multiplies the values by 1000, and displays them with margins and axes. The chart is built in a React-free vanilla JavaScript setup within an HTML page.

May 24, 2021

Loading thumbnail…

Smiley Face

A yellow SVG smiley face with black eyes and eyebrows is drawn on a 960 by 500 canvas. Using D3 v6 selections and the `arc` generator, a mouth is created and shifted into place via a group transform. The eyebrows are rectangles that animate with chained `transition().duration(2000)` calls, moving downward then upward. The face’s features are positioned by computed width, height, and offset constants in a React-based D3 setup.

May 24, 2021

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered directly within an HTML page. It shows how SVG coordinates originate from the top-left corner, and how a `g` group element applies shared styling attributes like fill and stroke to its children. The code uses raw SVG markup, along with CSS for page styling and a small JavaScript snippet that logs a message to the browser’s console. The shapes are positioned using absolute pixel coordinates within a 960×500 viewport.

May 24, 2021