V

vidhyanamini

@vidhyanamini·39 public vizzes

Loading thumbnail…

Fork of ICE 8 example for Tree graphic

This example renders a family tree as an animated SVG diagram using D3 v6. It shows hierarchical relationships between individuals, with salmon-colored circular nodes and blue connecting paths that grow from parent to child over one second. The code loads hardcoded data with child and parent fields, applies `d3.stratify` to build the hierarchy, and `d3.tree` to compute node positions. Circles and text labels fade in with staggered `transition()` durations based on tree depth, emphasizing the branching structure.

Loading thumbnail…

ICE 8 example for Tree graphic

This example displays a static tree diagram of hierarchical name data, with nodes rendered as circles and connections as straight lines. The graphic shows a root node ("Venky") branching to children and further descendants, while text labels identify each node. The code uses D3 v6’s `d3.stratify` to structure the data and `d3.tree` to compute node positions within a 600x300 size. SVG elements are created and animated using D3 transitions, with circles appearing before the paths draw.

Loading thumbnail…

ICE-8 USA Map

This visualization displays a choropleth-style map of the United States using an Albers equal-area conic projection. The map shows landmasses in a light red fill, state boundaries as purple interior lines, and a gray sphere background, with graticule lines. Built with React and D3 v5, the code uses `d3.geoAlbers` for projection, `d3.geoPath` to generate SVG paths, and TopoJSON’s `feature` and `mesh` methods to process US Atlas state data. The map renders at 2000×600 pixels within an SVG container.

Loading thumbnail…

ICE 8 example for social Network graphic

This example visualizes a small social network with six named nodes and five weighted links, rendered as an SVG force-directed graph. Node labels display names like sandhya, Vidhya, and Prem, with circles and connecting lines styled in red and blue. The layout is computed using d3.layout.force from the older d3.v2 API, while the page also loads d3.v4 without using its newer simulation methods. Graph data is loaded from graphFile.json, and nodes are interactive, supporting click-and-drag repositioning through force.drag.

Loading thumbnail…

ICE 8 World Map using D3

This example shows a world map with animated circles that plot 1,500 museum object locations retrieved from a SPARQL endpoint, using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Each location appears sequentially with a bounce easing effect, transitioning from radius 0 to 8 pixels using `transition.attr`. The map is rendered as SVG, with country boundaries from TopoJSON (world-atlas) and a light blue sphere. The code uses D3 v5 and TopoJSON to fetch and draw geographic features.

Loading thumbnail…

ICE-7 question 4: Area chart

This area chart displays cosmetic product sales in USD from 2018 to 2022, with the x-axis showing years and the y-axis showing sales values. The visualization is rendered as an SVG using D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.area` with `curveBasis` to generate the shaded path. Data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title describing the metric shown.

Loading thumbnail…

D3 Scatter Plot using iris data set

This example shows an animated scatter plot of the Iris dataset, visualizing the relationship between petal width and sepal length for three flower species. Using D3.js version 6.7.0, the plot renders as an SVG and automatically cycles through different x-axis variables every 15 seconds. The implementation uses D3’s scaleLinear, axisBottom, axisLeft, scaleOrdinal, and symbol functions within a reusable scatterPlot chart component. Data loads from a CSV file and displays points as varied symbols representing species, with a custom Share Tech font styling the axes.

Loading thumbnail…

Reusable Scatter Plot using iris data set

This example presents an animated scatter plot of the classic Iris dataset, cycling through four different feature combinations on the x-axis—petal width, sepal width, petal length, and sepal length—while the y-axis remains sepal length. Data points are colored by species (setosa, versicolor, virginica) via a reusable `scatterPlot` function built with D3 v6, which uses `scaleLinear` for axes and `axisLeft`/`axisBottom` for ticks. The animation is driven by a `setInterval` that updates the x-value accessor and re-renders SVG circles. Data is loaded as CSV from a gist using D3’s `csv` method, with legend rectangles and text labels added manually.

Loading thumbnail…

ICE 7question 3 Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the x-axis mapping years and the y-axis showing electronic sales values. The visualization loads CSV data from a GitHub URL, converts year strings to Date objects, and uses d3.scaleTime and d3.scaleLinear for axes. Rendering relies on d3.line to generate the path, d3.axisBottom and d3.axisLeft for tick marks, and React for the overall structure. The SVG output is styled with custom CSS for axis labels, titles, and the blue line path.

Loading thumbnail…

Reusable scatter plot using idis dataset with different symbols

This reusable scatter plot visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis, with each species represented by a distinct D3 symbol (circle, diamond, cross, etc.). The visualization employs a modular scatterPlot function that leverages d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, and d3.symbol to generate the SVG marks and axes. Data is loaded asynchronously via d3.csv from a GitHub gist, and the plot resizes to fill the browser window.

Loading thumbnail…

Reusable scatter plot for iris data set with different symbols

This example renders the classic Iris dataset as a scatter plot, encoding species with different D3 symbols and using petal width and sepal length for the x- and y-axes. The reusable D3 chart is built with `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols`, while axes are drawn using `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub Gist via the D3 `csv` function, and the result is rendered as SVG. The plot fills the browser window, with margins and symbol size configured through a chainable API.

Loading thumbnail…

Fork of Fork of ICE7 Pie Chart

This pie chart displays the top ten cricketers and their total runs, with each slice’s area proportional to a player’s run count and a legend listing names and values. The code loads data from a JSON file using `d3.json`, then applies `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns slice colors. The chart renders as an SVG and includes a legend built from appended groups, rects, and text elements.

Loading thumbnail…

Fork of DV ICE-7 iris dataset by different colors

This animated scatter plot displays the classic Iris dataset, mapping petal width against sepal length while coloring each point by species: pink for setosa, red for versicolor, and blue for virginica. The visualization uses d3.csv to load data from a GitHub-hosted CSV file and renders SVG circles with dynamic fill colors. Every two seconds, a setInterval callback cycles the x-axis through different measurement columns—petal width, sepal width, petal length, and sepal length—using a reusable scatterPlot module built with d3.scaleLinear, d3.axisLeft, and d3.axisBottom. The axes update smoothly while circle positions remain based on the current x-value mapping.

Loading thumbnail…

Fork of Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

Loading thumbnail…

Fork of ICE-7: Area chart

This area chart visualizes the NASDAQ Composite index’s price over time, with the chart title displayed prominently and axes labeled "Time" and "Price." The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, teal-filled area from CSV data loaded via `d3.csv`. Gridlines are drawn with `axisLeft` and `axisBottom` tick marks, while the y-axis formats large numbers using `d3.format` to abbreviate billions. The SVG render includes a rotated y-axis label and a centered title.

Loading thumbnail…

product sales line graph

This line chart tracks the cumulative number of deaths from a time series of COVID-19 data, sourced from the Johns Hopkins Coronavirus Dataset. The visualization uses a React front end with D3 v5 to render an SVG line path, with x- and y-axes drawn via `d3.axisBottom` and `d3.axisLeft`. The chart computes daily totals by summing the raw CSV values, with grid lines and axis labels styled through CSS.

Loading thumbnail…

Fork of ICE7 Pie Chart

This pie chart displays the revenue distribution for ten beauty products, with each slice sized proportionally to its sales value and colored using the `d3.scaleOrdinal` scheme. A legend on the right lists product names and their formatted revenue values using `d3.format`. The visualization uses `d3.pie` and `d3.arc` to generate SVG paths from the JSON dataset, which is loaded via `d3.json`. The chart renders within an 860×500 SVG, with both the pie and legend positioned explicitly via SVG transforms.

Loading thumbnail…

creating barchart

This example shows a horizontal bar chart of cricket players’ career runs, with bars scaled linearly by run count and player names on a band scale. The code imports D3 v5 functions like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, then renders SVG rectangles from `data.csv`. It multiplies run values by ten, removes axis domain lines, and adds custom axis labels and a title.

Loading thumbnail…

creating a scatter Plot using iris dataset

This scatter plot visualizes the relationship between petal length and sepal length for the classic Iris dataset, using purple circles to represent individual flowers. The React-based visualization uses D3 v5's `scaleLinear`, `extent`, and `csv` functions to load and scale the data, rendering the axes and marks as SVG elements. Axis tick labels are formatted with `format('.2s')`, and hover tooltips display the petal length value via an SVG `<title>` element.

Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the Iris flower dataset, showing measurements of sepal and petal length for three iris species. Users can change which attributes are plotted on the x and y axes using dropdown menus, with axes and labels updating dynamically. The visualization uses D3 v5 for data binding and SVG rendering, with React dropdowns for interactivity, and colors each species distinctly with a legend showing class names.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris Dataset explores relationships between four numeric flower measurements and species. Two dropdown menus, built with the React Dropdown library, allow users to select which attribute is plotted on the x-axis and y-axis. The visualization uses D3 scales and SVG circles for marks, with axes rendered as reusable React components. The data is loaded asynchronously via `d3.csv` and typed using a custom row conversion function.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, comparing petal length against sepal length for individual flowers. Built with D3 v6, the SVG rendering uses `scaleLinear` to map data extents to pixel coordinates, with `axisLeft` and `axisBottom` generating labeled axes. Circles are joined to the data via `selectAll().data().join()`, while margins and full-window dimensions position the chart. The code asynchronously loads the comma-separated values using `csv` and parses numeric fields before plotting.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render SVG circles. The plot is sized to the full window and uses a fixed radius of 4 pixels for each point. Data is fetched from a GitHub-hosted CSV file.

Loading thumbnail…

creating a scatter Plot using iris dataset

This scatter plot visualizes the Iris Dataset, displaying the relationship between petal length on the x-axis and sepal length on the y-axis for individual iris flowers. Each circle represents one sample, with positions scaled by linear scales computed from the data’s extent. The visualization is rendered as SVG using D3 v6, employing `d3.csv` to load data, `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and data joins to create the circle marks. The responsive layout fills the browser window.

Loading thumbnail…

Scatter Plots using d3

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three iris species. Two dropdown menus let viewers select which attributes to plot on the X and Y axes, with points colored by species class. The visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for grid lines, and React dropdown components for menu selection. Data is loaded via d3.csv and rendered as SVG circles with CSS opacity and color coding.

Loading thumbnail…

Scatter Plot using d3

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower attributes via dropdown menus. The vanilla HTML version displays petal length against sepal length, using d3.csv to load data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values and render SVG axes. The React implementation adds selectable attributes with ReactDropdown and organizes charts into reusable components like AxisBottom and Marks, both rendering dynamic SVG circles.

Loading thumbnail…

creating a polished scatter plot with menus using iris data

This interactive scatter plot displays the classic Iris dataset, letting users explore relationships between sepal and petal measurements. Two dropdown menus allow switching the x-axis and y-axis variables, while the scatter points update dynamically. The visualization uses React with hooks for state management, D3 v5 scales and SVG rendering for circles and axes. Data loads from a CSV via d3.csv, with axes formatted using d3.format and annotated with rotated axis labels.

Loading thumbnail…

Fork of dataset

This bar chart displays the total Test cricket runs scored by top batsmen, with names on the y-axis and runs on the x-axis. It uses D3.js v5 via UNPKG, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG visualization. The chart loads data from a local CSV file and customizes axis labels while removing default tick lines and domains for a cleaner appearance. The visualization highlights player rankings by bar length, with steelblue rectangles rendered from the parsed dataset.

Loading thumbnail…

creating a barchart

This example creates a static bar chart visualizing cricket players’ career runs using a CSV dataset. The code loads data with `d3.csv`, parses the `RUNS` field as a number, and appends SVG `<rect>` elements using D3’s selection and data-join methods. It defines a linear scale with `d3.scaleLinear` (using a typo, `scaleLiner`) to map the maximum run value to the chart width. The React-based setup relies on UMD builds from unpkg, though the chart is rendered imperatively with D3 rather than through React components.

Loading thumbnail…

Using Iris Dataset forming a Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length and petal width onto x and y coordinates. Each data point is a circle colored by species: green for setosa, purple for versicolor, and pink for virginica, while also encoding sepal length and width as the circle’s rx and ry attributes. The example uses D3 v6 APIs including `select`, `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to load data, compute scales, and render SVG axes and marks on a full-window canvas.

Loading thumbnail…

Polished Scatter Plot with Menus

Interactive dropdown menus let users select which Iris flower measurements appear on the x- and y-axes of this scatter plot, which renders the classic Iris dataset as SVG circles. React manages the menu state and scale updates, while D3’s `scaleLinear` and `extent` compute the axes from the selected attributes. Axis components generate ticks and labels, and each point includes a native `<title>` element for hover tooltips.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width along the x- and y-axes while coloring each point by species. It also encodes sepal length and width into the horizontal and vertical radii of each circle, creating an elongated marker shape. The code loads data from a CSV using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders circles with SVG attributes `cx`, `cy`, `r`, `rx`, and `ry`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 using cricket dataset

This visualization displays the top 10 cricketers from a dataset, showing each player’s 2019 performance as a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis (player names) and `scaleLinear` for the numeric x-axis (population values). Data is loaded asynchronously via `d3.csv` from a GitHub gist, with axes and tick marks generated manually through React elements.

Loading thumbnail…

vidhya ICE-5: Load and Parse CSV Data with D3.js

This example demonstrates loading and parsing a CSV file with D3.js, displaying the parsed data's file size, row count, and column count in a styled HTML page. It uses `d3.csv` to fetch data from a GitHub Gist URL and `d3.csvFormat` to calculate the data length. The page also includes static SVG shapes and an external image, with elements styled using CSS. The visualization is rendered in HTML with D3.js v7, using JavaScript to update the page's content dynamically.

Loading thumbnail…

vidhya ice5 loading and parse data with d3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying the dataset's size, row count, and column count in a styled HTML page. The visualization also includes a decorative SVG city illustration rendered inline. The code uses `d3.csv` to fetch data from a GitHub gist URL, then computes the formatted data's size in kilobytes with `d3.csvFormat`, and accesses the row and column counts from the parsed array. The page is built with vanilla HTML, CSS, and JavaScript, with D3 v7 loaded from a CDN.

Loading thumbnail…

Fork of ICE-5 loading and parsing data with D3.js

This example demonstrates how to load and parse a CSV dataset using D3.js, displaying basic metadata about the data in a simple HTML page. The code fetches a university dataset from a GitHub gist using `d3.csv`, then calculates and presents the file size in kilobytes, the number of rows, and the number of columns. The result is rendered as text inside a `<pre>` element via the DOM API. Built with D3 v7 and plain HTML/CSS/JavaScript, it serves as a minimal educational illustration of asynchronous data loading and parsing without any visualization.

Loading thumbnail…

ICE-5 loading and parsing data with D3.js

This visualization demonstrates how to load and parse a remote CSV file using D3.js v7. The example fetches a raw CSV dataset hosted on GitHub and displays summary statistics about the data, including its size in kilobytes, row count, and column count, within a styled HTML page. It utilizes the `d3.csv` function to asynchronously retrieve and parse the data, then leverages `d3.csvFormat` to calculate the data's byte size. The page uses simple CSS for minimal styling and JavaScript to handle the loading process and update the message container.

Loading thumbnail…

emoji-face with (D3)

This example renders a stylized emoji face as a scalable vector graphic using D3 and React. The face consists of a red circle with a yellow stroke, two black eyes, and a D3-generated arc path for the mouth. The drawing is centered within an SVG canvas using a group transformation, with all geometric properties defined as constants. The code demonstrates integrating D3’s `arc` generator with React components to produce declarative, data-driven SVG shapes in a 960×500 viewport.

Loading thumbnail…

emoji-face with mouth (D3)

This example renders a smiley face using SVG elements positioned within a D3 group, centered on a 960 by 500 canvas. The face consists of a yellow circle with a thick red stroke, two black eyes, and a mouth created by a D3 arc path. The code uses React to compose the SVG structure and the D3 `arc` function to generate the mouth’s geometry, with all coordinates defined as constants. The visualization demonstrates basic D3 shape generation and SVG composition within a React framework.