Skip to main content
Log in
A

Akhilesh7866

@Akhilesh7866·9 public vizzes

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, the visualization renders SVG rectangles whose widths encode population values via d3.scaleLinear, while country names are positioned along a d3.scaleBand axis. Custom React components handle the bottom and left axes, and each bar includes a native SVG title element for tooltip display, with population labels formatted using d3.format.

May 22, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data for San Francisco, plotted as revenue values per year with time on the x-axis. The visualization uses d3.csv to load the data, then creates scales with scaleTime and scaleLinear, renders axes via axisBottom and axisLeft, and draws the smooth curve using d3.line with curveBasis. The SVG output includes styled axis labels and a title, with a maroon stroke for the line path. The data originates from the Data Canvas - Sense Your City project.

May 5, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays average IMDb-style ratings for movie genres across 13 categories, with values ranging from approximately 6.0 to 7.3. The visualization uses D3 v5 with an SVG renderer, employing `scaleLinear` and `scaleBand` to map ratings and genres. Horizontal grid lines from `axisBottom` extend across the chart, while the vertical axis labels are cleaned of tick lines. The data originates from a CSV file containing genre and rating pairs, and the chart includes a title and axis label.

May 5, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The data is loaded from a CSV file using d3.csv, with population values parsed and scaled. The visualization uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and custom d3.axisBottom formatting to abbreviate large numbers (e.g., converting billions to "B"). Axes are styled with d3.axisLeft and labels added via SVG text elements.

May 5, 2020
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between movie ratings and ranks across a dataset of films, with each circle representing a movie. The visualization uses D3 v5 within a React framework, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for tick marks and gridlines. Rendered as an SVG, the plot includes axis labels, a title, and red semi-transparent circles. The data comes from an external `movies.csv` file, and the code parses numeric fields before plotting.

May 5, 2020
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between movie ratings and ranks across a dataset of films, with each circle representing a movie. The visualization uses D3 v5 within a React framework, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for tick marks and gridlines. Rendered as an SVG, the plot includes axis labels, a title, and red semi-transparent circles. The data comes from an external `movies.csv` file, and the code parses numeric fields before plotting.

May 5, 2020
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flower samples. The visualization uses React with D3 v5 scales, specifically `scaleLinear` and `extent`, to position circles in an SVG canvas. Axis components generate tick marks and labels, while the `Marks` component renders each data point as a circle with a tooltip showing the x-value. The chart features a Poppins font, custom axis styling, and formatted tick labels using D3's `format` function.

May 5, 2020
Loading thumbnail…

Auto MPG Summary

This example displays a plain-text summary of the Auto MPG dataset, showing the row and column counts, file size in kilobytes, and the first 10 rows as formatted JSON. Using d3.csv to load the remote CSV file, d3.csvFormat to compute the data size, and d3.select to append the text elements, the visualization renders data from the UCI Machine Learning Repository. The output appears as green monospace text on a black background, styled with custom CSS.

May 2, 2020
Loading thumbnail…

Auto MPG Summary

This summary uses the D3 library to load an Auto MPG dataset from the UCI Machine Learning Repository and displays basic statistics about it. The code imports `select`, `csv`, and `csvFormat` from D3, fetches the data asynchronously, and prints the total row count, column count, and file size in kilobytes. It also renders the first 10 rows as a JSON-formatted preview, all styled with black text on a green monospace terminal-like background.

May 2, 2020