R

RahulChaitu999

@RahulChaitu999·49 public vizzes

Loading thumbnail…

Network Graph ICE 8

A force-directed network graph maps seven hobby-related nodes, including Laptops, VR, Games, and Audience, with weighted links that vary in thickness. The graph uses d3.json to load the graphFile.json data, and a custom force layout (d3.layout.force) with gravity, distance, and charge settings to position nodes. Nodes are draggable SVG circles with text labels, rendered with yellow fill and red stroke, while links are purple lines with width proportional to the square root of each connection's weight.

Loading thumbnail…

Family Tree ICE 8 d3.js

A family tree visualization maps hierarchical relationships using D3.js v5. The SVG layout positions colored circles for family members—red for root, green for intermediate, blue for leaf nodes—with connecting cubic Bézier curves drawn as paths. Using `d3.stratify()` to structure the data and `d3.tree()` for layout, the code renders descendant positions and labels. Text labels appear next to each node, shifted 15 pixels right and 5 pixels down. The tree spans a fixed 1060×600 pixel SVG canvas with data hardcoded as an array of parent-child pairs.

Loading thumbnail…

Family Tree ICE 8 d3.js

This example displays a family tree diagram built with D3.js version 5, using an SVG canvas of 860 by 500 pixels. It shows a hierarchical structure with ten individuals, where circle nodes represent family members and curved paths indicate parent-child relationships, with colors differentiating generations. The code uses the custom `d3.stratify()` API to convert flat data into a hierarchy, then applies `d3.tree()` to compute node positions. Text labels appear next to each circle, and the rendering is fully SVG-based.

Loading thumbnail…

Map of India

This visualization displays the districts of India as colored polygons, with state boundaries outlined in black. District polygons are colored according to their state, using a categorical color scheme, and each includes a hover tooltip showing the district and state name. The map supports zooming and panning via d3.zoom. The code uses d3.json to load TopoJSON data, d3.geoMercator with clipExtent, and d3.geoPath to render the features.

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, each filled with a distinct categorical color from D3's `schemeCategory10` and labeled with its name at the centroid. The map uses a `geoMercator` projection from `d3.geoPath`, with state boundaries rendered as SVG paths and stroked black for separation. Data comes from a TopoJSON file of India’s administrative regions, processed via `topojson.feature`, and one feature is removed with `shift()`. Text labels are positioned using `pathGenerator.centroid()`.

Loading thumbnail…

Fork of map with legend

This example displays a choropleth map of Indian states, colored by the `AREA_` property from NFHS-4 data. It loads TopoJSON state geometries from a GitHub gist and renders them as SVG paths using React and D3 v6. The map uses `geoMercator` with `fitSize` for projection, and a sequential color scale with an `interpolateRainbow` interpolator to encode area values. A legend is prepared via `d3-legend` but remains commented out.

Loading thumbnail…

World Map

This example shows a natural Earth projection of the world map, with each country rendered as a black shape with semi-transparent white borders against a red sphere and sky-blue background. The code uses D3 v5’s `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to convert TopoJSON data from a GitHub gist into GeoJSON. A single static SVG view displays all countries without interaction.

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph visualizes friend connections among eight people, with nodes labeled by name and directed, arrow-tipped links indicating relationships. The force-directed layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node with a green stroke. The SVG output is rendered with D3 v6, using data from a JSON file.

Loading thumbnail…

Fork of ICE 8 example for Tree graphic

This example shows a hierarchical family tree as an animated SVG graphic, with nodes represented by salmon-colored circles and connecting paths drawn as blue lines. The visualization uses D3 v6’s `d3.stratify` to convert a flat array of parent-child data into a hierarchy, then applies `d3.tree` to compute node positions. Initially, all nodes appear as circles at their parent’s location, and paths animate outward from each parent to its children over one second. Text labels fade in sequentially based on tree depth, using chained transitions with a delay proportional to each node’s depth.

Loading thumbnail…

3D Scatter Plot for bank note Authentication

This example visualizes bank note authentication data as an interactive 3D scatter plot, using Plotly.js and D3.js to render two distinct marker sets: one plotting entropy, kurtosis, and variance, and another plotting entropy, kurtosis, and skewness. The visualization uses `d3.csv` to load the Bank_note dataset from a GitHub gist, then constructs `scatter3d` traces with custom marker sizes, colors, symbols, and opacity. The layout removes margins for a full-bleed display, and the chart is drawn inside a designated `div` using `Plotly.newPlot`.

Loading thumbnail…

Interactive 3D Bar chart

This interactive 3D bar chart visualizes the team sizes across various IT firms, broken down by departments such as Project Management, Security, and Support. The chart uses a stacked column layout in a 3D perspective. Built with the Highcharts library and its Highcharts 3D extension, it configures the chart's plot options, axes, and series data through JavaScript. The user can view the data from an angled, three-dimensional viewpoint, with the X-axis representing companies, the Y-axis showing total employees, and the Z-axis indicating different IT departments.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example renders a 3D multi-series bar chart depicting car manufacturer data for the first six months of the year. The visualization loads data from a CSV file via `d3.csv` and maps each manufacturer to a set of monthly values. It uses the `d3-x3d` library alongside D3.js v5 and the x3dom runtime to generate the interactive three-dimensional scene. The chart is attached to an HTML `div` element using a combination of `d3.select` and `d3.x3d.chart.barChartMultiSeries`, which draws the bars in a virtual 3D space.

Loading thumbnail…

ICE - 7 Area Chart for Choclate Sales

This area chart visualizes chocolate sales over time, using a smooth, basis-curved line to show the trend and a filled area beneath it to emphasize magnitude. Data is loaded from a CSV file, with the year parsed as a date and sales as a numeric value. The visualization is built with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` and `d3.line` with `d3.curveBasis` for the chart marks, and SVG for rendering.

Loading thumbnail…

Fork of ICE - 7 Area Chart for Car Sales

This visualization shows car sales trends in Canada over time, with a smooth line chart and filled area beneath the curve. The x-axis represents years parsed from CSV data using `d3.timeParse`, while the y-axis displays sales figures with formatted tick labels. The chart is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and the `area` and `line` generators with `curveBasis` for smoothing. Axis grids and labels are added via `axisBottom` and `axisLeft`, rendered as SVG with custom styling in CSS.

Loading thumbnail…

ICE 7 AREA CHART

This area chart visualizes perfume sales over time, with a smooth curved line for the trend and a green shaded region beneath it. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to render the SVG paths, with axes from `axisBottom` and `axisLeft`. Data is loaded as CSV from a GitHub gist, parsed with `d3.timeParse`, and displayed with formatted axis ticks. The React framework is not used in the runtime code, which directly appends SVG elements.

Loading thumbnail…

Fork of ICE - 7 Area Chart for choclate sales

This area chart visualizes chocolate sales over time, with a curved line and shaded region beneath it to emphasize trends. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to map yearly data to SVG coordinates, while `line` and `area` generators with `curveBasis` create the smooth chart shape. Sales data is loaded from a CSV file and parsed using `d3.csv` and `d3.timeParse`, with the chart rendered inside an SVG element. The page title and axis labels provide context for the displayed car sales metric.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart visualizes car sales in India from 2009 to 2019, combining a black line with an orange filled area beneath it. The visualization uses D3 v5 with SVG rendering, employing d3.area, d3.line, scaleTime, and scaleLinear to map yearly sales data. The chart is enhanced with axes, gridlines, and rotating labels. Data is loaded from a CSV file hosted on GitHub, with year values parsed using d3.timeParse before being plotted.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays car sales in India from 2009 to 2019, with the area filled in orange and a black line tracing the trend. The visualization uses the D3.js library, leveraging `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to render the chart as an SVG. Data is loaded from a remote CSV and parsed using `d3.timeParse`.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays car sales in India from 2009 to 2019, with the area filled in orange and a black line tracing the trend. The visualization uses the D3.js library, leveraging `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to render the chart as an SVG. Data is loaded from a remote CSV and parsed using `d3.timeParse`.

Loading thumbnail…

ICE 7 AREA CHART

This area chart visualizes yearly perfume sales from a CSV dataset, using a smooth curve to show the sales trend over time and a filled area beneath the line to emphasize magnitude. The SVG is rendered with D3 v5, using `scaleTime` for the year axis, `scaleLinear` for sales, and `line` and `area` generators with `curveBasis` for smoothing. Axes are drawn with `axisBottom` and `axisLeft`, and the data is loaded via `d3.csv` before parsing dates with `d3.timeParse`.

Loading thumbnail…

Fork of Fork of Line_Chart_ChoclateSales

This example visualizes chocolate sales from 2008 to 2021 using a red line chart rendered in SVG. The chart displays years on the x-axis and total sales on the y-axis, with gridlines and axis labels styled via CSS. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisBottom`, `axisLeft`, and `csv` to load and process the remote dataset. The SVG dimensions are set in HTML, and margins frame the plotted data.

Loading thumbnail…

Fork of Line_Chart_ChoclateSales

This D3.js line chart visualizes chocolate sales data from 2008 to 2021, plotting total sales against years. The chart uses SVG rendering within a React starter setup, with axes labeled "years" and "totalsales." The code loads CSV data via D3's `csv` function, transforms date strings using `d3.timeParse`, and builds the visualization with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. Grid lines and axis labels are styled through CSS, while the sales trend line is drawn in red.

Loading thumbnail…

Fork of Line_Chart_ChoclateSales

This D3.js line chart visualizes chocolate sales data from 2008 to 2021, plotting total sales against years. The chart uses SVG rendering within a React starter setup, with axes labeled "years" and "totalsales." The code loads CSV data via D3's `csv` function, transforms date strings using `d3.timeParse`, and builds the visualization with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. Grid lines and axis labels are styled through CSS, while the sales trend line is drawn in red.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 visualization: displaying the text “Hello D3 version 7” directly on the page. The project serves as a bare-bones starter template, using the D3 v7 library loaded from a CDN to call the `select` method on the `body` element and chain the `text` method to set its content. The styling, applied via an inline CSS rule, sets the font size to 13em, making the message appear very large and centered. The code uses modern JavaScript syntax, importing the `select` function from D3 within the main script.

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart naimisha

This example shows a pie chart of student math scores from a CSV dataset, with each slice labeled by its value and accompanied by a color-coded legend of results. The chart uses D3 v5 to fetch and parse the data via `d3.csv`, then generates SVG arcs with `d3.arc` and `d3.pie`, coloring slices with `d3.scaleOrdinal`. Labels are placed at arc centroids, and the legend lists each result with its corresponding value. The code applies a custom `d3.format` for tick labels and lays out all elements within an SVG canvas of fixed dimensions.

Loading thumbnail…

Untitled

This example displays a time-series area chart of monthly costs using a smooth basis curve. The x-axis represents the month, parsed from a CSV file, and the y-axis shows the cost value. Built with React and D3, it uses `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for the chart paths. Axis labels and tick formatting are applied via `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales data from 2013 to 2021, using time on the x-axis and total sales on the y-axis. Drawn as a red SVG line via `d3.line`, the chart employs `d3.scaleTime` for the temporal axis and `d3.scaleLinear` for sales, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data is loaded as CSV from a GitHub gist and parsed with `d3.timeParse`. The example builds on D3 v5, using modular imports and a simple margin-based layout with custom axis labels.

Loading thumbnail…

Fork of Fork of Line Chart

A line chart displays annual US auto sales from 2005 to 2022, with time on the x-axis and sales figures on the y-axis. The SVG rendering uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, with data loaded via `d3.csv` from a remote gist source. Red gridlines and labeled axes frame the single red line, which visualizes the full annual sales trend.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes US auto sales from 2005 to 2022, drawing a single red path across a year-based time axis against a sales-value linear axis. The D3 v5 code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator to construct the SVG rendering, and imports data from a raw GitHub CSV file. Both axes include labeled tick marks and the chart displays its title and axis labels.

Loading thumbnail…

Fork of ICE-7-AreaChart-Part3

This example visualizes monthly insurance product sales in dollars over the year 2021 as a filled area chart. The chart uses D3 v4’s time scale for dates and a linear scale for sales values, drawing an SVG area path with a fill color. The data loads from a remote CSV file, with dates parsed via `d3.timeParse` and the area path constructed using `d3.area`. Axes and text labels for the x and y dimensions are added via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of SF AreaChart

This fork shows a week of San Francisco temperatures as a filled area chart over time. The chart renders an SVG path using `d3.area` with a `curveBasis` smoothing, while `d3.scaleTime` and `d3.scaleLinear` map timestamps and temperatures to axes. Axis labels and gridlines are drawn with `d3.axisBottom` and `d3.axisLeft`. Data loads from a remote CSV containing hourly temperature readings, parsed with `d3.csv` into `Date` and numeric values.

Loading thumbnail…

Line_Chart_ChoclateSales

This line chart displays chocolate sales from 2008 to 2021, with the x-axis representing years and the y-axis showing total sales. The visualization uses D3 v5 within a React framework, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator to draw the sales trend. Data is loaded from a CSV file and rendered as an SVG, with gridlines added via tick sizes and labels for both axes.

Loading thumbnail…

Fork of ICE - 7 Pie

This pie chart visualizes the number of wins (labeled as goals) for top tennis players, using a CSV dataset fetched from a GitHub gist. The chart encodes each player’s total as a colored slice, with labels showing the value in thousands and a legend listing player names and their corresponding totals. Built with D3 v5 and rendered as SVG, the code uses `d3.pie` to compute arc angles, `d3.arc` for path generation, `d3.scaleOrdinal` for color assignment, and D3's `csv` for data loading.

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3.js visualization starter template. It shows a blank SVG canvas with a visible margin guide, using the margin convention to separate the outer chart area from an inner plotting region. The code loads React 16, ReactDOM, and D3 v6 via CDN links and defines a `VizContainer` component that abstracts the SVG group element and applies translations via `transform`. The template provides fixed dimensions of 960 by 500 pixels and uses a gray background rectangle to highlight the plotting area.

Loading thumbnail…

penguins

This donut chart visualizes the sales figures of various car companies from a penguins dataset, where each segment represents a company's car sales. The chart uses D3 v5’s `pie` layout, `arc` for path generation, and `scaleOrdinal` for color assignment. The SVG renders the donut with labels and a legend displaying each company name and its corresponding sales value. Data is fetched from a raw CSV URL using `d3.csv`.

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart 11515092

This pie chart displays the top 10 countries by deaths from air pollution in 2020. It uses a D3.js v5 visualization with an SVG canvas. Data is fetched as CSV from an external gist URL. The chart renders pie segments with arc generators, applies ordinal color scales, and adds section labels and a legend. Country names and death counts are formatted in thousands with a compact notation.

Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the penguin dataset, mapping petal length and width as x and y coordinates while sepal length and width are redundantly encoded as circle radii. The D3 v6 code loads CSV data, applies linear scales, and renders colored circles for each species using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`. The SVG output uses the `join` operator to create marks, with axis labels styled in red and purple.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping body mass against culmen length with an animated loop that cycles through four numerical attributes every two seconds. Built with D3 v6, it uses reusable chart patterns via a custom `scatterPlot` function, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG rendering updates in place using `selectAll` and `join`, while `setInterval` triggers re-renders to switch the x-axis variable, showcasing the flexibility of modular chart components.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the number of books written by nine popular novelists using a horizontal bar chart. It loads data from a CSV file and renders the chart with React components, while D3’s `scaleBand` and `scaleLinear` compute the bar positions and sizes. The code uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously, then maps the loaded values to SVG `<rect>` marks and axis tick labels drawn with `<line>` and `<text>` elements. D3’s `d3.csv` handles parsing, and the chart is rendered inside an SVG container.

Loading thumbnail…

Iris Dataset Scatter Plot

This visualization displays the famous Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each of the three species—setosa, versicolor, and virginica—represented by black, green, and orange circles respectively. The code loads CSV data using D3’s `csv` function, parses numeric fields, and constructs linear scales with `scaleLinear` and `extent`. It renders SVG circles with attributes bound to the data, and includes axis labels via `axisLeft` and `axisBottom`. The chart is built with D3 v6 and fills the browser window.

Loading thumbnail…

ICE-5 Data visualization

This visualization displays a static SVG image of race cars alongside a summary of race data loaded from a remote CSV file. The page uses D3 v7’s `d3.csv` to fetch the dataset, then calculates and reports the file size in kilobytes, the number of rows, and the number of columns, displaying these metrics in a styled `<pre>` element. The SVG is embedded directly via an `<img>` tag, while the data source is linked externally. The interface is minimal, with large colored headings and a red message container.

Loading thumbnail…

Fork of map

This interactive world map colors each country by economy group using a categorical ordinal scale with a spectral color scheme. Users can pan and zoom the map through d3.zoom, while hovering highlights individual countries. The visualization loads geographic data from the world-atlas TopoJSON dataset and joins it with TSV metadata, rendering with d3.geoPath and a natural Earth projection. A custom color legend component displays the ordinal scale, and the code imports utilities from d3 v5 and topojson.

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map displays world countries as SVG paths, with hover highlighting in red and a blue sphere background. Users can pan and zoom using d3.zoom, which applies transforms to the map group. The visualization loads world topology data from the World Atlas TopoJSON and country names from a TSV file, rendering with d3.geoNaturalEarth1 and d3.geoPath. The code uses d3.json and d3.tsv for data loading, and topojson.feature to extract country geometries.

Loading thumbnail…

Fork of Globe Zoom - ICE_5

This interactive visualization, built with React and D3.js (v3), presents a zoomable globe and map interface for exploring geospatial datasets. It displays geographic features such as country landmasses, graticules, and sphere outlines, alongside scatterplot data points representing race-related metrics. Users can switch between orthographic globe, Winkel triple, and Mercator projections, with smooth animated transitions between them. The visualization uses `d3.geo.path` for map rendering and `d3.behavior.zoom` for interactive pan and zoom controls. Data is loaded from CSV files, with a striped pattern mask indicating missing data regions.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders an emoji-style face using React and D3, drawing a yellow circle with black stroke for the head, two offset eyes, and a mouth arc generated by D3’s `arc` generator with specified inner and outer radii and start/end angles. The SVG group is translated to the center of a 960×500 canvas, and the code imports only the `arc` function from D3 v7 to construct the mouth path. It demonstrates combining React’s declarative JSX with D3 geometry utilities for static vector graphics.

Loading thumbnail…

Hello this is Genie!!!:)

This animation displays a cheerful, cartoon-like genie face built from colored SVG shapes, including a blue circular head, eyes, eyebrows, a mouth, hair, and a beard. The eyebrows perform a brief up-and-down transition, while the rest of the figure remains static. The code constructs the face using D3.js v5 selections, transitions, and the `arc` generator to create curved paths for the mouth, hair, and beard. All rendering occurs in an SVG canvas with a 960 by 500 viewport.

Loading thumbnail…

Fork of Let's Make a Face Part I (.V)

This example renders a cartoon smiley face with a hat, eyes, nose, and mouth using React and D3 v5. The face is constructed from SVG shapes, including circles for the head and features, and a D3 arc path for the mouth. The component-based React code defines each facial part, such as eyes, nose, and hat, which are then positioned and transformed using SVG groups and React’s JSX syntax. The data is hardcoded visual parameters, not external data, and the visualization is rendered entirely as SVG within an HTML page.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face built with React and D3 v5, featuring rotated eyebrows, a curved mouth, and decorative hair. The face is rendered as SVG elements, with each part—eyes, pupils, nose, and mouth—defined using React JSX. D3’s `arc()` generator creates the mouth and eyebrow shapes, which are then transformed through SVG `rotate` and `translate` attributes. The code uses React’s `ReactDOM.render` to mount the component, while drawing primitives like `<circle>`, `<path>`, and `<g>` structure the face.

Loading thumbnail…

The incredible Hulk

A green, circular face animates within an SVG canvas, with two eyes and rectangular eyebrows. The d3.v5 code uses `transition.duration` to animate the eyebrows vertically, creating a startled expression. A red mouth, drawn as an arc with the `d3.arc` API, completes the face. The example demonstrates basic SVG rendering and animation with D3 within a React-compatible setup.