N

Naveen Kumar Kolla

@NKKolla24·19 public vizzes

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive network graph visualizes relationships among car types, transmission types, and door counts. Using D3.js, it loads a CSV dataset and constructs a hierarchical node-link diagram with red, steelblue, and orange circles representing the categories. The `d3.forceSimulation` API handles physics-based layout with `forceLink` for edges, `forceManyBody` for repulsion, and `forceCenter` for positioning. Users can drag nodes via `d3.drag`, with the simulation adjusting in real time. The visualization renders as an SVG with labeled nodes and gray connecting lines.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A force-directed network graph reveals the hierarchical relationships among car types, transmission styles, and door counts using data from a CSV file. The visualization builds nodes for transmission types (Automatic, Semi-Automatic, Manual) and their associated door variations, linking them in a tree-like structure. Using d3.forceSimulation with forceLink, forceManyBody, and forceCenter, the SVG elements (circles, lines, and text labels) update positions on each tick. Nodes are color-coded by category—red for the root, steelblue for transmissions, and orange for door counts—and are interactive through d3.drag.

Loading thumbnail…

Fork of Fork of Fork 1

A static tree diagram called "Fork of Fork of Fork 1" visualizes a three-level hierarchy of car types. The root node "Car Types" branches into three transmission categories—Automatic, Manual, and Semi-Automatic—each with children representing door counts. Built with D3.js v7, the example uses `d3.tree()` and `d3.hierarchy()` to compute node positions, drawing horizontal links with `d3.linkHorizontal()`. Nodes are custom-styled: the root as a purple rectangle, depth-1 nodes as blue circles, and leaf nodes as orange diamonds. Although the code loads a CSV dataset, the displayed tree uses a hardcoded structure rather than the fetched data.

Loading thumbnail…

Fork of Fork 1

This example shows a hierarchical tree of car types, branching into transmission categories (Automatic, Manual, Semi-Automatic) and then door counts, with nodes rendered as distinct shapes (rectangles, circles, rotated squares) and colored per depth level. It uses d3.csv to load a remote dataset, then processes the data into a nested structure before applying d3.tree and d3.hierarchy to compute the layout. The visualization renders as SVG, drawing curved links via d3.linkHorizontal and positioning nodes with explicit translate transforms, while each node’s shape and fill color are assigned conditionally based on its depth.

Loading thumbnail…

Fork of Fork of Fork of 11702358-ice 8 -Network

This visualization shows a static tree diagram categorizing car types by transmission (Automatic, Manual, Semi-Automatic) and number of doors. The code uses d3.hierarchy and d3.tree to compute node positions, then renders SVG paths with d3.linkHorizontal for connections and circles with labels for each node. A hardcoded data object supplies the hierarchy, despite an unused d3.csv call referencing an external car price dataset. Styling is minimal, with steelblue node circles and gray links on a white background.

Loading thumbnail…

Fork of Fork of 11702358-ice 8 -Network

This interactive tree diagram displays a hierarchical classification of car types, branching from a root "Car Types" node into three transmission categories—Automatic, Manual, and Semi-Automatic—each with child nodes representing door counts. Built with d3.v7, the SVG visualization uses `d3.hierarchy` and `d3.tree` to compute node positions, then renders links with `d3.linkHorizontal` and nodes as circles with labels. The static dataset is hardcoded in the script, while an initial `d3.csv` call targets an external gist but its result remains unused.

Loading thumbnail…

ice-7.4

This example shows a scatter plot of the number of doors versus owner count for cars, with each point representing one vehicle from a CSV dataset fetched from a GitHub gist. The chart is rendered on a Canvas element using Chart.js, with linear scales for both axes and step sizes set to one. Data is loaded asynchronously via the Fetch API, parsed from comma-separated rows, and filtered for valid numeric values before being passed to the scatter chart. The plot uses teal points with a border width of one and a point radius of five, and includes a legend at the top.

Loading thumbnail…

Fork of activity6_tutorial3.2

This interactive scatter plot visualizes the relationship between the number of doors and owner count for a car price dataset. It uses Chart.js to render a canvas-based scatter chart, fetching data from a remote CSV file hosted on GitHub Gist. The JavaScript code asynchronously loads the CSV, parses each row, and filters out invalid numeric entries before plotting points with a teal color. The chart configuration includes linear axes with integer tick steps, and a legend positioned at the top. Data is mapped as x-coordinates for doors and y-coordinates for owner count, with each point having a radius of five pixels.

Loading thumbnail…

ice-7.3

This example shows an area chart of car types plotted against their number of doors, using data fetched from a remote CSV file. The chart is rendered on a Canvas element via the Chart.js library, with the `fill: true` option creating the shaded area beneath the line. The code fetches the dataset asynchronously, parses the comma-separated rows, and populates the chart’s labels and values. It uses Chart.js’s `new Chart()` constructor with a line type, and configures axes titles for “Car Model” and “no of doors”.

Loading thumbnail…

Fork of activity6_tutorial3.2

This area chart displays car model names along the x-axis against the number of doors on the y-axis, using a single line with a semi-transparent fill. The visualization is rendered on an HTML canvas using the Chart.js library, which fetches its data from a CSV file hosted on GitHub. The code asynchronously loads the CSV, trims the rows, and parses the numeric door counts before constructing the line chart with green coloring and a legend positioned at the top.

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This interactive line chart displays car prices and door counts across different car models. The visualization fetches CSV data from a GitHub Gist and renders it using Chart.js on an HTML canvas. After parsing the dataset asynchronously, the code creates a line chart with car models on the x-axis and door counts on the y-axis, using teal coloring and point markers. The chart is contained within a fixed-size container and responds to viewport changes.

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This interactive line chart displays car prices and door counts across different car models. The visualization fetches CSV data from a GitHub Gist and renders it using Chart.js on an HTML canvas. After parsing the dataset asynchronously, the code creates a line chart with car models on the x-axis and door counts on the y-axis, using teal coloring and point markers. The chart is contained within a fixed-size container and responds to viewport changes.

Loading thumbnail…

Fork of Reusable Scatter Plot

This example visualizes car prices as a line chart, plotting car models along the x-axis against the number of doors on the y-axis. It fetches CSV data from a remote GitHub gist and uses the Chart.js library to render the chart on an HTML canvas element. The code defines asynchronous functions to retrieve and parse the data, then constructs a line dataset with customized colors, point styling, and axis titles. The chart is rendered within a fixed-size container, making it a straightforward demonstration of Chart.js’s canvas-based line chart capabilities for tabular dataset exploration.

Loading thumbnail…

Fork of ice-7.2

This pie chart displays the distribution of car transmission types by counting how many vehicles in a dataset have each transmission category. The visualization is built using the Chart.js library on an HTML canvas element. It fetches comma-separated data from a remote GitHub gist URL, parses the transmission column from each row, and aggregates the counts before rendering them as colored pie slices with a legend positioned on the right. The chart uses a responsive layout within a fixed-size container.

Loading thumbnail…

ice-7.2

This example shows a pie chart of car transmission types against the number of doors, using data fetched from a CSV file hosted on GitHub. It uses Chart.js to render the pie chart on a Canvas element, with a legend positioned on the right. The code fetches the CSV data asynchronously, extracts the transmission column, and counts occurrences per type. The chart is styled with semi-transparent background colors and set to be responsive within a 400-pixel container.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

A minimal HTML/CSS/JavaScript scene depicts a red velvet cake on a plate, with a knife and colorful toppings, using positioned divs and CSS shapes for the illustration. The page loads with static elements, and a `script` defines an `addRandomTopping` function that appends new circular `topping` divs with random positions and RGB background colors to the cake element when invoked. No user interaction triggers the function automatically; it exists for manual calls.

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a stylized red velvet cake on a plate, rendered entirely with CSS shapes positioned on a blue table background. The scene includes a knife and a set of colored circular toppings scattered across the cake’s surface. The code uses plain HTML elements and CSS for layout, along with a JavaScript function `addRandomTopping` that dynamically appends new topping divs at random positions with random colors. The rendering approach relies on absolute positioning and border-radius styling to construct the visual composition.

Loading thumbnail…

Fork of Donut with Cofee

This example illustrates a study table scene created with HTML and CSS, showing a lamp with a glowing light, a book, a coffee cup, and a pen arranged on a brown surface. The visualization uses positioned div elements with custom styling, including border-radius, background colors, and box shadows, to render the objects. It demonstrates how static, non-interactive scenes can be built using only markup and style rules.

Loading thumbnail…

Fork of Donut with Cofee

This example shows a hand-drawn style still life of a chocolate donut with sprinkles and a cup of coffee on a tissue, rendered using the Canvas API’s `arc()`, `ellipse()`, and `quadraticCurveTo()` methods. The drawing is built through separate functions for each element, including a donut with a caramel layer, bite mark, and randomly placed colorful sprinkles, plus a coffee cup with steam and soft shadows. The code uses basic 2D vector graphics and geometric primitives to construct the entire scene on a fixed 600x500 canvas.