Arun

ICE8-Tree graph

Interconnected Electric Vehicle Ecosystem -Network Graph(ICE-8)

Fork of Visualization of Spatial Data - Tree Graph

ICE-7 : Reusable Scatter Plot

This example presents a reusable scatter plot that visualizes the relationship between pregnancies and glucose levels in a diabetes dataset. The plot encodes the number of pregnancies on the x-axis and glucose concentration on the y-axis, while using different symbol shapes to represent skin thickness values. Built with D3.js, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `symbol` to generate distinct path shapes. The chart is rendered as SVG, with the `scatterPlot` function encapsulated as a reusable component, allowing configurable width, height, margins, and data accessors. Data is loaded asynchronously from a remote CSV file.

D3 Scatter Plot

This animated SVG scatter plot explores the Diabetes dataset, cycling through different x-axis variables (BMI, Glucose, Blood Pressure, Skin Thickness) every two seconds while displaying Glucose on the y-axis. Built with D3 v6, the reusable chart component uses `scaleLinear`, `extent`, and axis functions to render points. The code imports the dataset from a remote CSV URL, and the `setInterval` function drives the rotating axis animation.

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the diabetes dataset, mapping pregnancies and glucose levels as points on a dynamic SVG canvas. It cycles through multiple columns—Pregnancies, Glucose, BloodPressure, and SkinThickness—updating the x-axis every 100 milliseconds to animate the chart. Built with d3.scaleLinear, axisBottom, and axisTop, it encodes species as distinct shapes via the shapePath function. The plot adjusts to window dimensions and refreshes automatically, offering an interactive glimpse into the dataset’s correlations.

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Pima Indians diabetes dataset, cycling through different variable pairings every two seconds to reveal correlations. The visualization renders circles for each data point using D3.js version 7, with scales computed from the current x and y value accessors. It employs the reusable `scatterPlot` module pattern, updating axes and circle positions via D3’s data join. The animation cycles through eight columns, including Glucose, BMI, and Age, while the SVG canvas fills the browser window. Axes are drawn using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

D3 Scatter Plot

This interactive scatter plot visualizes the Pima diabetes dataset, cycling through its six numeric columns every two seconds to show how the distribution of each feature relates to glucose levels. Using D3.js v6, the plot updates its x-axis and points with a smooth transition, encoding the diabetes outcome through point color. The visualization employs SVG elements and axes generated with `d3.axisLeft` and `d3.axisBottom`, with data loaded via `d3.csv`. While the code references the penguins dataset in its title, it actually reads and plots diabetes records, with each point representing a patient.

ICE -7 : Experience vs Compensation (Area Chart)

This area chart visualizes the relationship between years of experience and salary, showing a clear upward trend in compensation as experience increases. The chart uses a green filled area beneath a black line to emphasize the growth pattern across the dataset. Built with D3 v7, the visualization employs d3.area() to generate the area shape, d3.scaleLinear() for both axes, and d3.axisBottom and d3.axisLeft for the tick marks. The data comes from a CSV file loaded via d3.csv, with the x-axis representing years of experience and the y-axis representing salary, rendered as an SVG within an 800x600 pixel canvas.

ICE -7 : Experience vs Compensation (Line Chart)

This line chart visualizes the relationship between years of experience and salary compensation, showing how compensation increases with experience. The chart uses a green line to connect data points, with the x-axis representing years of experience and the y-axis displaying salary in dollars. The visualization is rendered using D3.js v7, employing `d3.line()` to generate the path and `d3.scaleLinear()` for both axes. Data is loaded from a CSV file via `d3.csv()`, with axes labeled "No. Of Years Experience" and "Salary Compensation".

Line Chart

This line chart displays violent crime rates per 100,000 people for each U.S. state from 2000 to 2019, using data from the CORGIS dataset. Each state is represented by a colored line, with a color legend on the right for identification. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color assignment, rendering paths and hover-able circles in SVG. The `d3.legendColor` API adds the threshold legend, and tooltips reveal exact values on hover.

ICE -7 Pie Chart

This pie chart visualizes the male and female populations of Indian cities, using a CSV dataset loaded from a GitHub gist. Each slice represents a city's total population, with a legend listing city names alongside their respective male and female population values. The visualization is built with D3 v5, using the `pie` and `arc` APIs to generate SVG paths, and `scaleOrdinal` for color assignment. The chart is rendered as an SVG with a custom legend, and the data is fetched asynchronously via the `csv` function.

Smiley face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas using D3.js v6. The face is constructed with D3 selections and shape generators, including `d3.arc` for the mouth and appended SVG `circle` and `rect` elements. A brief animation occurs when the eyes transition their fill color to black after a one-second delay. The graphic is rendered as static SVG with a simple transition effect.

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer incidence data from the U.S., visualizing death rates for liver, breast, prostate, and thyroid cancers over time. Using D3 v3, it maps years to the x-axis and population to the y-axis, with each cancer type distinguished by a unique symbol (star, square, circle). The chart updates every two seconds, transitioning smoothly between datasets while rotating through the cancer types, with a title indicating the current type. Built as a reusable module, it demonstrates animated transitions, SVG rendering, and dynamic symbol mapping in a clean, informative design.

scatter Plot

This interactive scatter plot visualizes the Palmer Penguins dataset, plotting flipper length against body mass, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization uses d3.csv to load the data and d3.scaleLinear to map values to pixel coordinates, rendering circles as SVG elements. Axes are generated with d3.axisLeft and d3.axisBottom, while axis labels and a title are added as text elements. The code also stores raw bill measurements on each mark, though these are not displayed visually.

Fork of Smiley face

A yellow smiley face is drawn on an SVG canvas, centered and sized to the viewport. The graphic shows a static face with two black eyes, eyebrows, and a curved mouth, while the eyes transition from their initial state to black over three seconds after a one-second delay. The code uses D3 v6 selections and transitions, including `transition.delay()` and `transition.duration()`, to animate the eye fill colors. The face is constructed with SVG circle, rect, and path elements, using `d3.arc()` for the mouth’s curved shape, all within a centered group.

ICE -6 : Experience vs Compensation (Bar Chart)

This bar chart displays the relationship between years of experience and salary compensation, with each bar representing a data point from a salary dataset. The chart uses a light blue fill for the bars, and the x-axis shows the number of years of experience while the y-axis displays compensation in dollars. Built with D3 v7, the visualization creates an SVG canvas and uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.csv` to fetch and parse the remote salary data. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with custom tick labels for dollar amounts.

ICE -6 : Experience vs Compensation (Scatter Plot)

This scatter plot visualizes the relationship between years of experience and salary compensation, using green dots to represent individual data points. The chart displays experience on the x-axis and salary on the y-axis, with formatted dollar values on the vertical axis. The visualization loads salary data from an external CSV file and renders the plot as an SVG using D3.js v7, employing d3.scaleLinear for both axes and d3.axisBottom/d3.axisLeft to generate the tick marks and labels.

ICE-6

This example visualizes the relationship between years of experience and salary compensation using a bar chart built with D3 v7. It shows how salary values scale across different experience levels, with the y-axis formatted in dollars and the x-axis displaying experience values. The visualization loads data from a CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to screen coordinates. Bars are rendered as SVG `<rect>` elements, while axes are generated using `d3.axisBottom` and `d3.axisLeft` for clear quantitative comparison.

ICE-6 Bar chart for

This scatter plot visualizes the relationship between years of experience and salary compensation, with each data point represented by a black dot. The chart uses D3.js v7 to load CSV data and map the values to a linear x-scale for experience and a linear y-scale for salary. Axes are rendered using d3.axisBottom and d3.axisLeft, with the y-axis formatted to display dollar amounts and the x-axis labeled "No. Of Years Experience." The visualization clearly shows a positive correlation, as dots trend upward with increased experience.

ICE-6 Bar Graph

This example presents a horizontal bar chart of retail sales data, showing the average basic monthly cost per country for a dataset of twelve nations. The visualization uses React with hooks to manage state, while D3 v5’s `scaleBand` and `scaleLinear` handle the axes and positioning. Data is loaded from a CSV file via `d3.csv`, and the rendering is done with SVG elements. The chart includes red gridlines, tick labels for both axes, and rectangular bars whose widths reflect the numeric cost values. The code explicitly imports functions like `axisLeft` and `axisBottom` but relies on manual tick generation for layout.

Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse an external CSV file using D3.js, rendering the resulting data as an interactive bar chart. The visualization uses `d3.csv()` to fetch the dataset and `d3.rollup()` to aggregate values by category. Each bar is drawn as an SVG rect, with its height and position calculated using D3's linear scale for the y-axis and band scale for the x-axis. The chart includes axes with tick labels, and a hover effect highlights individual bars while displaying the corresponding data value in a tooltip. The design uses a clean white background with colored bars, making the data easy to compare at a glance. This example demonstrates D3's data loading, parsing, and binding workflow.

Fork of Create a face with d3.js!

This example draws a stylized face in SVG using D3.js, rendering a yellow circular head with eyes, eyebrows, and a mouth. The code calculates positions and sizes from the SVG dimensions and uses D3’s `arc` function to create a mouth based on inner and outer radii and start and end angles. A continuous animation moves the eyebrows up and down via chained `transition()` calls with specified durations and transforms. The visualization demonstrates D3’s selection, appending, and transition APIs within an SVG canvas.