K

kirangithub23

@kirangithub23·18 public vizzes

Loading thumbnail…

Social Media Network Group graph

This example visualizes a small social media network as a force-directed group graph, showing connections between named individuals across three groups. It loads node and link data from a JSON file using `d3.json`, and applies `d3.layout.force` with gravity, distance, and charge parameters to position nodes in an SVG canvas. Circles represent people, labeled with their names, and green links with stroke widths proportional to link weight show relationships. Nodes are draggable via `force.drag`, and the tick handler updates link coordinates and node transforms in real time.

Loading thumbnail…

ICE8 - Interactive Tree Graph

This example presents an interactive family tree visualization using D3.js version 3.5.17. The tree layout (`d3.layout.tree`) arranges hierarchical data with named family members, while SVG circles and text labels render each node and curved diagonal paths (`d3.svg.diagonal`) connect parent-child relationships. Clicking any node toggles its children, triggering smooth 750ms transitions that animate nodes and links to new positions. The code uses fixed-depth spacing (180 pixels per level) and custom styling with teal nodes and thick teal links against a white background.

Loading thumbnail…

Fork of Italy Map

This example displays a map of Italy’s provinces using D3’s `geoMercator` projection and `geoPath` to render SVG paths. TopoJSON data is loaded from a GitHub source and converted with `feature`, while a categorical color scale fills each region. The map supports zoom and pan via D3’s `zoom` behavior, which applies transforms to a group element.

Loading thumbnail…

Fork of Polished World Map

This example presents a stylized world map using a Natural Earth projection, with landmasses filled in teal against a light gray sphere. A graticule of latitude and longitude lines overlays the map, and interior country boundaries are drawn as finer, slightly darker teal lines, creating a polished cartographic look. The visualization is built with D3 v5, utilizing its `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs, and rendered as SVG components within a React application. Data is loaded from the World Atlas TopoJSON dataset, and the `topojson` library's `feature` and `mesh` functions are used to generate the geographic shapes.

Loading thumbnail…

Fork of BONUS 1: 3D Scatter Plot

This example visualizes the relationship between height, weight, and body fat percentage using a 3D scatter plot, with each point representing an individual from a BMI dataset loaded via `d3.csv`. The plot uses Plotly’s `scatter3d` trace type, rendering blue markers with grey outlines and an opacity of 0.8. Axes are labeled for each variable, with red title fonts, and the layout minimizes margins to focus on the data. The code calls `Plotly.newPlot` to draw the chart into a `<div>` element, relying on D3 for CSV parsing and Plotly for interactive 3D rendering.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example displays a 3D bar chart comparing growth metrics for seven social media platforms across six categories: Users, Revenue, WorkForce, Stocks, Locations, and Ranking. The chart utilizes the Highcharts library with the highcharts-3d module, enabling three-dimensional column rendering with configurable alpha, beta, and depth settings. Each category appears as a grouped series with stacked data points, plotted against a categorical xAxis and numeric yAxis. The code defines chart margins, column depth, and group padding to create the visual depth effect, with all data hardcoded as arrays within the series definitions.

Loading thumbnail…

Fork of ICE7_Areachart

This visualization displays cell phone prices over time using an area chart, with a smooth curve representing cost trends across months. The chart is built with D3 v5 and rendered as an SVG, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to generate the path elements. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse`. The visualization includes labeled axes and grid lines, styled with custom CSS classes for ticks and chart strokes.

Loading thumbnail…

Fork of Fork of Line Chart-KiranV

This example shows US auto sales by brand from 2003 to 2018 as a single blue line chart, with year on the x-axis and sales volume on the y-axis. The chart includes axis labels, gridlines, and a green title. The code loads CSV data from a GitHub gist and uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG visualization. The dataset is mapped to date objects and numeric sales values before being passed to the render function.

Loading thumbnail…

ICE - 7 Fork of Pie chart

This chart uses a pie chart to display the percentage of usage for the most common social media platforms, based on data fetched from a CSV file. Built with D3 v5, it uses the `pie` and `arc` functions to generate the pie geometry and `scaleOrdinal` to map discrete colors to each segment. The visualization labels each slice with its percentage and includes a legend with the platform name and corresponding value. The SVG is rendered with an HTML interface, and all data is loaded asynchronously via D3’s `csv` function.

Loading thumbnail…

ICE-7 Fork of Scatter Plot - ICE7_RahulSai

This interactive scatter plot visualizes the Iris dataset, coloring points by species (setosa, versicolor, virginica) and animating the x-axis through four measurement columns on an interval. Built with d3.v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `join` to render SVG circles and axes, while a custom legend and rotated axis label are appended directly. The chart cycles the x-axis variable, updating scales and re-rendering marks each second.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris Dataset in a scatter plot that cycles through different attribute pairings every two seconds. Built with D3 v6, it uses reusable chart patterns where scales, axes, and circles are updated via selection joins. The animation rotates through petal width, sepal width, petal length, and sepal length as the x-axis, with sepal length fixed on the y-axis. SVG rendering and D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs drive the interactive updating, animated with `setInterval`.

Loading thumbnail…

Untitled

This interactive scatter plot displays the relationship between annualized standard deviation (x-axis) and annualized return (y-axis) for a dataset loaded via `d3.csv`. Each circle represents a data point, colored with `d3.scale.category20`, and features an SVG `<title>` tooltip showing the variable name and both metrics as percentages. Hovering triggers a smooth `d3.transition` that enlarges the circle and thickens its stroke. The visualization uses `d3.svg.axis` for both axes, with formatted tick labels and clear axis titles.

Loading thumbnail…

Bar Chart with React & D3

A bar chart displays the Grades of the top 10 students, with student names on the y-axis and grade values on the x-axis. The visualization uses React hooks (`useState`, `useEffect`) to fetch CSV data asynchronously from a GitHub URL, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are manually constructed from tick values, with grid lines drawn using SVG `<line>` elements. D3 v5 and React 16.9 are loaded via UMD scripts, and the chart updates reactively once data arrives.

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV file containing world population data using D3.js and jQuery. It shows a web page with a title, descriptive headers, and a "Load Data" button that triggers an AJAX request to fetch the raw CSV from GitHub. D3.js displays a message using `d3.csv` and `d3.csvFormat` to report file size, row count, and column count. jQuery parses the CSV data and renders it as a styled Bootstrap table, while CSS gradients and inline SVG icons enhance the visual presentation. The code uses `d3.csv`, `d3.csvFormat`, `$.ajax`, and Bootstrap classes.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing CSV data using D3.js and jQuery. It displays world population data from a GitHub-hosted CSV file, showing file size, row count, and column count after using `d3.csv()` to fetch and parse the remote data. A "Load Data" button triggers a jQuery AJAX request to fetch and render the CSV contents as a Bootstrap-styled table, with the first row formatted as table headers. The page also includes D3.js ES6 module imports and custom styling with conic-gradient backgrounds.

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A red smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js v5. The SVG face is centered using a translated group, with circles for eyes and a path drawn via the `d3.arc` helper for the mouth. Eyebrow rectangles transition vertically in a repeating two-second cycle using chained `transition().duration()` calls. The code shows direct attribute setting and selection methods on SVG elements, with a static yellow face on a black background.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face built with D3.js shows animated eyebrows that move down and back up in a looping transition. The SVG elements—circles for the eyes, rectangles for the eyebrows, and a path created with `d3.arc` for the mouth—are positioned relative to a central group. Using `d3.select` to manage DOM nodes, the code applies chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. No external data is used; the visualization demonstrates fundamental D3 DOM manipulation and SVG rendering.