V

Vineela Reddy

@amarsree26·75 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Famil Tree

A family tree visualization renders a hierarchical dataset as a branching diagram of nodes, where each person is represented by an aqua circle with a maroon border and their name displayed in purple text. The tree is built using `d3.stratify` to structure the data and `d3.tree` to compute the layout, with SVG `path` elements drawing the connecting links. Animations use `transition` to progressively draw the links and fade in the circles and labels, creating a dynamic reveal of the genealogy.

Loading thumbnail…

Fork of Fork of Famil Tree

This family tree visualization uses a static dataset of parent-child relationships to display a two-generation hierarchy. It shows the connections between a root ancestor and fifteen descendants, with each individual represented as a maroon-bordered, aqua circle. The example uses D3 v6 to create the tree layout via the `d3.stratify()` and `d3.tree()` APIs, computing node positions for the SVG render. Circles and connecting paths are animated into place using D3's `.transition().duration()` and `.attr()` methods, while text labels (in purple) identify each family member. The rendering uses SVG elements—`circle`, `path`, and `text`—and applies a simple animation on initial load.

Loading thumbnail…

Fork of Famil Tree

This example shows a family tree with a single root node, Geetha, connected to multiple generations of descendants. The nodes are rendered as large aqua circles with thick maroon borders, and each node is labeled with the person’s name in purple text. The code uses `d3.stratify` to build a hierarchy from flat data, `d3.tree` to compute the layout, and SVG transitions to animate the drawing of links and the appearance of nodes and labels.

Loading thumbnail…

Fork of SOCIAL NETWORK

A force-directed network graph displays ten named nodes and nine weighted links, using red edges and blue circles with lime text. The visualization loads node and link data from a local `network.json` file, then applies a `d3.layout.force` simulation with gravity, charge, and distance parameters. SVG renders circles and lines, while node labels appear as text elements; user interaction enables drag-and-drop via `force.drag`. Link stroke widths scale by `Math.sqrt(d.weight)`, and the running simulation updates positions on each tick event.

Loading thumbnail…

SOCIAL NETWORK

A social network diagram displays ten named people as blue circular nodes connected by red lines, with link thickness proportional to each connection’s weight. The force-directed layout, created with `d3.layout.force`, positions nodes using gravity, charge, and distance parameters while supporting drag interaction. Data comes from an external `network.json` file containing node names and weighted links. The visualization renders in SVG, with node labels styled in red and lime text, and red strokes on both circles and links.

Loading thumbnail…

Fork of ICE-8 Social Network Graph

This example shows a social network graph with ten named people (such as VIni, Srija, and Gomaze) connected by weighted links. The visualization uses a force-directed layout created with `d3.layout.force()`, where node positions are calculated based on gravity, charge, and link distance. Data is loaded from a `network.json` file, and nodes are rendered as colored circles with labels in SVG. Link widths scale with the square root of each connection’s weight, while nodes support drag interactions through `force.drag`. The code loads both d3 v4 and an older v2 script, though only the v4 API appears active.

Loading thumbnail…

Famil Tree

This example shows a family tree as an animated SVG diagram, with 15 nodes representing individuals connected by parent-child links. The visualization uses D3 v6’s `d3.stratify` to convert flat data with child-parent relationships into a hierarchy, then `d3.tree` to compute the layout. Circles represent each person, while maroon paths draw the connections. On load, links and labels animate via `transition().duration()`, with text fading in based on each node’s depth. The code employs SVG circles, paths, and text elements, styled with aqua fills and maroon strokes, to render the tree centered within the viewport.

Loading thumbnail…

Fork of Sweden Map

This example displays a choropleth-style map of Sweden’s counties, rendered as an SVG with aqua-filled regions outlined in red and internal borders in teal. It uses React to render the map and D3’s `geoMercator` projection with `geoPath` to draw the geographic features. The data is loaded as TopoJSON from a GitHub gist and processed with `feature` and `mesh` from the topojson library. The map shows the country’s subdivisions, with a simple loading state displayed while data fetches.

Loading thumbnail…

Sweden Map

This example presents a choropleth-style map of Sweden’s counties, rendered as SVG paths using the Mercator projection via `d3.geoMercator` and `d3.geoPath`. The map outlines each county with a red stroke and aqua fill, while internal borders are highlighted in teal. County geometries are loaded from a TopoJSON file, converted to GeoJSON using `topojson.feature` for areas and `topojson.mesh` for boundaries. The React component fetches and uses the data through `useData`, producing a static, interactive-free visualization.

Loading thumbnail…

Fork of Fork of Swedish map

This visualization displays a choropleth-style map of Swedish counties, with each county filled in aqua and outlined in red, while internal borders are rendered in teal. The map uses React to manage component state and rendering, with D3’s `geoMercator` projection and `geoPath` to generate SVG paths from TopoJSON data. The projection is fitted to the map extent using `fitExtent`, and the data is loaded from a GitHub-hosted simplified Swedish counties dataset via D3’s `json` method and TopoJSON’s `feature` and `mesh` functions.

Loading thumbnail…

Fork of Swedish map

This example displays a choropleth-style map of Swedish counties, with each county filled in aqua and outlined in red, while shared interior borders appear in teal. The visualization uses a geoMercator projection fitted to the geographic data via `projection.fitExtent`. Built with React and D3 v5, it leverages `d3.geoPath` to render SVG paths from TopoJSON data, styled through CSS class selectors and framed by a simple SVG container.

Loading thumbnail…

Atlas Map

This atlas map visualizes global GDP per capita for the year 2020, using a color gradient from yellow to blue to represent the quantile distribution of the data. Countries with missing data appear in gray. The map is rendered with the D3.js library, using `geoNaturalEarth1` for the projection, `geoPath` for country outlines, and `geoGraticule` for the graticule and outline layers. GDP data is fetched from a CSV file, while country geometries are loaded from a TopoJSON world atlas.

Loading thumbnail…

Fork of Atlas Map

This fork of the Atlas Map uses D3.js to render a global choropleth map of GDP per capita for the year 2020. It displays countries colored on a blue-green scale using a `d3.scaleQuantile` mapping, with gray for missing data, overlaid with red graticule lines and an aqua outline. The visualization fetches geographic data from a TopoJSON world atlas and economic data from a CSV file, then uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw the countries.

Loading thumbnail…

Fork of Fork of Area graph for sleping time and population

This area graph visualizes the relationship between sleeping hours and age group count. The x-axis represents sleeping time, while the y-axis shows the count of individuals within each age group. Using D3.js v5, the visualization renders an SVG with a smooth, curved line and a purple filled area beneath it. The chart loads CSV data from a remote GitHub gist, applies time and linear scales, and includes labeled axes with custom styling for tick marks and text.

Loading thumbnail…

Fork of Area graph for sleping time and population

This example displays an area graph showing the relationship between sleeping hours and age group count. The visualization uses a smoothed curve to represent the data, with the area beneath the line filled in purple. The chart includes labeled axes for sleeping hours and age group count, with a title and gridlines. The code loads CSV data from a GitHub gist and uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.area with d3.curveBasis to render the SVG graphic.

Loading thumbnail…

Fork of 3d- chart

This example shows a stacked 3D column chart comparing average sleeping hours for males and females across seven age categories, with the columns arranged in depth-based groups along a simulated z-axis labeled “Countries.” The chart uses Highcharts with the highcharts-3d module, setting the chart type to `column` and enabling `options3d` with alpha and beta rotation angles. Axis categories are hardcoded in the `xAxis` configuration, while the `series` data arrays provide paired `[x, y]` values for each gender, and `plotOptions.column` controls depth and group padding for the three-dimensional effect.

Loading thumbnail…

3d- chart

This 3D column chart compares average sleeping hours for males and females across seven age groups, from under 12 to over 60. The chart uses Highcharts with the Highcharts-3D extension to render two series of stacked columns in a three-dimensional space, with configurable depth, alpha, and beta angles for the viewing perspective. The x-axis displays age categories, the y-axis represents sleeping hours, and a z-axis title labels the data by country, though the series data is hardcoded in JavaScript. The rendering applies a purple background and uses the highcharts jQuery wrapper for initialization.

Loading thumbnail…

Area graph for sleping time and population

This area graph visualizes the relationship between sleeping hours and age group count, using a smooth curve to show the distribution across the dataset. The chart combines a purple filled area with a black stroke line, with axes labeled for sleeping hours and age group count. It uses D3.js v5, specifically the `area`, `line`, `scaleTime`, and `scaleLinear` APIs, to generate the SVG rendering. The data is loaded from a CSV file hosted on GitHub Gist, with both the area and line paths created using the `curveBasis` interpolation for smooth transitions.

Loading thumbnail…

Fork of ICE7 Line Chart

This line chart visualizes the median PM 2.5 concentration across different age-group bands, with data loaded from the Gray Area Foundation's "Data Canvas - Sense Your City" initiative. The visualization uses the D3 v5 library, specifically leveraging `select`, `csv`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a basis curve to render a smooth SVG path. The chart includes labeled axes for "Month" and "Median PM 2.5 Conc," with a blue stroke styling for the plotted line.

Loading thumbnail…

Fork of Line chart of vini

This example visualizes population counts by age group over time as a single red line chart. The data is loaded from a CSV file hosted on GitHub Gist and rendered as an SVG. Using D3 v5, it employs `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and a `line` generator to draw the path. Axis labels and a chart title are styled via CSS, with gridlines created through axis tick settings.

Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

Loading thumbnail…

Pie chart

This visualization presents the distribution of survey respondents across different age groups using a pie chart. The chart is rendered as an SVG using React and D3 v5, with each section colored distinctly and labeled with a data value. Data is loaded asynchronously from a CSV file using `d3.csv`. The code constructs the pie using `d3.pie`, generates arcs with `d3.arc`, and applies colors via `d3.scaleOrdinal`. A legend, created with SVG `<rect>` and `<text>` elements, maps each color to its age group and member count.

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart visualizes cost versus age, plotting data points from a CSV file with hour values across age categories. The chart uses D3 v5 to create a smooth curved area and line representation, employing scaleLinear and scaleTime for the axes with curveBasis for path smoothing. The SVG rendering includes labeled x and y axes, a legend, and a yellow-filled area beneath a black stroke line, styled with bold axis labels and a headline.

Loading thumbnail…

Fork of Area Chart of Uk Population

This visualization displays sleep duration across different ages in the UK population, using a smooth curve with an area fill beneath it. The SVG chart, built with D3 v5, maps age on the time-scaled x-axis and sleep duration on the linear y-axis. It uses `d3.area()` and `d3.line()` with `curveBasis` to create the filled curve, alongside `d3.scaleTime`, `d3.scaleLinear`, and axis generators for labels, styling ticks and axes in orange and black.

Loading thumbnail…

Fork of radial pie ex

This visualization presents a radial pie chart where two categorical groups, Female and Male, are compared across five age buckets. The code uses D3 v4 with the `d3.arc` generator to create annular sectors, with a custom `d3-scale-radial.js` module providing `scaleRadial` for radial extent mapping. Data is loaded from CSV files, and a stacked layout via `d3.stack` layers the age categories. SVG rendering includes grid circles, rotated gender labels, and a legend, all centered within a 960-pixel square canvas.

Loading thumbnail…

Fork of BArcharts of Insulin

This fork of BArcharts of Insulin displays a modified bar chart from D3 examples, using insulin and age data from a CSV file with medical attributes. The code sorts the dataset by age and renders horizontal bars against an age axis, though the original axis and chart elements are commented out. Using D3 v6 APIs like `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, the SVG visualization shows the relationship between insulin and age, though the final output is minimal due to commented-out rendering code.

Loading thumbnail…

Getting Started with Chart JS with www.chartjs3.com

This example shows a bar chart of weekly sales data for Monday through Sunday, rendered on an HTML canvas element. It uses the Chart.js library, loaded from a CDN, to create the chart with labeled bars and distinct colors for each day. The HTML page includes CSS styling for a menu bar and chart card layout, while the JavaScript code defines the dataset, configures the bar chart type, and displays the Chart.js version number in the page header.

Loading thumbnail…

Fork of React Starter

This example demonstrates a doughnut chart built with Chart.js, displaying categorical color-coded data slices against a React-based “Hello React!” message. The visualization fetches soccer statistics from a remote CSV file, parsing values like matchweek, expected points, and actual points. While the fetched data is stored in application state and rendered as JSON text, the visible chart remains hardcoded with sample values, leaving the CSV data separate from the graphical output. The canvas element renders the chart via the Chart.js API, alongside React’s rendering of the text message.

Loading thumbnail…

Fork of React Starter

A React starter example renders a static "Hello React!" message in large, centered text on a blank page. The app uses `ReactDOM.render` to mount a single functional component into the `#root` element, with styling applied via a CSS class. It relies on React 16.13.1 from the UMD production build, demonstrating the minimal setup for a React application without additional data or interaction.

Loading thumbnail…

ice

This example displays a 3D scatter plot of iris flower measurements, with points colored pink and green representing different dimensions of calyx and corolla features. The visualization uses the Plotly JavaScript library to render the chart, while D3.js handles loading the dataset from a remote CSV file via the `d3.csv` function. The code overlays two scatter traces, one configured as `scatter2d` and another as `scatter3d`, within a single plot area, though only the 3D trace is visible in the rendering.

Loading thumbnail…

Fork of bonus ice

This visualization presents a 3D scatter plot of flower measurements, displaying both corolla length and corolla width against calyx dimensions in a single interactive view. The code uses the Plotly JavaScript library (plotly-2.9.0) with its `Plotly.newPlot` API to render two scatter traces: one 2D trace showing calyx length versus calyx width, and one 3D trace plotting calyx length, calyx width, and corolla width. Data is loaded from a CSV file hosted on GitHub using d3.csv, with the marker styling differentiating the two traces.

Loading thumbnail…

Fork of 3D Scatter Plot

This fork of a 3D scatter plot visualizes the Iris dataset, displaying two series of markers that map sepal length, sepal width, and either petal length or petal width. The visualization uses Plotly’s `Plotly.newPlot` to render a `scatter3d` chart inside a `div`, with data loaded via `d3.csv`. Each trace configures marker size, opacity, and line styling, while the layout removes all margins to focus on the plotted points.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This 3D bar chart displays product sales across categories for several countries using Highcharts with its 3D extension. The visualization presents a column chart with depth, rotation, and stacking enabled, showing sales data for the US, Germany, Australia, Bangladesh, Sri Lanka, and Canada across seven product types. The chart uses Highcharts’ JavaScript API with options3d configuration to create the three-dimensional perspective, while the x-axis lists product categories and the y-axis shows total sales. The visualization forks a prior example and loads data directly in the series arrays.

Loading thumbnail…

Fork of Untitled

This example shows a 2D scatter plot of product cost versus selling price, with each product represented as a small purple circle. The x-axis encodes cost price and the y-axis encodes selling price, both using linear scales. The code loads CSV data from a GitHub gist via `d3.csv` and renders the plot as SVG circles using `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes. Despite the title mentioning "3D," the visualization is strictly two-dimensional, with axis labels added via HTML divs.

Loading thumbnail…

Untitled

A 3D scatter plot displays the relationship between product cost price and selling price using purple circles. The visualization uses D3.js v4 with an SVG rendering approach, mapping cost price to the x-axis and selling price to the y-axis through linear scales. Data is loaded via `d3.csv` from a GitHub-hosted dataset. The chart employs `d3.axisBottom` and `d3.axisLeft` for axes, while circles are appended with `attr` for positioning and styling, though the title's "3D" aspect is not implemented in the code.

Loading thumbnail…

Fork of Untitled

This bar chart displays the daily earnings of individuals, with each person’s name on the x-axis and their corresponding amount on the y-axis. The visualization uses D3 v6 to load CSV data asynchronously via `d3.csv`, then binds it to SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as static purple bars within an SVG canvas, with axis labels positioned manually via HTML divs.

Loading thumbnail…

Untitled

A bar chart displays the daily earnings of named individuals, with purple bars scaled along linear and band axes. The chart loads CSV data from a GitHub gist, parses the numeric `amounts` field, and uses `d3.scaleBand` and `d3.scaleLinear` to map categories and values. The SVG rendering appends rectangles via `d3.selectAll` and adds axes with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing download counts for seven popular apps across six app stores. The chart uses Highcharts with its highcharts-3d module, while D3 v5 and jQuery load the page and support the interface. The 3D effect is achieved through chart options that set alpha, beta, view distance, and depth, with each store rendered as a stacked series of columns. Data is provided inline as arrays of coordinate-value pairs for each store.

Loading thumbnail…

Fork of 3D chart

This example displays the top 10 countries most affected by COVID-19 using a 3D bar chart rendered via the d3-x3d library and X3DOM. It loads CSV data from a GitHub gist, parses each row into key-value pairs for country and case counts, and feeds this into a multi-series bar chart component. The chart is attached to a div with a heading, and the visualization updates once the asynchronous CSV fetch completes. The code relies on d3.csv for data parsing, d3.select for DOM manipulation, and the chart’s datum and call methods for rendering.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

A 3D bar chart displays the top 10 most-visited landmarks across six countries, comparing visitor totals for sites like the Eiffel Tower and Taj Mahal. The chart uses Highcharts with the highcharts-3d module, configuring an angled perspective through the `options3d` settings (alpha, beta, and depth). Bars are grouped by country as stacked series, with each series representing a nation’s visitor numbers across the landmark categories. The x-axis lists the places, the y-axis measures total visitors, and the z-axis labels the various locations, all rendered on an orange background.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example visualizes six months of car manufacturer sales data as an interactive 3D bar chart. It uses the D3.js v5 library alongside the d3-3d plugin and the d3-x3d extension to render the chart in an X3DOM scene. The code loads a CSV dataset, parses it into objects containing manufacturer names and monthly values, and then binds that data to a multi-series bar chart component for display.

Loading thumbnail…

Fork of Area Chart of Population Vini

This area chart visualizes world population over time, using a smooth curve to show the trend and a purple-filled region beneath the line to emphasize magnitude. The chart loads CSV data via `d3.csv`, transforms the population values, and renders an SVG with `d3.scaleTime` and `d3.scaleLinear` for axes. It employs `d3.area()` and `d3.line()` with `curveBasis` for smoothing, while `d3.axisBottom` and `d3.axisLeft` add labeled ticks, all styled by the linked CSS.

Loading thumbnail…

Area Chart of Population Vini

This area chart visualizes world population trends over time, with the x-axis representing years and the y-axis showing population values in thousands. The visualization combines a smooth black line with a purple filled area beneath it, making it easy to see both the trend line and the magnitude of population changes across the dataset. The chart is built using D3 v5, leveraging the `area` and `line` generators with `curveBasis` for smooth interpolation. Data is loaded from a CSV file containing population figures by year, with the y-axis formatted using scientific notation. The visualization includes styled grid lines in orange and axis labels, rendered as an SVG with a clean, accessible design.

Loading thumbnail…

Fork of Area Chart of Uk Population

This fork of an area chart displays UK population growth from 2010 to 2023, with annual values loaded from a CSV file. The visualization uses D3 v5’s `scaleLinear` and `scaleTime` for axes, `line` and `area` generators with a `curveBasis` smoothing, and renders to SVG. The chart includes labeled axes, gridlines, and a styled area fill, with population values formatted using D3’s `format` function.

Loading thumbnail…

Line chart of vini

A line chart displays population changes over time from a CSV dataset. The visualization uses d3.csv to load the data, then renders an SVG path via d3.line, with d3.scaleTime and d3.scaleLinear mapping years and population values. Axes are generated using d3.axisBottom and d3.axisLeft, and the chart includes labeled axes and a title. The line is styled with a red stroke, and the population values are parsed as numbers while years are converted to Date objects for time scaling.

Loading thumbnail…

Fork of Line Chart

This visualization shows US Auto Sales from 2005 to 2022 as a single line chart, with the year on the x-axis and sales figures on the y-axis. The SVG chart uses d3.scaleTime and d3.scaleLinear for the axes, with d3.axisBottom and d3.axisLeft to render gridlines and tick labels. The line is generated with d3.line, styled in red with a stroke width of four. Data is loaded as CSV via d3.csv from a GitHub gist, and the chart includes axis labels and a title.

Loading thumbnail…

Fork of Fork of Fork of ICE7 PIE chart for vini

A pie chart displays salary per hour for employees, with each slice colored and labeled with its dollar value, alongside a legend pairing hourly rates with time categories. The visualization uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to load data from a CSV file hosted on GitHub, compute arc paths, and assign colors. Text labels are positioned using the arc centroid method, and the chart is rendered as an SVG within a React-based HTML page.

Loading thumbnail…

Fork of ICE7 PIE chart for vini

This pie chart visualizes hourly salary data for employees, displaying each pay rate as a colored slice with the dollar amount labeled at its centroid. The chart renders through D3 v5’s `pie` and `arc` generators on an SVG canvas, with a legend listing employee hours alongside their corresponding pay values. Data is loaded asynchronously from a CSV file using `d3.csv`, with colors assigned via `scaleOrdinal`. The code also uses `arcGenerator.centroid` for label placement and `format` for concise numeric tick formatting, all within a React-compatible structure that directly manipulates the D3 selection API.

Loading thumbnail…

ICE7 PIE chart for vini

This visualization shows the hourly salaries of employees as a pie chart, with each slice labeled in dollars and a corresponding legend listing both the time and salary value. The chart uses D3 version 5 APIs including `pie`, `arc`, and `scaleOrdinal` to generate the SVG paths and text, handling data fetched from a remote CSV via `csv`. The code defines section colors, calculates arc centroids for labels, and binds legend entries to the same dataset.

Loading thumbnail…

Fork of Fork of Vineela

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the axes. Each flower species—setosa, versicolor, and virginica—appears as a distinct colored symbol, with red, violet, and orange fills respectively. The visualization uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` generators, rendering as SVG. Data loads from a CSV via `d3.csv`, and the code assigns colors through a custom `marker` function based on species.

Loading thumbnail…

Fork of Vineela

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and encoding species membership with red, violet, and orange markers. The D3.js v6 code loads CSV data from a GitHub gist, using `scaleLinear` for axes, `scaleOrdinal` for symbol types, and custom fill colors assigned per species. SVG rendering displays circular marks with translations for each data point, while the `scatterPlot` module wraps reusable axis and mark-generation logic.

Loading thumbnail…

Vineela

This interactive D3.js scatter plot visualizes the Iris dataset, displaying sepal length against petal width while encoding species through both color and symbol shapes. The visualization renders SVG paths using d3.symbol() with distinct markers for setosa, versicolor, and virginica species. It implements custom scales via d3.scaleLinear and d3.scaleOrdinal, with axes generated through d3.axisLeft and d3.axisBottom. The plot fills the entire browser window and updates dynamically when the dataset loads from a remote CSV source.

Loading thumbnail…

Fork of Vineela

This D3.js v6 scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes while encoding species with custom symbols and colors. The implementation uses the `csv` function to load data and a reusable `scatterPlot` module built with `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol`. Markers are rendered as SVG paths, with fill colors determined by a switch statement that assigns red, violet, and orange to the three iris species. The plot fills the entire browser window and includes labeled axes.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis every few seconds with animated transitions. The chart uses D3.js (v6) within a React framework, rendering SVG circles colored by species (setosa, versicolor, virginica) with a custom legend and axis labels. The code leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `setInterval` to dynamically update the visualization, pulling data from a CSV via `d3.csv`. A custom reusable scatter plot module manages the chart’s core structure and rendering.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot animates through the four numeric measurements of the classic Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length. Each point is colored by species (setosa, versicolor, virginica) using a custom color mapping. Built with React and D3.js v6, it uses `d3.csv` for data loading, `scaleLinear` for axes, and `setInterval` to drive the animation, rendering via SVG with a fixed y-axis of sepal length. The visualization includes a custom legend and labeled axes.

Loading thumbnail…

Fork of scator plot

A scatter plot of the Iris dataset visualizes sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (green for setosa, violet for versicolor, red for virginica). The visualization uses D3 v6 API calls `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub gist and render SVG circles with fixed radius. Petal length and width values are stored on each point but not drawn, while the chart includes rotated axis labels for sepal and petal dimensions.

Loading thumbnail…

scator plot

This scatter plot visualizes the Iris dataset, mapping sepal length and width for each specimen while coloring points by species using green, violet, and red. It loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` to set axes, and renders circles with `d3.selectAll` and `join`. The SVG includes labeled axes via `axisLeft` and `axisBottom`, with custom text elements, all within a full-window React-agnostic D3 v6 setup.

Loading thumbnail…

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

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis, with points colored by species (green, violet, red). It loads data from a CSV via `d3.csv`, parses numeric fields, and renders SVG circles using D3 v6. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create scales and axes, while a `switch` function assigns colors. Axis labels are added with rotated SVG text, and the visualization fills the full browser window.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species—Adelie, Gentoo, and Chinstrap—using color-coded circles. It loads a CSV dataset via `d3.csv`, parses numeric fields, and maps axes with `d3.scaleLinear` and `d3.extent`. The SVG rendering uses `d3.select`, `svg.append`, and `data.join` to draw circles, with axes added via `d3.axisLeft` and `d3.axisBottom`, plus custom axis labels and a title.

Loading thumbnail…

BArcharts of Insulin

This visualization displays horizontal bar charts showing the relationship between patient age and insulin levels, with the title "Diabeties level vs Age." The bars are sorted by age in descending order, with the x-axis representing age values (0–60) and the y-axis representing individual patient IDs based on their insulin measurements. The visualization uses D3 v6 APIs including `scaleLinear` for the age axis, `scaleBand` for the categorical insulin values, and SVG rendering. Data comes from a CSV file loaded via `d3.csv`, featuring diabetes patient records with insulin, glucose, and other health metrics.

Loading thumbnail…

Fork of Making a Barchart

This example displays a bar chart of blood pressure by patient age, using medical data from a CSV file with diabetes-related measurements. The visualization maps age to the x-axis with a linear scale and blood pressure to the y-axis with a band scale, rendering steel-blue rectangles. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate the axes, all drawn as SVG elements within a fixed-width container.

Loading thumbnail…

Fork of Making a Barchart

This horizontal bar chart ranks the populations of the ten most populous countries, using D3’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. The SVG render loads data from `data.csv`, multiplies each population value by 1000, and draws steelblue rectangles via D3’s `selectAll` and `enter`. Axis ticks are generated with `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of Barchart of Stock yields

This bar chart displays blood pressure values across age groups, with bars sorted in descending order to highlight yield trends. The visualization uses D3 v6’s `csv` loader, `scaleLinear` and `scaleBand` for axes, and SVG rendering. The data comes from a medical dataset, though the chart title references stock yields. An axis label mistakenly reads “Yield,” while the code calculates a derived `yield` field from dividend and book value columns that do not exist in the provided data.

Loading thumbnail…

Fork of Barchart of Stock yields

This horizontal bar chart ranks stock yields on the Macedonian Stock Exchange in 2020, with company names on the y-axis and yield percentage on the x-axis, sorted in descending order. It uses D3 v6’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG rectangles and axes. Data is loaded from a CSV file, and each yield is computed from dividend divided by book value. The chart’s title, axis labels, and grid lines are styled via CSS.

Loading thumbnail…

Fork of Fork of Fork of Fork of Data Table Summary

This example presents a summary of a diabetes awareness dataset, displaying the row count, column count, and file size of the uploaded CSV data. It also previews the first 10 rows in JSON format below the summary. The visualization uses d3.csv to fetch and parse the data, then renders the textual summary directly into the page using D3.js selection and appending methods, with output styled through custom CSS.

Loading thumbnail…

Fork of Fork of Fork of Data Table Summary

This example displays a quick statistical summary of a diabetes survey dataset, showing the total row count, column count, and file size in kilobytes, followed by a preview of the first ten rows in JSON format. It uses D3 v5’s `csv` method to load the external data and `csvFormat` to compute its size, while the document body is styled with custom CSS that includes a khaki background, a GIF image, and dotted borders. The SVG in the HTML contains a background image and links to the raw data file.

Loading thumbnail…

Fork of Fork of Data Table Summary

This example displays a summary of a diabetes awareness dataset, showing the total row count, column count, and file size in kilobytes, followed by a JSON preview of the first ten rows. It uses D3 v5’s `csv` method to load data from a remote CSV file hosted on GitHub, then appends the summary and preview as text elements to the page body using `select` and `append`. The dataset originates from a survey on pregnancies, blood pressure, and diabetic status, and the page includes a background image and link to the raw data source.

Loading thumbnail…

Fork of Data Table Summary

This visualization displays the total number of rows, columns, and file size of a diabetes survey dataset, followed by a preview of the first ten records in JSON format. Using d3.csv to load the external CSV file, it summarizes the data with d3.csvFormat and appends the results as text to the body. The dataset covers pregnancies and blood pressure from a 2018 United Nations population survey, rendered in an SVG-based HTML page with custom styling.

Loading thumbnail…

Fork of diabeties data

This visualization presents survey data on diabetes awareness, showing the first ten rows of the dataset with details on the number of rows, columns, and file size. The page uses D3.js to load a CSV file from a GitHub gist, while the background displays a static JPEG image of a diabetes-related graphic. The code employs D3's `csv` method for data parsing and displays the information as text elements within the SVG, styled with custom CSS. The visualization is built with Vue and rendered using SVG, with D3 version 5.

Loading thumbnail…

Fork of Data Table Summary

This fork of a Data Table Summary uses D3 v5 to load a 2018 United Nations population dataset from a CSV file and display basic summary statistics. The visualization prints the total number of rows, columns, and file size in kilobytes, followed by the first ten rows of data as JSON. The code demonstrates D3’s `csv` and `csvFormat` functions for data parsing and formatting, presenting results in simple text blocks on a black background.

Loading thumbnail…

Fork of Data Table Summary jhghj

This example displays a text-based summary of a CSV dataset containing 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects. The page shows the total row count, column count, and file size in kilobytes, followed by a JSON-formatted listing of the first ten rows. The code uses d3.csv to load the data, and d3.csvFormat to calculate the data size, then appends the summary and data preview as plain text within pre elements. The visualization uses a black background with green monospace text for a terminal-like aesthetic.

Loading thumbnail…

Fork of Data Table Summary

This example presents a plain-text summary of a CSV dataset containing 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects 2017. It renders a green monospace report on a black background, showing the row count, column count, file size in kilobytes, and the first ten rows as formatted JSON. The visualization uses D3 version 5 modules `select`, `csv`, and `csvFormat` to load the data and compute the text output, with all content displayed inside `<pre>` elements.

Loading thumbnail…

Buddha-Vini

A Buddha-inspired SVG illustration depicts an intricate orange figure against a starry night-sky background image. Built with React and rendered through SVG paths, the code draws a detailed bodhisattva-like form using a large path dataset. The visualization includes a blue rectangle that transitions its height and fill color over time using D3’s transition and duration methods, while the overall scene is animated within a fixed-width SVG canvas.

Loading thumbnail…

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

This example displays a large, intricate Buddha path rendered in red against a starry background image. The visualization uses React to manage the SVG structure, while the code includes a d3.select call to append and transition a rectangle shape, changing its height and fill color over time. The artwork is composed of overlapping geometric paths, with the main figure drawn using SVG path data. The animation relies on d3 transitions, and the page is styled with a blue background and a cosmic image from Pixabay.

Loading thumbnail…

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

A monochrome SVG rendering of Buddha is overlaid with hundreds of semi-transparent, randomly colored circles generated through nested React array maps. Each circle’s position and color are determined by `Math.random()` calls, producing a chaotic, overlapping visual effect atop the fixed black path. The React components and ReactDOM render the scene into an SVG canvas, with a small colored cube grid pattern also visible due to the looped array logic.