Naveen Kumar

@naveenk18·11 public vizzes

Bonus ICE - 3D Bar Chart

This example visualizes average stock prices for nine major companies from 2015 to 2022 in an interactive 3D bar chart using X3DOM and d3-x3d. The d3.csv method loads data from a GitHub-hosted CSV file, which is parsed and bound to the chart via chartHolder.datum(data).call(myChart). The bar chart shows each stock on one axis, the year on another, and the price as the bar height, with the scene rendered in a browser using X3D markup.

Apr 6, 2023

Loading thumbnail…

Bonus ICE - 3D Scatter Plot

This 3D scatter plot visualizes the classic Iris dataset, displaying sepal and petal dimensions in a three-dimensional space. The project uses Plotly.js (version 2.9.0) to render an interactive scatter3d chart within an HTML page, while D3.js (version 3.5.17) is used to fetch and parse the remote CSV data via the `d3.csv` method. Colors encode the three Iris species, mapped through a custom colorscale. The code also configures axis titles, background colors, and explicit margins to create a clean presentation of the data.

Apr 6, 2023

Loading thumbnail…

3D Bar Chart

This example visualizes a simple dataset of four rectangular bars as a three-dimensional bar chart, with each bar’s height representing its value and the entire group tilted in perspective. The bars are drawn on an HTML canvas element using a 3D projection provided by the `d3._3d` API, which handles rotation and perspective scaling. The code relies on D3.js v7 for data binding and scale construction, while rendering is performed manually via Canvas 2D context methods like `beginPath` and `fill`, with the projection transforming each bar’s corners into 2D screen coordinates.

Apr 6, 2023

Loading thumbnail…

ICE 7 - Reusable D3 ScatterPlot.

This example presents an animated scatterplot of the Iris dataset, cycling through different petal and sepal measurements on the x-axis while the y-axis remains fixed on sepal length. The visualization uses D3 v6 within a React framework, rendering SVG circles whose colors correspond to iris species. A reusable `scatterPlot` function, built with `scaleLinear`, `axisLeft`, and `axisBottom`, handles the axes and marks, while `setInterval` triggers periodic updates to the x-axis mapping. The code also includes custom legend labels and axis titles generated dynamically.

Mar 30, 2023

Loading thumbnail…

ICE 7 - Line Chart(Gold Prices)

This visualization shows the yearly trend in average gold prices from a CSV dataset, with the x-axis mapping year and the y-axis mapping the average closing price in USD. The line chart uses D3 v5’s `scaleLinear`, `scaleTime`, and `axisBottom`/`axisLeft` to build the axes, while a `line` generator with a `curveBasis` path renders the smooth red trend line. The React-served SVG includes axis labels and a title, with data loaded via `csv` from a GitHub Gist.

Mar 30, 2023

Loading thumbnail…

ICE 7 - Area Chart(Gold Prices)

This area chart visualizes gold price trends over time, displaying yearly average closing prices in U.S. dollars. The visualization uses a green filled area with a smooth curve to represent price fluctuations, with labeled axes for year and price. It loads data from a GitHub Gist and renders using D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and axis generators. The SVG output includes styled titles and clear axis labels, with data parsed from CSV format.

Mar 30, 2023

Loading thumbnail…

ICE 7 - Pie Chart

This visualization displays the monthly subscription costs for YouTube Premium in ten different countries, using a pie chart to compare prices in US dollars. Each slice is colored using the `scaleOrdinal` and `schemeCategory10` color scales, with a legend on the right listing each country and its corresponding price. The code utilizes D3 v5 APIs including `pie`, `arc`, and `csv` to parse data from a GitHub Gist, sorting the values in descending order before rendering. The SVG is statically sized, and hover interactions log data to the console.

Mar 30, 2023

Loading thumbnail…

ICE-6 (Marks and Channels) - Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while encoding species identity through circle fill colors (blue, yellow, or red). The SVG rendering uses d3.scaleLinear to establish x and y axes, with d3.axisLeft and d3.axisBottom providing tick marks. Data loads asynchronously via d3.csv, and circles are joined to the DOM using selection.join. The code also stores sepal measurements as unused circle radii properties, while axis labels appear rotated and positioned via SVG text elements.

Mar 29, 2023

Loading thumbnail…

ICE 6 (Marks and Channels) - Bar Graph

This bar graph visualizes sales figures for 30 US states from the Superstore dataset, with states on the y-axis and sales values on the x-axis. The React component loads data via d3.csv and renders SVG rectangles scaled by d3.scaleBand and d3.scaleLinear. Grid lines and tick marks are generated manually using d3.format, while axis labels are positioned from the scales' domain values. Each state’s bar length encodes its total sales, allowing quick comparison across the displayed subset.

Mar 23, 2023

Loading thumbnail…

ICE 5

This example fetches Olympic athlete data from a remote CSV file using d3.csv and displays basic dataset statistics, including file size, row count, and column count, as text within an HTML pre element. The page renders a static SVG image using a base64-encoded PNG pattern. It relies on D3 v7 for data loading and formatting, with a React starter framework, though the visible code uses plain JavaScript and CSS for layout.

Mar 9, 2023

Loading thumbnail…

Overlapping Buddha

A grid of small, semi-transparent, randomly colored diamond polygons is rendered in React and SVG, with each diamond’s position and fill generated from nested loops and `Math.random()` calls. A large, intricate Buddha path is overlaid on top of this scattered background, drawn using SVG `<path>` data and transformed with a scale and translate. The sketch uses React’s declarative JSX to map over arrays and create hundreds of `<polygon>` elements, while the Buddha silhouette anchors the composition against a black background.

Mar 2, 2023