Skip to main content
SimilarExport ZIP
100%

ICE 6 Scatter Plot Chart

✓ Published2🌍 Public
Ddiwashhumagain@my.unt.edu
Last edited Oct 19, 2025
Created on Oct 19, 2025

This interactive scatter plot visualizes the relationship between the U.S. Federal Funds Rate and the U.S. Inflation Rate over time, with each point representing a yearly observation. The chart uses React state to manage a custom tooltip that displays the year, rate type, and value when a user hovers over an individual point. The visualization is rendered as an SVG using D3 v5’s `scaleLinear`, `extent`, and `min`/`max` functions for mapping data to coordinates. The data originates from a remote CSV file, processed with D3’s `csv` parser to filter incomplete records before plotting.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays the U.S. Federal Funds borrowing rate over time as a single steelblue line chart, with a focus on user interaction. Hovering the mouse over the plot reveals a small black circle and a text label that track the nearest data point, showing its date and rate value. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for axes, and d3.line for the path. It also employs a d3.bisector to locate the closest data point, with SVG elements for rendering.

RRobFaj
75% match
Loading thumbnail…

ICE 6 Bar Chart

This bar chart visualizes the growth of the U.S. M2 money supply in billions of dollars over time, using a horizontal bar layout where each bar represents a year. The React-based example loads CSV data via `d3.csv` and employs `scaleBand` and `scaleLinear` from D3 v5 to position bars and axes, rendering everything as SVG. It features custom gridlines, formatted tick labels, and rounded bars with hover effects and drop shadows, all styled through CSS to create a clean, modern presentation.

Ddiwashhumagain@my.unt.edu
73% match
Loading thumbnail…

ICE-7-4 Area Chart1

This area chart displays the U.S. Monthly Consumer Price Index (CPI) over time, with the shaded region emphasizing the trend and magnitude of inflation. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, filled path. Axes are created with `axisBottom` and `axisLeft`, and data is loaded via `csv` from a provided URL. The SVG rendering includes labeled axes and a title, with the area fill styled in maroon.

Hhossaphul
72% match
Loading thumbnail…

ICE-6 Scatter Plot

This interactive scatter plot compares two variables, with dropdown menus above the chart allowing the user to switch which data columns are plotted on the x- and y-axes. The visualization is built with React and renders as an SVG using D3.js v5, leveraging D3’s selection and axis-generation methods to draw the points and tick marks. The source data is loaded from a local `v3` dataset, and the menus are populated dynamically from its column names.

RRevanthGrreddy
72% match
Loading thumbnail…

ICE-7-line_chart

This line chart visualizes the history of average prime lending rates in the United States from 1956 to the present, with each year’s average rate plotted against time. The SVG rendering uses d3.csv to load the dataset from a GitHub Gist, then applies d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and a d3.line generator with curveBasis to create the smooth blue path. The chart includes labeled axes for year and rate, with gridlines extending across the plot area.

Ssenthilrajendran1
72% match
Loading thumbnail…

ICE 6 Bar chart of US Economic indicators

This bar chart displays economic indicators for the United States, using a horizontal layout where each category is represented by a teal bar scaled to its quantitative value. Built with React and D3, the visualization loads CSV data from a GitHub gist and renders it as an SVG. The code leverages D3's `csv` parser, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis, with custom tick marks and labels drawn for both axes. The chart includes a title and axis labels, showing up to ten data entries.

Ddiwashhumagain@my.unt.edu
71% match
Loading thumbnail…

Fork of Scatter Plot - ICE 6

This example visualizes birth-rate trends across U.S. states by plotting each state as a dot, comparing values from 2017 on the x-axis against 2018 on the y-axis. The scatter plot uses a fixed square scale domain (250,000 to 600,000) to emphasize changes between the two years, with green circles outlined in black. The code loads a CSV dataset via `d3.csv`, parses numeric fields, and renders the chart using D3 v6 with SVG elements, axes via `d3.axisBottom` and `d3.axisLeft`, and circle elements bound to the data. A mouseover handler logs the state and its two-year values to the console, but no interactive tooltip is displayed.

NNandini Maddula
71% match
Loading thumbnail…

Inflation Rates _ Project Inc1

This visualization displays the 5-year inflation rate (T5YIE) over time as a smooth, curving line with colored dots marking each data point. The line uses a gradient stroke, while the circles are colored from blue to orange to red based on their position within the value range, with tooltips showing the date and rounded rate. Built with React and D3 v7, the code loads CSV data, applies time and linear scales, and renders the chart as SVG with custom axis components.

RRobFaj
70% match