shubhamsingh173

@shubhamsingh173·6 public vizzes

Fork of Making a Bar Chart

This bar chart displays the relative importance of ten economic features, with each bar’s length proportional to its value. The data originates from a 2018 United Nations population estimate, though the chart itself uses a dataset of feature proportions. Rendered as an SVG using D3 v5, the visualization employs `d3.csv`, `scaleLinear`, and `scaleBand` to map values and categories. Axes are generated with `axisLeft` and `axisBottom`, while bars are appended as `rect` elements styled with steelblue fill. The chart includes a title and labeled axes for clarity.

Jun 1, 2021

Loading thumbnail…

Untitled

This interactive 3D scatter plot visualizes the Iris flower dataset, mapping petal length, petal width, and sepal width along the three axes, with color encoding species. Built with Three.js and D3, it uses sprites rendered via WebGL for circular points and supports both user-controlled panning and an automatic slow rotation animation. The scene is constructed with Three.js `Scene`, `PerspectiveCamera`, and `WebGLRenderer`, while D3 utilities like `csv`, `scaleLinear`, and `scaleOrdinal` handle data loading and mapping.

Jun 1, 2021

Loading thumbnail…

Fork of 3D Scatter Plot

This 3D scatter plot visualizes economic indicators by mapping their x, y, and z values onto points rendered as colored sprites. It uses Three.js alongside D3’s scaling and color scheme functions to position and tint each data point. The scene rotates slowly via D3’s zoom behavior with panning, and the code loads data from a CSV file. The visualization runs on Canvas with WebGL, rendering animated, interactive 3D points.

Jun 1, 2021

Loading thumbnail…

Fork of Fork of Customizing Axes

This example visualizes feature importance (MDI) for ten economic indicators as a horizontal bar chart, with proportions plotted on the x-axis and feature names on the y-axis. The chart uses d3.scaleLinear and d3.scaleBand to position bars, while d3.axisLeft and d3.axisBottom render axes with gridlines and a custom label. Data is loaded from a CSV file using d3.csv, and the SVG output is generated with React. The title is added as a text element, and the x-axis tick format is commented out.

Jun 1, 2021

Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes, including removing domain lines, styling tick text and lines, and adding an axis label and title. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and the `format` function to abbreviate tick labels with suffixes like “B” for billions. Data is loaded from a CSV file and rendered as SVG rectangles.

Jun 1, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The code uses d3.scaleLinear for the population axis and d3.scaleBand for the categorical country axis, with customized axes via d3.axisLeft and d3.axisBottom. It formats tick labels to abbreviate large numbers, adds a title and axis label, and removes default axis lines for a cleaner look. The bars are rendered as SVG rectangles with a fixed steelblue fill.

Jun 1, 2021