K V VINITHA

ICE 8 Network Graph

This example visualizes a hierarchical family tree as an interactive network graph, with a central parent node (Ramana) and its direct and indirect child nodes (Jaggu, Sonu, Anu, Vinay, and Jaggu’s children Usha and Vyshnavi). The visualization uses d3.forceSimulation to apply many-body repulsion, link forces, and centering forces, positioning nodes and connecting them with lines. Circles and labels are rendered via SVG, with node sizes and colors predefined in a palette. The simulation updates node positions on each tick, demonstrating a simple force-directed layout.

Apr 3, 2022

ICE 8 Family Tree

This visualization displays a hierarchical family tree using a horizontal dendrogram layout. The tree shows a root ancestor with three children, each branching into multiple generations with colored labels. The code uses D3 v5's `tree` layout and `hierarchy` function to compute node positions, with `linkHorizontal` for connecting paths. SVG elements are rendered within a React application, and the visualization includes zoom functionality via D3's `zoom` behavior. Node names and colors come from a local JSON file, with font size varying by tree depth.

Apr 3, 2022

ICE 8: Country Map

This map of India colors each state with a distinct color from a categorical scale, providing a clear visual overview of the country's administrative divisions. Built with React and D3 v5, it loads TopoJSON data and renders the geography using the Mercator projection and `d3.geoPath`. The `d3.zoom` module is imported for potential interaction, while hover effects change state colors to red.

Apr 2, 2022

ICE 8:Geo map

This geo map visualizes world countries using a natural Earth projection, with hover interactions that turn countries red. The visualization loads TopoJSON country boundaries and TSV name data via `Promise.all`, then uses `d3.geoPath` and `d3.geoNaturalEarth1` to render the paths in SVG. Tooltips display country names through appended `title` elements, while CSS styles define sphere fill, country colors, and hover effects. The code relies on `topojson.feature` for parsing and D3 v5 with React integration.

Apr 2, 2022

ICE 7 Area Chart

This area chart visualizes car sales in India from 2009 to 2019, with a smooth curve showing the trend over time. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` to create a filled orange region beneath a black line. Sales data is loaded from a CSV file, with years parsed via `d3.timeParse` and sales formatted using `format`. The SVG includes labeled axes and gridlines via `axisBottom` and `axisLeft`.

ICE 7 Reusable D3 Scatter Plot

This reusable scatter plot displays the Iris dataset, cycling through four different floral measurements on the x-axis every 15 seconds to reveal changing correlations. It uses the D3.js `csv` loader to fetch the dataset and implements the chart as a reusable component with configurable accessors for data, dimensions, margins, and value mappings. The visualization utilizes D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to generate an animated SVG with dynamic axes and categorical symbols.

Fork of [Ex.10] Animated Reusable D3 Scatter Plot with labels

This example demonstrates an animated scatter plot of the Iris dataset, cycling through four different variables on the x-axis every 15 seconds. The code uses D3 v3 with a reusable chart pattern, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes, and `selection.join` with transitions for smooth circle updates. Labels animate with color changes, and the data loads from a CSV file via d3.csv. The SVG rendering includes custom accessors for x/y values and labels, with a 1000ms transition duration for circles and axes.

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four different views of the Iris dataset, showing relationships between petal and sepal measurements. Using D3.js, the visualization employs a reusable `scatterPlot` module that maps data dimensions to x and y axes, updates every eight seconds, and renders points as SVG circles. Species are color-coded via `scaleOrdinal`, and axes are drawn with `axisLeft` and `axisBottom`. The data is loaded from a CSV file, and the plot fills the entire browser window.

ICE 7 Line Chart

A line chart displays annual car sales in India from 2009 to 2019, with time on the x-axis and sales volume on the y-axis. The SVG visualization uses D3 v5 modules including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the path and gridlines. Data is loaded from a CSV via `d3.csv` and parsed with `d3.timeParse`. Styling applies red gridlines, axis labels, and a thick red stroke for the trend line against a dark background.

ICE 7 Pie Chart

This interactive pie chart displays the top 10 car-producing countries in the world for 2019, using a dataset of car production figures loaded via `d3.csv`. The visualization renders as an SVG with `d3.pie` and `d3.arc` to construct the pie segments, while a legend on the right pairs country names with their respective total production values, formatted in thousands. `d3.scaleOrdinal` assigns a distinct color to each slice, and interactivity is achieved through D3's selection and data-binding APIs.

Mar 26, 2022

Fork of Reusable D3 Scatter Plot

This example presents the Iris Dataset as an animated scatter plot, cycling through different x-axis variables every two seconds to reveal relationships between petal and sepal measurements. The reusable chart component, built with D3 v6 functions like `scaleLinear`, `axisBottom`, and `axisLeft`, renders SVG circles colored by species. A `setInterval` drives the animation, updating the x-value mapping and re-calling the plot function. The code follows Mike Bostock’s reusable chart pattern, exposing setter methods for configuration and data binding.

Mar 24, 2022

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load data, `scaleLinear` and `extent` to set scales, and `axisLeft` and `axisBottom` for axes. Circle marks are appended via `data().join()`, with a custom color mapping function for each species. The plot fills the browser window and includes labeled axes.

Mar 7, 2022

Bar chart

This bar chart displays the top 10 car-producing countries from 1950 to 2019, using horizontal bars to show the total number of cars produced by each nation. The visualization uses D3.js v5 within a React framework, rendering SVG elements through custom components like `AxisBottom`, `AxisLeft`, and `Marks` for the bars. Data is loaded from a CSV file via the `useData` hook and D3's `csv` parser. The x-axis employs a linear scale with formatted tick labels, while user interactivity is provided through native SVG tooltips showing the precise production values.

Mar 7, 2022

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

A dropdown menu selects a year from 2008 to 2019, and a bar chart displays the top 10 most populous countries for that year. The bars are rendered as SVG rectangles using React, with axes and tick marks generated by custom functions. The visualization uses D3.js version 5 for data loading and scales, and React for the component structure. The data comes from the United Nations World Population Prospects 2019. The chart includes a tooltip showing the population value when hovering over a bar, and the y-axis is formatted with suffixes like 'B' for billions.

Fork of Bar chart with D3.js

This bar chart displays the popularity of programming languages using Stack Overflow survey data from 2019, with percentages shown on both the y-axis and atop each bar. D3.js v5 (d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom) renders the chart as SVG elements. On mouseenter, the chart dims all values and draws a dashed reference line at the hovered bar’s height while displaying each bar’s percentage difference relative to that bar; mouseleave restores the original view. A grid drawn via d3.axisLeft with tickSize helps compare values.

Fork of Bar Chart with Highlighting

This bar chart displays the most populous countries in 2018, using a horizontal layout with color-coded bars to distinguish population magnitude. Built with D3 v6, it employs `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and CSV data loaded via `d3.csv`. Interactive highlighting occurs through mouseover events that adjust bar opacity and show a tooltip text element.

Fork of Plot of Top 10 NASCAR Winners colored by Track

This bar chart shows the top 10 NASCAR drivers by total wins from 1975–2003, with each driver’s bar segmented and colored by the specific track where each win occurred. A tooltip reveals the track name and win count for any segment. The visualization uses vega-lite and d3.v5 to load CSV data from a GitHub gist, filters rows with an “IsInTop10” flag, and encodes track names via a custom color scale with explicit domain and range values.

Bar Chart of Car Productions of the coutries

This example visualizes the top 10 car-producing countries in 2019 using a horizontal bar chart. The chart displays each country's total car production in units along the x-axis, with country names on the y-axis, and uses steelblue rectangles to represent the data values. The visualization is built with React and D3 v5, loading data from a CSV file via `d3.csv` and creating scales with `d3.scaleBand` and `d3.scaleLinear`. The SVG is rendered directly in the React component, with axes and tick marks generated manually using array mapping rather than D3 axis helpers.

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, using React for the user interface and D3 v5 for the underlying data handling and SVG rendering. It loads the dataset from a remote CSV file, parses the 2020 population column, and maps each country name to a categorical y-scale while scaling the bar widths with a linear x-scale. The chart includes axis ticks and labels generated via D3’s `scaleBand`, `scaleLinear`, and `max` functions, with React components constructing the SVG elements.

Fork of Religions of Largest 20 Countries

This interactive stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, with each bar segment sized by population and colored by religion. Hovering over a bar reveals a tooltip with the exact population count, while hovering over the legend highlights the corresponding religion’s segments across all countries. The visualization is built using D3.js, employing `d3.layout.stack` for the stacked bars, `d3.legend.color` for the interactive legend, and `d3.tip` for tooltips. Data originates from Pew Research’s Global Religious Landscape, processed via a script from the Curran data repository.

Mar 3, 2022

Loading CSV data through D3

This example demonstrates how to load and summarize CSV data with D3, using the `d3.csv` method to fetch a remote file. The loaded data provides a summary of its size, row count, and column count, which is displayed as text. Alongside the data summary, a React component renders a smiley face SVG, showing how D3 and React can be combined. The visualization uses ReactDOM to mount the SVG within a React application, while D3 handles the asynchronous data loading and formatting.

Feb 28, 2022

Fork of Loading and Parsing data with CoronovirusData

This example displays a decorative SVG illustration of a cat and a placemat, with a styled header and an information panel. The page loads coronavirus data from a CSV file hosted on GitHub Gists using the `d3.csv` API, then computes and displays the dataset’s size in kilobytes, row count, and column count. The information is rendered into an HTML `<pre>` element, styled with bold, oblique, small-caps text on a red background. The page structure uses plain HTML with CSS for layout, while D3 v7 handles the data fetching and parsing.

Feb 28, 2022

Fork of Loading CSV data through D3

This example combines React with D3 v7 to display a static SVG smiley face and a text summary of a CSV file. The page loads a remote CSV dataset using `d3.csv()`, then reports its size, row count, and column count in a styled `<pre>` element. The smiley face is rendered as an SVG component in React, scaled and translated via a `<g>` transform. The code demonstrates simple data loading with D3 alongside declarative React component rendering.

Feb 27, 2022

Fork of SVG Animation Playground

This fork of a CSS animation playground recreates a Star Wars–style title sequence using two SVG images (“GET IT” and “RIGHT”) and a text byline rendered in HTML. The code defines keyframe animations—`getit`, `right`, `spin-letters`, and `move-byline`—to scale, translate, and rotate elements in 3D space via CSS `perspective` and `transform-style: preserve3d`. The animation loops infinitely over 10 seconds, with the two SVG images and the byline fading and moving toward the viewer against a static background.

Fork of Fork of Smiley Face Part II

A yellow smiley face with oversized, detailed eyes and a wide, colorful mouth is rendered in SVG. The face is built using React components, with the `Eyes` and `Smile` modules defining intricate vector paths and shapes. The main `App` component positions and scales these elements, while a CSV file is loaded to display metadata about the data used in the visualization.

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

This example demonstrates how to load and parse CSV data using D3.js within a React framework. The page displays a message showing the data size in kilobytes, row count, and column count after fetching a remote CSV file via `d3.csv`. The styling uses CSS for the heading and message container, while an accompanying SVG image is also embedded. The data is sourced from a GitHub gist URL, and the visualization focuses on communicating basic dataset statistics rather than graphical chart rendering.

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

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset's size in kilobytes, row count, and column count within a stylized HTML page. The code uses the `d3.csv()` method to fetch a remote CSV file from a GitHub gist and then accesses the parsed data structure’s properties, including `data.length` and `data.columns.length`. The visualization includes a large heading and a decorative SVG image.

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

ICE 5

This example displays basic statistics about a fetched CSV file, showing the file size in kilobytes, row count, and column count as plain text. It uses JavaScript’s `fetch` API with an async function to retrieve the data from a GitHub-hosted URL, then parses it with `d3.csvParse` to compute the metrics, which are written into a `<pre>` element. The code relies on the D3 library’s CSV parsing and the browser’s native fetch, with minimal styling via an external CSS file.

Feb 25, 2022

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG, drawing a yellow circle with two smaller black circles for eyes. The code uses React 17 and D3 v7 via UMD scripts from unpkg, with ReactDOM rendering the SVG elements into the DOM. The visualization demonstrates basic SVG shape attributes like `cx`, `cy`, `r`, and `stroke`, while CSS removes the body margin to display the graphic edge-to-edge. The static composition is defined entirely through JSX coordinates and radii.

Feb 24, 2022

heart

A heart-shaped face is drawn in SVG, with a yellow circular head, black-outlined eyes featuring white and black pupils, and a curved mouth formed as an arc. The visualization is built using D3.js v5, rendered through SVG elements, with the code importing `select` and `arc` from the D3 library. The example demonstrates programmatic creation of shapes and attributes, using the SVG viewport dimensions to scale features relative to the canvas.

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

Fork of let's make a face with D3.js

A stylized face is constructed from basic SVG shapes, including a yellow circle for the head, two white ellipses for the eyes, black circles for pupils, and a gray arc for the mouth. The drawing is rendered on a 1000×500 SVG canvas using D3 v5 selection and attribute methods. Coordinates are computed dynamically from the canvas width and height, while the mouth is generated using the D3 arc generator with explicit inner and outer radii and angle values. The code is written in React and imports the `select` function from D3.

Angry face

A yellow, angry face rendered with custom SVG shapes shows furrowed brows, menacing eyes with detailed irises and highlights, and a wide, clenched-teeth grimace. The face is built from React components, including separate `Eyes` and `Smile` modules, which are composed within an SVG canvas. Styling relies on CSS classes defining fills, while React renders the structure using JSX elements like `ellipse`, `path`, and `circle`.