Scatter Plot

100%

Scatter Plot - RDG2018

✓ Published1🌍 Public

Last edited Mar 9, 2021

Created on Mar 9, 2021

This scatter plot displays monthly waste measurements in kilograms (WasteKgs) for 2018, sorted by month. The visualization uses React with D3 v6 for scales and SVG rendering, loading CSV data from a GitHub gist. It employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with reusable axis components and circle marks that include native SVG tooltips via the `<title>` element. Custom Poppins typography and teal circle styling give the chart a clean, modern appearance.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot With Menus v1 (Mexico Data)

This interactive scatter plot visualizes Mexican waste data, allowing users to explore relationships between Month, Zona, and WasteKgs. Built with React and D3 v6, it renders circles as SVG marks within a Cartesian coordinate system. The chart features two dropdown menus that dynamically update the x and y axes, with tick marks and labels generated by the custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file using D3's `csv` function, and scales are computed with `scaleLinear` and `extent`.

AAndres de la Garza

79% match

Loading thumbnail…

Mexico Waste Data (Log Scale)

A scatter plot displays monthly waste measurements in kilograms across a year, with a logarithmic y-axis to accommodate the wide range of values. The x-axis uses a time scale with ISO 8601 date formatting. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLog`, with SVG circles representing data points. The data is loaded via `d3.csv` from a GitHub gist, and both axes are rendered using custom React components.

AAndres de la Garza

77% match

Loading thumbnail…

Mexico Waste Data 2018 - Choropleth

This interactive SVG bar chart displays the total weight of waste in kilograms for each month of 2018, using data from a remote CSV file. Built with React and D3 v6, it processes the time-series data by binning monthly values and scaling the y-axis. The visualization uses SVG rendering with axis components and interactive tooltips, providing a clear view of monthly waste trends throughout the year.

AAndres de la Garza

76% match

Loading thumbnail…

Mexico Waste Data 2018 (Log Scale/binned)

This example shows monthly household waste totals in Mexico for 2018, binned by month and displayed as a bar chart with a log-scaled y-axis. The visualization aggregates raw date-stamped waste records into a histogram using D3’s `bin` and `sum` functions, then renders the resulting bins as SVG rectangles via React. The x-axis uses a time scale (`scaleTime`) with formatted month-day-year ticks, while the y-axis uses a linear scale (`scaleLinear`) displaying kilo values. The code builds custom `AxisBottom` and `AxisLeft` components and includes a native SVG `<title>` tooltip on each bar. Data is loaded as CSV through D3’s `csv` method.

AAndres de la Garza

73% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of waste-collection metrics from a municipal dataset, showing how values like houses reached or dry waste collected are spread across recorded observations. The chart uses D3.js v6 to generate a bar chart, with React managing the component state and data loading via the `d3.json` method. The histogram displays frequency counts for each bin on the y-axis, while the x-axis represents the numeric range of the selected variable.

AAnimesh Nautiyal

73% match

Loading thumbnail…

CircleMark Residuos decultivos generados

This visualization displays crop residue waste generated in 2018 across different zones and months, using a circle mark where the size of each circle encodes the WasteKgs value. The chart orders zones on the y-axis and months on the x-axis, with tooltips revealing exact waste amounts. It is built with the vega-lite-api library, which registers Vega and Vega-Lite, and loads data from a CSV file via d3.csv. The visualization applies custom configuration for axis styling and title formatting.

AAndres de la Garza

71% match

Loading thumbnail…

A scatter plot displays the relationship between item weight and item rate from a CSV dataset, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The visualization includes axes with tick marks, axis labels, and a title, all styled via CSS. The code uses d3.csv, d3.extent, d3.axisLeft, d3.axisBottom, and d3.format for data loading, scaling, and formatting, while React serves as the framework hosting the D3 v5 implementation.

BBaraneedharan N M

71% match

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

71% match