M Hema

ICE -6 Bar Chart

This bar chart displays the total COVID-19 deaths for the top ten countries, sorted in descending order and colored with D3’s `schemeCategory10` palette. It uses an SVG rendered via D3 v7’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes added by `d3.axisBottom` and `d3.axisLeft`. A manual legend maps each country’s name to its colored rectangle. The data is loaded from a CSV file using `d3.csv`.

Apr 3, 2024

Fork of ICE-7 : Reusable Scatter Plot

This scatter plot visualizes COVID-19 total cases against total deaths, with each country represented by a symbol scaled according to a 100-pixel size. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to render SVG marks and axes. Data loads from a GitHub-hosted CSV via `d3.csv`, with margins and dimensions set dynamically to the window size. The reusable `scatterPlot` function exposes configuration methods for data, value accessors, and dimensions.

Fork of ICE-7 : Reusable Scatter Plot

This scatter plot visualizes the relationship between the number of pregnancies and glucose levels in a diabetes dataset, with skin thickness encoded through symbol size. Built with D3.js, it renders an SVG that fills the browser window, using the `scatterPlot` reusable component to map data values to positions and sizes. The plot applies margins and tooltips, displaying tick labels at 24 pixels, and pulls data from a remote CSV file fetched asynchronously with `d3.csv`.

Fork of Fork of ICE-7 : Reusable Scatter Plot

This example visualizes COVID-19 data by plotting countries against death counts using a reusable scatter plot. It employs D3 v6 to load CSV data, scale axes with `scaleLinear`, and render marks via `symbol` and `symbols` for varied point shapes. The chart’s axes are generated with `axisLeft` and `axisBottom`, while margins and dimensions are configured through a custom `scatterPlot` function. The visualization is built with SVG, and the `d3.csv` module fetches the dataset from a remote URL. The code demonstrates a modular pattern where the plot function accepts configurable accessors for x, y, and symbol values, making it reusable.

ICE 7 Reusable D3 Scatter Plot

This example presents a reusable scatter plot of COVID-19 data, mapping countries along the x-axis and death counts along the y-axis. It utilizes the D3.js library (v7) within an SVG rendering context, demonstrating a modular component pattern via the `scatterPlot()` function. The main script asynchronously loads a CSV dataset using `d3.csv`, parses death values as numbers, and then invokes the chart with configurable accessors, margins, and point size. The visualization adapts to the full browser window by setting its width and height from `window.innerWidth` and `window.innerHeight`.

Fork of ICE-7 : Reusable Scatter Plot

This visualization uses D3 to render a reusable scatter plot of COVID-19 data, plotting each country’s population against itself while encoding the dataset’s SkinThickness column through symbol shapes. The chart displays axes for both variables, with points positioned using `scaleLinear` and `extent` for domains. The code relies on `d3.scaleOrdinal` to map symbol types and `d3.symbol` to generate the path data, while `axisLeft` and `axisBottom` add the scales. Data is loaded as CSV via `d3.csv`, and the plot is rendered as SVG with a custom margin and size configuration.

Fork of ICE-7 : Reusable Scatter Plot

This example visualizes diabetes-related health metrics in a responsive scatter plot, mapping pregnancies on the x-axis, glucose levels on the y-axis, and varying symbol shapes based on skin thickness. It uses d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, d3.symbols, and d3.symbol to generate SVG marks. The reusable chart function supports custom accessors, margins, and symbol size, drawing data from a CSV of diabetes records. The plot fills the browser window with hidden scrollbars and large axis tick text.

ICE7 Pie Chart - 2nd

This pie chart visualizes the top 10 countries by total COVID-19 deaths, using a categorical color scale. The chart displays each country’s death count as a slice, with labels directly positioned at the slice centroids and a legend mapping colors to country names. Built with D3 v7, it loads data from a CSV file, sorts it in descending order, and slices the top 10 entries. The SVG rendering uses `d3.pie` and `d3.arc` to generate the chart, while `d3.scaleOrdinal` with `schemeCategory10` assigns colors.

ICE 7 Area Chart

This area chart visualizes COVID-19 total deaths by country, using D3 v7 to load CSV data and display the first ten countries sorted by the x-axis attribute. The chart employs a band scale for the categorical x-axis and a linear scale for the y-axis, with an area path filled in light blue. Axes are rendered using d3.axisBottom and d3.axisLeft, and the SVG output includes labeled titles for both axes.

Line Chart ICE 7

This line chart shows COVID-19 total deaths by country across the first ten rows of a CSV dataset, sorted by country name. The visualization uses d3.v7 to create an SVG chart with a blue line plot, a banded x-axis for countries, and a linear y-axis for death counts. It fetches data asynchronously via `d3.csv`, filters to ten entries, and draws axes and the line path within a defined margin. Axis labels are added as SVG text elements, and the chart title dynamically reflects the y-axis label.

Fork of Area Chart ice 7

This area chart visualizes daily COVID-19 cases over time, with dates on the x-axis and case counts on the y-axis. The data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. The chart is rendered as an SVG, using `d3.area` to generate the filled path and `d3.scaleTime`/`d3.scaleLinear` for the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes axis labels for "Date" and "Cases."

Fork of A7_Multi-line Chart

This fork of a multi-line chart visualizes COVID-19 case counts over time, showing a green line with circular points for each date. It uses D3 v7 with an SVG rendering, employing `d3.scaleBand` for the date axis and `d3.scaleLinear` for the case count axis, plus `d3.line` and `d3.axisBottom`/`d3.axisLeft` to generate the chart. Data is loaded from a remote CSV file containing date and case columns, with the line chart displaying a clear trend of rising cases across the period.

Line Chart

This line chart displays the number of flights over time from the US Airline Traffic Dataset. A light gray background rect marks the plotting area, with a black line connecting data points and circles highlighting each observation. The visualization uses D3's `scaleTime`, `scaleLinear`, and `line` functions, with axes and labels from `@curran/axis-labels`. The code imports data via `@Ljz2018/us_airline_traffic` and renders the chart into an SVG container.

Fork of Line Chart ice 7

This example visualizes restaurant profit trends from 1985 to 2024 using a line chart with overlaid circular points. The visualization combines a D3.js v7 line path and scatter-style circles to show profit values across years, with hover tooltips revealing exact figures. The code uses `d3.scaleBand` for the time axis and `d3.scaleLinear` for the profit axis, while the data comes from a remote JSON file. The line path and points are both styled with green fills, transitioning to orange on hover.

ICE 7 Line chart

This line chart visualizes restaurant profit analysis from 1985 to 2024, using a dataset loaded via `d3.csv`. It plots profit in millions against each recorded year with a line and circular data points. Built with D3 v7, the SVG graph uses `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with `d3.line` defining the profit trend line. Interactive tooltips appear on hover, and styling includes a Poppins font and green point markers that turn orange on mouseover.

Fork of Simple Line Chart

This example shows the rise in atmospheric CO2 concentrations over time using the Keeling Curve dataset. A gray background rectangle highlights the plotting area, with a single black line tracing the data points and semi-transparent circles marking individual measurements. The visualization is built with D3's `scaleTime`, `scaleLinear`, `axisLeft`, and `line` functions, while axis labels are added via the `@curran/axis-labels` library. The code reads dimensions from the container and uses D3's declarative selection API to create the SVG elements.

ice 7 Line Chart For covid

This line chart shows the average prices of four gourd varieties—bottle gourd, bitter gourd, smooth gourd, and snake gourd—over time in Nepal, with each commodity represented by a distinct colored line. The visualization uses a time-series layout with a date-based x-axis and a price axis in NPR, rendered as an SVG via D3 v6. The code loads JSON data, filters it to include only the four gourd types, and groups it by commodity using `d3.group`. It employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with the `schemeTableau10` color scheme, while the `d3.legendColor` API generates a vertical legend.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, sepal length) every two seconds to compare against sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, while circles are created via a `.join` operation. The visualization demonstrates a reusable chart pattern where the same plot function is re-invoked with new data mappings, producing an animated tour of the dataset's dimensions.

ICE -6 Bar Chart

The visualization displays the top 10 countries by total COVID-19 recovered cases using a bar chart, where each circle’s vertical position encodes the recovery count on a linear scale. The code fetches data from a CSV hosted on GitHub via `d3.csv`, sorts it in descending order, and slices the first ten entries. It then constructs an SVG scatter plot using `d3.scaleLinear` for both axes, adds circles with `d3.selectAll`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart title and axis labels are set via options, defaulting to a steelblue fill for circles.

ice7

This visualization displays COVID-19 data as a scatterplot, plotting countries along the x-axis against their total case counts on the y-axis. It uses D3.js to load the CSV dataset, create SVG circles for each data point, and render axes with labels. The implementation relies on `scaleLinear` and `extent` for scaling, while the `observeResize` utility handles responsive dimensions. A separate `viz` module, built with D3’s `axisLeft` and custom axis helpers, manages the chart’s inner rendering, including a background rectangle and semi-transparent circles, with data sourced from a remote CSV file.

ice 7

This example visualizes the relationship between bill length and flipper length for penguin species, with each circle representing an individual penguin. The scatter plot encodes the quantitative variables on linear scales, mapping bill length to the x-axis and flipper length to the y-axis. Using D3’s `scaleLinear`, `extent`, and `axisLeft`, the visualization constructs axes and positions circles with a fixed radius and opacity. The `@curran/responsive-axes` library handles responsive axis rendering, while `@curran/penguins` provides the dataset. A light gray inner rectangle frames the plotting area, and the chart adapts to container resizing via `observeResize`.

ICE7

This example shows a reusable scatter plot that maps engine weight to horsepower for a small dataset of vehicles. The visualization uses D3.js v7 to render SVG circles and axes, with scales for the x and y dimensions. The code builds a configurable chart function that accepts setters for width, height, data, margins, and radius, demonstrating a modular pattern for reusable visualizations. The implementation relies on `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to handle the mapping and axis generation.

Fork of Responsive Scatter Plot

This example demonstrates a responsive scatter plot using the Palmer Penguins dataset, mapping bill length to the x-axis and flipper length to the y-axis. It filters out rows with missing values and renders semi-transparent circles over a light gray inner rectangle. The visualization leverages D3’s `scaleLinear` and `axisLeft` for scales and axes, while the `@curran/responsive-axes` library handles axis labels and tick formatting. Container resizing is managed through `observeResize` from `@curran/responsive-axes`, with the SVG width and height updated accordingly.

Mar 20, 2024

ICE 6 Bar Chart

This bar chart displays the average impact magnitude of earthquakes across different locations, filtering for values above 3.0. It reads data from a CSV file containing earthquake records, processing it with p5.js’s `loadTable` and custom sorting logic in `setup`. The visualization uses p5.js’s `createCanvas` and drawing functions, including `rect` for bars and `text` for labels and tick marks, to plot each location’s average magnitude. Japanese and Afghan averages are highlighted directly on the chart.

Mar 20, 2024

Fork of making face with D3.js!

A smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The code uses `d3.select` to target the SVG, then appends groups and shapes including circles, rectangles, and a path for the mouth via `d3.arc`. Two eyebrow rectangles transition vertically using chained `transition.attr` calls with specified durations, creating a repeated eyebrow raise effect. The static face elements render in pink with black outlines, while only the eyebrows animate.

Mar 18, 2024

Fork of ICE-5

This example demonstrates how to load and parse a CSV file containing credit card data, then display basic file statistics on an HTML page. It shows the number of rows and columns in the dataset, along with the estimated file size, alongside a decorative credit card image. The implementation uses D3.js v7’s `d3.csv` method to fetch and parse the external CSV from GitHub, and calculates the file size from the formatted CSV string. Styling is handled through CSS with pink backgrounds and large typography, while the layout includes SVG elements for displaying the card image.

Mar 18, 2024

Fork of Loading CSV

This example demonstrates how to load and display a CSV dataset using D3.js. It fetches the Iris Dataset from a remote URL and renders the raw data as formatted JSON text on the page. The visualization first uses D3’s `csv` function to asynchronously load the data, then chains a `.then()` callback to append a `<pre>` element to the body, converting the parsed data to a readable JSON string with `JSON.stringify`. The code relies on D3 v5’s `select` and `csv` APIs, showing a minimal workflow for ingesting tabular data and presenting it in the browser without any charting or interactive elements.

Mar 4, 2024

face

A smiling face drawn with SVG shapes—a yellow circle, black outlines, pink ellipses for cheeks and ears, and an arc for the mouth—has animated eyebrows that continuously move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `attr` to build the face from primitive elements. A `transition` with a two-second duration moves the eyebrow group, while `arc` generates the mouth path. No external data is loaded; all geometry is hardcoded in `index.js`.

Feb 27, 2024

Smily ice4

A smiling face is drawn with D3 and React, featuring yellow circular head, black eyes and nose, and a curved mouth. The animation shows the rectangular eyebrows moving upward and then back down over a two-second transition each way. The code uses D3’s `select`, `arc`, and chained `transition` methods to build and animate SVG shapes, with React managing the page structure via the root div. The face is centered using an SVG group translation based on the viewport dimensions.

Feb 27, 2024

Circles with D3

This example uses D3 to draw a static set of colorful circles on a white background. The `select` function creates an SVG container, and the code binds an array of data objects to `circle` elements, setting each circle’s position, radius, and fill color via attributes. The circles vary in size and color, with an opacity of 0.708, arranged in a scattered pattern across the canvas. The implementation relies on D3’s data join method to render the shapes.

Feb 27, 2024