Aditya-me

@Aditya-me·9 public vizzes

Circle Transitions

Five apples appear as circles in a row. Over time, the dataset is modified: one fruit is removed, another changes type to a lemon, and a third is filtered out. D3's SVG circle elements animate their position and radius, with color and size scaling based on fruit type. The `transition` API handles the smooth changes in position, radius, and removal.

Apr 6, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year, using a filled curve to show the rise in population over time. The chart customizes both the x- and y-axes, with a time scale for years and a linear scale for population values, displayed with tick marks and labeled axes. The data is loaded from a CSV file via d3.csv, and the area path is generated using d3.area with a curveBasis interpolation, rendered as an SVG. The y-axis ticks are formatted to abbreviate large numbers, replacing “G” with “B” for billions.

Apr 5, 2020

Loading thumbnail…

Temp in San Francisco Area Chart

This area chart from D3 v5 visualizes temperature readings in San Francisco over time, with a smooth, basis-curved line filling the space beneath it. The visualization includes labeled x and y axes for time and temperature, and uses the `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` APIs. The data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures as numbers. The chart is rendered as an SVG with a custom title and styled grid lines.

Apr 5, 2020

Loading thumbnail…

Temp in San Francisco Line Chart

This line chart visualizes temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis, using a smooth curved line to connect data points. The chart includes labeled axes, a title, and custom tick marks and gridlines. The code uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to construct the SVG visualization. Data is loaded from a CSV file hosted on VizHub, and the rendering approach relies on SVG elements with D3’s data-binding to create the path and circles.

Apr 5, 2020

Loading thumbnail…

Temp in San Francisco Scatter Plot

This scatter plot visualizes temperature measurements in San Francisco over time, with each circle representing a data point plotted along time and temperature axes. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, while circles are rendered in SVG. Data is loaded from a CSV file via `csv()` and parsed into dates and numeric temperatures. Axis labels and a title are added using SVG text elements, with customized tick sizes and styling defined in the accompanying stylesheet.

Apr 5, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between car weight and model year, with each point representing a vehicle from the auto-mpg dataset. The visualization uses D3.js v5 to render SVG circles with red, semi-transparent fill, mapping weight to the x-axis and year to the y-axis. Axes are customized using `d3.axisLeft` and `d3.axisBottom`, while scales are created with `d3.scaleLinear` and domains set via `d3.extent`. Data is loaded asynchronously from a CSV file using D3’s `csv` method, with numeric fields parsed for plotting.

Apr 4, 2020

Loading thumbnail…

Top 10 Most Populous Countries

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations’ World Population Prospects. Each country is represented by a circle positioned along a linear scale for population and a point scale for country names, with customized D3 axes. The visualization uses d3.csv, d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.axisBottom, and d3.format to load data, scale values, render axes, and format tick labels. d3.select and d3.append build the SVG elements dynamically, with a title added as a text element.

Apr 2, 2020

Loading thumbnail…

Making a Bar Chart

This example shows the populations of the top 10 most populous countries from a 2018 United Nations estimate, displayed as circles on an SVG bar chart with customized axes. The code uses D3 v5’s `csv` loader, `scaleLinear`, and `scalePoint` to map data values, while `axisBottom` and `axisLeft` apply tick formatting. Axis grid lines and labels are styled via CSS, and the chart includes a title. The accompanying video walks through building the visualization step by step.

Apr 2, 2020

Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a cartoon face directly on an SVG canvas, combining simple shapes like circles for the head and eyes with arc-generated paths for eyebrows and a mouth. The face is constructed using absolute positioning based on the SVG’s width and height, with the mouth created via the `d3.arc()` generator and the eyebrows animated using D3’s `.transition()` method. The visualization runs in a React framework, rendering static vector graphics with a yellow face and black stroke, and includes a minimal style.css for margin and overflow control.

Apr 1, 2020