S

sharathchandrareddymuthyam

@sharathmuthyam·17 public vizzes

Loading thumbnail…

Fork of React & D3 Starter

A force-directed network diagram visualizes flight routes among seven cities, with node size reflecting degree centrality and color mapping to geographic region. The visualization uses D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes, while SVG circles, lines, and text labels render the graph. Interactive drag behavior is implemented via D3's `drag` function, and a legend identifies the four region categories. The data originates from a hardcoded JavaScript array of city nodes and weighted route links.

Loading thumbnail…

Fork of React & D3 Starter

This example presents a three-generation family tree as a static dendrogram, with each generation distinguished by a unique node shape and color. It uses D3’s hierarchy and tree layout algorithms to position nodes, while SVG paths draw the connecting links. The code leverages D3 v7 APIs such as `d3.select`, `d3.hierarchy`, `d3.tree`, `linkVertical`, and the `join` operator to build the visualization. A legend clarifies the shape-to-generation mapping, and the SVG is rendered directly in an HTML file with hardcoded family data.

Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes global population by country, using a blue sequential color scale where darker shades represent higher population counts and gray indicates missing data. The visualization loads a GeoJSON world map and a CSV of population figures, then joins them by ISO3 country codes. Built with D3 v7, it uses the `geoNaturalEarth1` projection and `geoPath` to render SVG paths, with interactive tooltips showing each country’s name and population via the `append('title')` method.

Loading thumbnail…

Fork of HTML Starter

A dark-themed area chart displays 150 days of temperature data for Denton, Texas, using a Date x-axis and Temperature (°F) y-axis. The visualization uses a linear gradient fill beneath a blue monotone curve to show temperature trends over time. Built with D3 v7, the code loads a CSV via `d3.csv()` with `d3.autoType`, parses dates with `d3.utcParse`, and projects scales using `d3.scaleUtc()` and `d3.scaleLinear()`. The area and line shapes are generated with `d3.area()` and `d3.line()`, both using `d3.curveMonotoneX`, and rendered as SVG with a responsive `viewBox`.

Loading thumbnail…

Fork of HTML Starter

This dark-themed line chart visualizes daily temperature readings in Denton, Texas over 150 days, with dates on the x-axis and degrees Fahrenheit on the y-axis. Data is loaded from a remote CSV file using `d3.csv` with `d3.autoType`, parsed via `d3.utcParse`, and rendered as an SVG path using `d3.line` with `curveMonotoneX` smoothing. The chart includes labeled axes, a background grid generated by `d3.axisLeft`, and a blue monotone curve, all styled with a custom dark color scheme.

Loading thumbnail…

Fork of HTML Starter

A dark-themed D3 v7 pie chart visualizes the sum of wickets by player role (Batter, Bowler, All-Rounder, Wicketkeeper) from a CSV of 150 cricket records, mapping roles to fixed colors via `scaleOrdinal`. Slices are drawn with `pie()` and `arc()`, and labels appear inside large slices while small ones use outside callouts. The SVG is animated through a `transition()` on slice paths, with a side legend built using D3's selection API.

Loading thumbnail…

Fork of HTML Starter

This dark-themed scatter plot visualizes cricket player performance, plotting StrikeRate against Runs with points colored by player role. Built with D3 v7, it loads CSV data from a GitHub gist and renders an SVG chart with axes, legend, and interactive tooltips. The visualization uses `d3.scaleOrdinal` for role-based coloring, `d3.extent` for scale domains, and mouse event handlers to display player details on hover.

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes cricket player statistics from a CSV file containing attributes like runs, matches, and strike rate. It uses D3 v7 to render an SVG chart, automatically detecting numeric columns to map to X and Y axes. The visualization includes axes with labels, colored dots that represent categorical groupings when present, and an interactive tooltip that displays data values on hover. The chart uses d3.scaleLinear for axis scaling, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.axisBottom and d3.axisLeft for axis generation. Data is loaded from an external CSV URL via a Gist.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Runs and Strike Rate for 150 cricket data points. The visualization uses the D3.js library to render an interactive SVG chart, with a linear scale mapping runs on the x-axis and strike rate on the y-axis. Each data point is represented by a circle with a radius of 5 pixels. The chart includes labeled axes, positioned using the `margin` configuration, and styled with the Share Tech font family. The data is loaded from a CSV file using `d3.csv`, then bound to circle elements via the reusable `scatterPlot` function.

Loading thumbnail…

Fork of HTML Starter

This example combines a bar chart and a line chart in a single SVG view to compare the total runs and batting average of the top 15 Indian cricketers from a CSV dataset. The bars, rendered with `d3.scaleBand` and `d3.scaleLinear`, show runs on the left axis, while a crimson line, plotted with `d3.line`, overlays average values on a right axis. D3 v7 axes, gridlines, and hover tooltips supplement the visualization, which loads data asynchronously via `d3.csv`.

Loading thumbnail…

Fork of HTML Starter

This multi-series line chart compares the total runs and wickets of Indian cricketers against their number of matches played. The visualization uses D3.js v7 with SVG rendering, employing `d3.line` and scale functions to plot two separate paths for runs and wickets across the first 20 players. Each player is represented as a data point along the x-axis, with the y-axis scaled to accommodate both metrics. The chart includes axes with labels, a legend distinguishing the two series by color, and a title, all built using D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `append` methods. The data comes from the `ice_data_150.csv` file.

Loading thumbnail…

Fork of HTML Starter

This scatter plot compares batting average against strike rate for a dataset of Indian cricketers parsed from a CSV file. Each circle represents a player, positioned by their average on the x-axis and strike rate on the y-axis, with hover tooltips revealing individual stats. The visualization uses D3 v7 to load the data via `d3.csv`, scale values with `d3.scaleLinear`, and render the axes and SVG circles. It also includes labeled axes and a chart title to structure the comparison.

Loading thumbnail…

Fork of HTML Starter

A bar chart from the D3.js visualization library shows the top 20 Indian cricketers ranked by their total runs scored, using data loaded from a CSV file. The visualization employs a categorical x-axis for player names and a linear y-axis for run counts, with data sorted in descending order and styled as steelblue bars. Built with d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, the chart includes rotated player-name labels for readability and hover effects that change bar colors to darkorange.

Loading thumbnail…

ICE6 Indian Cricketers ODI Runs Bar Chart

This example visualizes the ODI career runs of Indian cricketers as a static bar chart. The chart orders players by total runs and displays their run counts as vertical bars. The implementation uses D3.js for rendering SVG elements, including scales for mapping data to pixel coordinates and axes for labeling. The data is hardcoded within the script, and the visualization is presented on a plain HTML page with minimal styling. The code demonstrates a straightforward bar chart layout without interactive features or animations.

Loading thumbnail…

Fork of HTML Starter

This dark-themed visualization loads the Indian Cricketers CSV dataset via `fetch` and `d3.csvParse` with `d3.autoType`, displaying a summary card with file size, row, and column counts. Next to a mini SVG bar chart encoding Runs per Player, a decorative SVG cricket bat and ball is drawn using basic shapes like `circle` and `rect`. The chart uses D3 v7 selections such as `d3.select` for DOM manipulation, with axes and bars styled through CSS variables.

Loading thumbnail…

Fork of HTML Starter

This example displays summary statistics and a sample record from a CSV dataset of Indian cricketers on a dark-themed page. It visualizes the data by fetching a local `data.csv` file and using `d3.csvParse` to parse the text, then displaying the file size, row count, and column count within a styled summary card. A single row's player name, role, matches, and runs are shown in a separate sample box. The page also includes a decorative SVG illustration of a cricket bat and ball, and uses D3.js v7 methods like `d3.select` to update the HTML content dynamically.

Loading thumbnail…

Fork of HTML Starter

This example visualizes summary statistics from a dataset of Indian cricketers, displaying file size, row count, and column count in a styled HTML card, alongside a sample player record. After fetching the CSV from a GitHub gist, the code uses D3 v7’s `d3.csvParse` to parse the text and `d3.select` to update the DOM with the computed values. An accompanying inline SVG depicts a cricket bat and ball as decorative artwork.