M

maheganesh

@maheganesh·25 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Line_Stroke_Death

This fork of Line_Stroke_Death shows restaurant sales counts over time, with a smooth green curve plotted on a scatter-free line chart. The visualization uses D3 v5 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to generate the SVG path. It loads CSV data from a GitHub gist, parses numeric fields, and renders axes with custom labels. The chart includes a title, rotated y-axis label, and styled stroke using the CSS class `.line-path`.

Loading thumbnail…

Fork of ICE7 Area

This example displays a dual-area chart showing the total number of restaurants in the USA alongside NOx levels across years, with the data sourced from a CSV file. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to generate two filled paths rendered as SVG. The chart includes axis labels, a title, and custom tick formatting, with the orange and blue areas representing the respective datasets.

Loading thumbnail…

Fork of Area Death's

This area chart visualizes average life expectancy by year, using temperature data from San Francisco as the underlying dataset. It renders an SVG with D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to draw the filled path, while axes are generated with `axisBottom` and `axisLeft`. The data is loaded via `csv` from a GitHub gist, and the chart includes custom styles for the title and axis labels.

Loading thumbnail…

Fork of Line_Stroke_Death

This example shows a line chart of annual restaurant counts, plotting year against sales figures from a CSV dataset. The line uses a smooth basis curve, with orange styling and an 8-pixel stroke width. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis`. The data is loaded via `d3.csv` from a GitHub Gist, and the chart includes labeled axes and a title.

Loading thumbnail…

Fork of ICE7 Line Chart

This line chart displays the average life expectancy over time, with the y-axis labeled as "Carbon Monoxide Emission" and the x-axis as "Year." The visualization uses a blue smoothed line (via `curveBasis`) to connect data points. It is built with D3 v5, using `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` to render the SVG. The data is loaded from a CSV file via the `csv` function, with numeric parsing for the Year and CO values.

Loading thumbnail…

Fork of ICE7 Line Chart

This line chart visualizes restaurant expenses over time, plotting yearly profit data as a smooth blue curve. The visualization uses D3 v5 with an SVG renderer, employing `scaleLinear` for both axes and `line` with `curveBasis` for the curved path. Axis labels and a title are added, while the data comes from a CSV file about San Francisco restaurants, loaded via `d3.csv`. Gridlines are generated through tick marks with negative lengths.

Loading thumbnail…

ICE 7 Pie Chart

This pie chart visualizes the top ten restaurants by daily biryani sales, using color-coded slices to represent each hotel’s total units sold per day. The visualization loads CSV data from a GitHub gist, processes it with `d3.pie()` and `d3.arc()` to generate the chart, and applies `d3.scaleOrdinal` with `schemeCategory10` for coloring. Hovering over a slice logs its sales value to the console. Legends display restaurant names and formatted sales values, all rendered as SVG within a React-based D3 v5 setup.

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart visualizes global sales data for the top ten PlayStation 4 games, sorted by total units sold. It uses D3.js (v5) within a React framework to render an SVG with a pie chart and a corresponding legend, showing each game's genre and total units. The code employs `d3.pie` and `d3.arc` to generate the segments, and `d3.scaleOrdinal` with `schemeCategory10` for coloring, with data loaded via `d3.csv` from a GitHub repository.

Loading thumbnail…

Fork of ICE7 Reusable Scatter

This example visualizes PS4 game sales data as an animated scatter plot, showing global sales against release year across product categories. The visualization cycles the x-axis between Year and North American sales every few seconds. Built with D3 v6 and React, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, renders circles as SVG marks, and includes a hand-coded legend with color-coded categories. Data loads from a CSV via `d3.csv`, with axis transitions driven by `setInterval`.

Loading thumbnail…

Mahendra Gullinkala IC-6

This scatter plot displays Telugu movies by duration on the x-axis and IMDB rating on the y-axis, with each movie colored by its genre. The visualization uses d3.v6’s `csv` loader to fetch data from a GitHub gist, parsing numeric fields for rating and duration. A linear scale maps the data extent to screen coordinates, and square markers (rendered as SVG `rect` elements) are colored via a custom switch function for genres like Drama, Action, and Romance. Axes are generated with `axisLeft` and `axisBottom`, while custom text labels annotate both dimensions.

Loading thumbnail…

Mahendra Gullinkala IC-6

This scatter plot displays Telugu movies by duration on the x-axis and IMDB rating on the y-axis, with each movie colored by its genre. The visualization uses d3.v6’s `csv` loader to fetch data from a GitHub gist, parsing numeric fields for rating and duration. A linear scale maps the data extent to screen coordinates, and square markers (rendered as SVG `rect` elements) are colored via a custom switch function for genres like Drama, Action, and Romance. Axes are generated with `axisLeft` and `axisBottom`, while custom text labels annotate both dimensions.

Loading thumbnail…

Mahendra Gullinkala - IC6

A horizontal bar chart displays the highest individual scores for 20 cricket players, ranked by name along the y-axis and score magnitude along the x-axis. The visualization uses React to manage state and lifecycle, loading CSV data via d3.csv and parsing numeric values on input. d3.scaleBand and d3.scaleLinear map player names and scores to SVG rectangles, while gridlines and axis tick labels are generated manually using xScale.ticks() and d3’s axis formatting utilities. The chart updates reactively when data arrives, with a red vertical gridline marking each tick value.

Loading thumbnail…

Mahendra Gullinkala - IC6

This visualization shows the highest runs scored by each of the top 20 cricket players, displayed as a horizontal bar chart with player names on the y-axis and run values on the x-axis. The chart uses React and D3 v5 to fetch CSV data from a GitHub gist, process it, and render SVG bars. D3’s `scaleBand` and `scaleLinear` handle the axis mappings, while `axisLeft`, `axisBottom`, and `max` are imported for layout and scaling calculations. The bars are drawn as SVG rectangles, with red tick gridlines and labels generated from the linear scale’s ticks.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes cricket player performance by mapping petal length against petal width, with color-coded species markers and rotated axis labels for runs scored and player names. The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles as SVG elements with `d3.selectAll` and `.join`. Axis construction employs `d3.axisLeft` and `d3.axisBottom`, while the D3 v6 library handles data parsing and DOM manipulation within a React framework.

Loading thumbnail…

Mahendra ICE 5

This example displays a dataviz titled "Mahendra ICE 5," built with D3 v5 within a React framework, rendering via SVG and WebGL. The page presents a static image embedded in an SVG pattern, alongside styled text and a table, using CSS for visual formatting. The core visualization relies on an SVG `<pattern>` and `<image>` element to display the graphic, while D3 is loaded via a CDN script tag. The overall layout emphasizes a bold, colorful design with aqua and yellow borders, showcasing a simple, image-based data presentation rather than interactive or dynamic charts.

Loading thumbnail…

Fork of Cricket World Cup

This example displays the file size, row count, and column count of a cricket ODI dataset, alongside a static SVG match visualization. It uses an XMLHttpRequest to fetch the CSV from a GitHub gist, parses the text into rows and columns, and formats the response’s Content-Length header into human-readable bytes. The page embeds the pre-rendered “Cricket_ODI_all teams” SVG image directly in the HTML, with React starter code present but no framework logic exercised. No interactive charts or D3 rendering occur.

Loading thumbnail…

Mahendra ICE 5

This example displays a dataviz titled "Mahendra ICE 5," built with D3 v5 within a React framework, rendering via SVG and WebGL. The page presents a static image embedded in an SVG pattern, alongside styled text and a table, using CSS for visual formatting. The core visualization relies on an SVG `<pattern>` and `<image>` element to display the graphic, while D3 is loaded via a CDN script tag. The overall layout emphasizes a bold, colorful design with aqua and yellow borders, showcasing a simple, image-based data presentation rather than interactive or dynamic charts.

Loading thumbnail…

Cricket World Cup

This example displays the metadata of a Cricket World Cup ODI dataset, including the file size, row count, and column count, alongside a static SVG visualization of all teams. It uses a raw XMLHttpRequest to fetch a CSV file from a GitHub gist, then parses the response text by splitting on newlines and commas to compute the dataset dimensions. The page also embeds an image of the team comparison chart and provides a link to the source data. It relies on vanilla JavaScript and the browser’s XMLHttpRequest API, with no external visualization libraries.

Loading thumbnail…

Fork of ICE 5

This example displays a tabular view of car data fetched from a GitHub Gist, showing a preview of rows and column names within a styled HTML page. It first renders a decorative SVG image, then uses D3.js `d3.csv` to load the external CSV, computes the file size in kilobytes, and appends a table to the DOM using `d3.select` and `append`. Styling is applied via CSS for the table, borders, and background, providing a clear, albeit basic, data exploration interface.

Loading thumbnail…

Mahendra ICE 5

This example loads a CSV file from a GitHub Gist and displays both a text summary and a tabular preview of the data. The summary shows file size in kilobytes, row and column counts, and column names. The table renders the first 18 rows using D3 v5’s `d3.csv` and `d3.select().append()` methods. A static SVG image is embedded in the page, and the visualization uses basic CSS styling for borders and background colors. The code demonstrates straightforward data ingestion and tabular presentation without any advanced charting or animation.

Loading thumbnail…

Cricket World Cup

This example visualizes Cricket World Cup data by displaying a static SVG chart of ODI statistics for all teams, alongside file metadata such as row and column counts. The page, built with React, loads a CSV dataset from a GitHub gist and presents it with a linked image file. The code uses plain HTML, CSS, and JavaScript for structure and styling, while the chart itself is an embedded SVG image rather than a dynamically rendered visualization. No interactive or data-driven rendering libraries are employed.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Overlapping Buddha renders a colorful SVG figure built from repeated path data, layered with nested array mappings that generate random semi-transparent colored rectangles across the canvas. A floral background image is set via CSS on the body, while the Buddha path is scaled and translated within a React component. The visualization uses React 16 and ReactDOM to manage the SVG elements, with the path coordinates hardcoded and the grid of rectangles produced through multiple nested `Array.map( )` calls.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A random grid of small colored rectangles overlays a large, intricate SVG path drawing of a Buddha silhouette. The rectangles, generated through nested array maps, use random x and y positions, sizes, and RGB fill values. The visualization is built with React and rendered as SVG, combining generative geometric noise with a detailed vector illustration.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of randomly colored squares overlays a black-background SVG rendering of a Buddha silhouette, with the shape repeated and scaled to create overlapping, kaleidoscopic effects. Built with React and rendered as SVG, the visualization uses nested `map` calls to generate hundreds of rectangles whose positions and RGB fill values are determined by `Math.random()`. The Buddha path itself is drawn from a static SVG `path` string, transformed via a `g` element’s `translate` and `scale` attributes.

Loading thumbnail…

Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful, overlapping composition of the Buddha path is rendered atop a field of randomly positioned, semi-transparent rectangles. The code uses React with JSX to construct SVG elements, mapping over a nested array to generate the rectangles with randomized coordinates and RGB fill values. The Buddha shape is drawn using an SVG `path` within a transformed group, layered over the generative background.