Skip to main content
SimilarExport ZIP
100%

Fork of Responsive Scatter Plot

✓ Published0🌍 Public
Ttejasviteegala@my.unt.edu
Last edited Mar 21, 2024
Created on Mar 21, 2024

This example displays a scatter plot of annual gold prices, charting Date on the x-axis against USD on the y-axis. It uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render the axes. The SVG circles are appended using a data join with attributes for position and fill. The chart is styled with a custom background color and large tick labels via CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatterplot of the restaurant data

A scatterplot displays annual gold rates, plotting date on the x-axis against USD value on the y-axis. Each circle represents a yearly data point, with axes labeled and styled in purple. The visualization uses D3 v6 methods like `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the dataset from a GitHub-hosted CSV. SVG circles are colored with a beige fill and stroke, while axis text is sized at 24 pixels.

Ttejasviteegala@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes a scatter plot of gold-price data from a CSV file, animating between engine power and miles-per-gallon columns on a fixed axis. The visualization uses D3’s `csv` loader and a custom `scatterPlot` module, rendering SVG circles with a 5-pixel radius. A `setInterval` timer cycles the x-axis mapping every second, updating the chart via the plot function. The code demonstrates dynamic axis updates by re-invoking the plot with new accessors, while the y-value remains static, and the viewport dimensions are set to the window size.

NNanditha Reddy
81% match
Loading thumbnail…

Fork of Fork of Barchart of the restaurant data

This example visualizes the annual gold rate data by rendering a horizontal bar chart where each bar represents a date, with the bar length encoding the gold price in USD. The chart uses D3.js v5 for scales and data processing, while React 16.9 handles the component lifecycle and SVG rendering. The code employs `scaleBand` for the y-axis date categories, `scaleTime` for the x-axis temporal values, and explicitly maps over the data to draw each rectangle. The visualization reads from a CSV file hosted on GitHub and filters the dataset to the first 30 entries, with axes labeled to clarify the date and USD units.

Ttejasviteegala@my.unt.edu
81% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes global GDP data as a responsive scatter plot using Chart.js, rendering points on a canvas. It shows yearly GDP values fetched from a CSV file hosted on GitHub, with point colors encoding value ranges: orange below 30 trillion, blue between 30 and 60 trillion, and green above 60 trillion. The code parses the CSV with `split` and `parseInt`/`parseFloat`, filters invalid rows, and configures axes labeled "Year" and "Value". The chart uses the `scatter` type, with `backgroundColor` set per data point for categorical coloring.

RRakesh Kumar Chekuri
76% match
Loading thumbnail…

Fork of Scatter Plot

This example displays a scatter plot of country reserves, with each circle’s horizontal position mapped to the reserve value and vertical position to the country name using a point scale. The visualization uses D3.js (v7) to load CSV data, build linear and point scales, and render axes with tick formatting. Grid lines are created by negative tick sizes, and axis labels are added manually, with circles styled via CSS.

Ggharakhani1986
76% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee
76% match
Loading thumbnail…

Fork of Fork of making Scatter plottes

This fork of a scatter plot example visualizes harvested crop area per year from a small CSV dataset, drawing a smooth area chart rather than discrete points. The D3 v5 code sorts the data chronologically, then uses `scaleLinear` and `scaleTime` to map area and year values to SVG coordinates. It renders the area with `area()` and `curveBasis`, while grid lines and axis labels are generated via `axisLeft`, `axisRight`, and `axisBottom`. The SVG canvas is 960 by 500 pixels, with the area filled steelblue and black stroke, and the chart includes a title and axis labels.

SSteve_Nashon
76% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes Olympic 2021 medal counts, plotting gold medals against total medals for each country. It uses D3 v7, with `scaleLinear` and `extent` to map data, `axisLeft` for the y-axis, and custom `xAxis`/`yAxis` helpers. Circles are rendered with `selectAll().join('circle')`, sized and colored via attributes. The underlying CSV is fetched with `csv()` from D3. A gray `innerRectFill` background and axis labels highlight the correlation between gold and overall performance.

Wwkj0713@gmail.com
76% match