Akshay Khobragade

@akshay7729·5 public vizzes

Bowl of Fruit

Five red apples are arranged in a horizontal row across the middle of an SVG canvas, each rendered as a circle with a fixed radius. The visualization is built with D3 v5, using the `select` and `range` functions to generate fruit objects and bind them to circle elements via the data join. The code uses the `enter` selection and `append` method to create circles, positioning them with static `cx` and `cy` attributes. No interactivity or dynamic behavior is present; the example demonstrates a basic SVG drawing with D3.

Dec 7, 2020

Loading thumbnail…

World Population | Area Chart

This area chart visualizes world population over time, with the maroon filled area and curved line showing the trend from historical data. The visualization uses D3 v6's `scaleTime` and `scaleLinear` for axes, `areaGenerator` with `curveBasis` for the smooth path, and `axisBottom`/`axisLeft` with custom tick formatting to display population values in billions. Data is loaded from a CSV file containing yearly population figures, rendered as an SVG with labeled axes and a title.

Dec 6, 2020

Loading thumbnail…

Temperature in San Francisco | Line Chart

This line chart visualizes temperature measurements recorded over a week in San Francisco. The chart plots time on the x-axis and temperature on the y-axis, with a smooth curve generated using `d3.line` with `curveBasis`. The visualization includes labeled axes, grid lines, and a title, all rendered as SVG elements. Data is loaded from a CSV file using `d3.csv`, and scales are created with `scaleTime` and `scaleLinear`. Axes are generated using `axisBottom` and `axisLeft`, with data parsed from the dataset provided by Curran.

Dec 6, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. The visualization uses D3 v5 scaleLinear functions with axisBottom and axisLeft to render axes, while React 16.9 manages the component structure. Circles are drawn using SVG elements with steelblue fill and opacity. The data comes from the United Nations World Population Prospects dataset, loaded via D3's csv function, though the chart focuses on automotive attributes rather than population metrics.

Dec 4, 2020

Loading thumbnail…

Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. The chart displays country names on the y-axis and population counts on the x-axis, with steel-blue bars and a headline title. It uses React for the component structure and D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, scale values, and render axes. The visualization is rendered as SVG within a fixed 960×500 viewport, with formatted tick labels converting values to billions.

Dec 3, 2020