Voronov scatter plot

Interactive scatter plot

A scatter plot uses the D3.js library to visualize the relationship between dew point and relative humidity, drawing each day of the weather dataset as a circle on an SVG canvas. The code creates linear scales for both axes, renders the axes with labels, and implements interactive hover effects that display a tooltip with the exact date, humidity, and dew point values using D3’s time parsing and formatting functions. React is loaded for potential integration, but the visualization itself is built with vanilla D3 selections and transitions.

85% match

D3 ScatterPlot

This scatter plot visualizes the relationship between dew point and relative humidity, with each point’s color mapped to cloud cover. The SVG visualization uses the D3 v5 library’s `scaleLinear` for axes and color, rendering circles with `attr("cx")` and `attr("cy")` based on a JSON dataset of weather observations. Axis labels and tick marks are generated via `axisBottom` and `axisLeft`, while the chart’s size adjusts to the viewport.

80% match

Dashboard

This dashboard presents a scatterplot comparing pairs of weather variables, such as temperature and humidity, from a dataset that includes daily records. Users select the x and y variables from dropdown menus to change the visualization. The chart is rendered as an SVG using D3 v5, with D3’s scale and axis components generating the grid and tick marks. The surrounding layout uses CSS to position header panels and the plot area.

Eeourm20

74% match

Interactive barchart

This interactive barchart shows the distribution of humidity measurements from a weather dataset. Users can hover over bars to see the exact humidity range and the number of days in each bin via a tooltip. Built with D3 v5 and React, it uses `d3.histogram()` to generate bins, `d3.scaleLinear()` for axes, and SVG for rendering. The mean humidity is marked with a dashed line. Data is loaded asynchronously via `d3.json()`.

73% match

Hharichandanamone21@gmail.com

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Fork of Scatterplot with Iris Data

This interactive scatterplot visualizes the relationship between temperature (°C) and humidity (%) from a CSS color dataset, styling each data point as a circular mark. Built with React and D3 v7, the code uses `scaleLinear`, `extent`, and `format` to map the values, while `csv` loads the data from a remote URL. The SVG rendering includes custom axis components and hover tooltips that display temperature values. The visualization uses a Poppins font and muted teal marks on a clean background, with labels for both axes.

Cchalasanigayaetiri@gmail.com

Project Visualizations

This scatter plot displays the Vancouver city humidity levels over time, with each data point colored according to its humidity value using a viridis color scale. The visualization loads CSV data from a GitHub gist via `d3.csv` and renders circles positioned by `d3.scaleBand` for both datetime and humidity axes. Gridlines enhance readability, while text labels above each point show the humidity percentage. The SVG is styled with custom CSS for axis colors, grid dashes, and background, and the code uses D3 v7 to construct the chart with margins and scales.

Chart redesign

This visualization redesigns a line chart of daily humidity data from a local weather dataset, highlighting seasonal patterns and mean humidity levels. Using D3 v5 within a React framework, it sorts and downsamples the time-series data, then renders an SVG with an area chart, individual data points, and seasonal background bands for Spring, Summer, Fall, and Winter. The code employs `d3.area`, `d3.scaleTime`, and `d3.timeParse` to generate the chart, while linear gradient definitions and season mean lines provide additional visual context.