L

lohitsai.nikkil@gmail.com

@Lohitsai123·16 public vizzes

Loading thumbnail…

MC

This dark-themed chart compares average smartphone price and average battery life by brand, with white bars repainting the price scale on the left and a neon sky-blue line and dots marking battery life on the right. Built with React and D3 v6, the code uses `csv` to fetch data, `scaleBand` for the x-axis, `scaleLinear` for the two y-axes, and `axisBottom`, `axisLeft`, and `axisRight` for ticks. Animated hover states alter bar opacity and translate via CSS transitions, while the legend sits beneath the chart. Data comes from a remote gistfile.

Loading thumbnail…

Multi chart

This chart compares smartphone brands by average price and average units sold. Animated, rounded bars display average prices against a black background, while a glowing cyan line overlays the same chart to show average units sold, using a dual y-axis for the different scales. The visualization is built with React and D3 v6, using `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `axisRight` to construct the scales and axes. Data is loaded from a gist CSV and aggregated by brand, with hover tooltips and drop-shadow filters adding interactivity and visual polish.

Loading thumbnail…

sp

A scatter plot displays smartphone models by price on the x-axis and battery life on the y-axis. Each dot encodes brand through color and average rating through size, with a legend explaining the mappings. Built with D3 v7, the visualization uses SVG rendering and includes interactive tooltips that appear on hover. The data comes from a CSV file fetched via URL and parsed with D3's CSV parser, with custom text preprocessing to handle single-line formatting. Axis gridlines and styled panels enhance readability within a dark theme.

Loading thumbnail…

Bar chart

This bar chart displays the top 20 smartphone models by units sold, with each bar’s length representing millions of units and its color indicating the brand. Hovering reveals a tooltip with price, rating, and battery life. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `scaleOrdinal` with `schemePastel1` for color, and parses a single-line CSV dataset via `csvParse` after normalization. The SVG renders with grid lines, tick labels, and value annotations.

Loading thumbnail…

bar chart

A bar chart displays the top 15 smartphone models ranked by units sold in millions, with each bar colored by brand using a pastel ordinal scale. The React app loads CSV data via d3.csv, sorts it descending, and renders SVG bars with value labels, hover tooltips showing price, rating, and battery life, plus a legend. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.scaleOrdinal with schemePastel1 for coloring, all within a React functional component using useState and useEffect.

Loading thumbnail…

bar chart

This bar chart compares smartphone models by units sold in millions, using a vertical bar encoding to show each model’s total sales. The visualization is built with React 16.9 and D3 v5, where a `d3.scaleBand` positions the categorical model labels on the x-axis and a `d3.scaleLinear` maps the numeric sales values to bar heights. Data is loaded as CSV via `d3.csv`, and the SVG bars are rendered with rotated x-axis tick labels to accommodate the long model names.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between the price of various headphone brands and their units sold, with each point colored by brand and displaying a tooltip on hover for model details. The visualization uses D3.js version 7, importing functions like `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `schemeCategory10` to handle the scales, axes, and categorical color mapping. The data is loaded from a remote CSV file via `d3.csv` and rendered using an SVG container, with axes labeled "Price (USD)" and "Units Sold (Million)".

Loading thumbnail…

BAR CHART

A dark-themed bar chart ranks smartphone brands by total units sold in millions. Summed via `d3.rollups` and sorted descending, each brand appears as a blue bar with value labels, using a band scale for categories and a linear scale for counts. The CSV is fetched from a GitHub Gist, parsed with `d3.csvParse` and `d3.autoType`, then rendered as SVG with gridlines and rotated axis labels generated through `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

EV sales 2024

This example loads a CSV file from a remote URL and displays a preview of its first five rows in an HTML table. The page provides an input field and load button for pasting a custom raw CSV link, then renders column headers and data cells dynamically. The implementation uses D3 v7 to fetch the dataset and plain JavaScript DOM manipulation to build the table, with a dark-themed interface styled through CSS custom properties. A status message and metadata pill report the total row and column counts.

Loading thumbnail…

EV sales 2024

This example displays the first five rows of a 2024 EV sales dataset in a simple HTML table. It shows brand, model, sales, country, and year for vehicles from Tesla, Nissan, BYD, BMW, Hyundai, and others. The data is embedded as a CSV string within the page’s JavaScript and parsed with `split()` to build table rows and headers. The interface uses styled HTML elements with CSS for a dark theme, hover effects, and alternating row colors. No external visualization libraries are used—only native DOM manipulation via `innerHTML`.

Loading thumbnail…

EV sales 2024

This example presents a static HTML page titled “EV sales 2024,” but the provided code does not render any visualization. The index.html file loads a simple “Hello HTML!” message with CSS styling, while index.js only logs “hello world” to the console. No data, charting libraries, or rendering APIs are implemented. The visualization gallery entry therefore shows only a placeholder, with no actual EV sales data or graphical output.

Loading thumbnail…

automobiles

This example displays a summary, a preview table of the first five rows, and a static SVG flower illustration for a 100-row car dataset embedded as CSV. The page uses D3 v7 to render the data summary and table into the DOM, while the decorative SVG flower is drawn with basic shapes. It works offline in VizHub, with an optional CSV_URL variable for loading an external dataset.

Loading thumbnail…

index.html

This example displays a centered "Hello World!" message in a fixed 217-pixel font size. The container's inline HTML sets the text style directly, with the numeric value embedded via a JavaScript template literal. It uses the exported `main` function to populate the provided container element, demonstrating a minimal static-text rendering approach without external libraries or data sources.

Loading thumbnail…

automobiles

This example renders the text “Hello World!” at a large, fixed font size in the center of a container. It uses a plain HTML `div` with inline CSS styling to set the font size and text alignment, and the `container.innerHTML` assignment from the JavaScript API to inject the content. The visualization is static, showing only the stylized text without any interaction or data-driven elements.

Loading thumbnail…

Fork of Automobiles

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species of iris flowers. The visualization uses d3.scaleLinear and d3.scaleOrdinal to map data points, with hover interactions that highlight the selected species while fading others. Points are rendered as large circles with BBC-inspired color theming, and a custom legend provides interactive filtering. The chart displays titles, axis labels, and source attribution, all styled through CSS and configured via a centralized config object. The code also employs a ResizeObserver for responsive rendering.

Loading thumbnail…

Automobiles

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species. The code uses D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to construct the chart, with points styled via CSS classes. Interactive legend items trigger hover states that adjust point opacity. Data loads from a CSV via D3's `csv` parser, and a `ResizeObserver` handles responsive sizing.