Fork of Scatter Plot With Menus v1 (Mexico Data)

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.

80% match

Scatter Plot - RDG2018

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.

79% match

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.

78% match

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.

Fork of Scatter Plot with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which numeric columns to display on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while a custom `dropdownMenu` component handles the select elements. Circles animate into position over two seconds with a staggered delay, and axis labels update to reflect the chosen variables.

Iianjwo

Fork of Mexico Waste 2018 Choropleth Map

This choropleth map visualizes waste generation across Mexican states for 2018, using color intensity to represent WasteKgs values from a CSV dataset. The map renders state boundaries and graticules using `d3.geoPath` with a Mercator projection, while the topojson geometry is loaded from a gist. React manages state for both the geographic and waste datasets, with a sequential color scale displaying the data, though color values are not currently applied to map paths in the visible code.

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

NNikithakatta30

Fork of Mexico Waste 2018 Choropleth Pass2

This choropleth maps municipal solid waste generation across Mexican states using a Mercator projection, with a sequential viridis color scale encoding waste kilograms from a 2018 dataset. The visualization renders geographic boundaries and graticules via `d3.geoPath` and `d3.geoGraticule`, while React manages state and data loading through custom hooks. State geometries come from TopoJSON processed with `topojson.feature` and `topojson.mesh`, and the color encoding uses `d3.scaleSequential` with `d3.interpolateViridis`. Missing regions appear blue, and CSV data is fetched and parsed with `d3.csv`.