Skip to main content
SimilarExport ZIP
100%

Temp and Humidity Scatter Plot with Color

✓ Published0🌍 Public
Ppadmeshnaik22@gmail.com
Last edited Feb 21, 2024
Created on Feb 21, 2024

This scatter plot visualizes the relationship between temperature and energy consumption, with points colored by species using an ordinal color scale. The visualization uses a D3.js linear scale for both axes and a color legend to map categorical values. The code imports data from an external module, applies d3.scaleOrdinal with schemeCategory10 for colors, and renders circles through a data join. Axes and legends are generated using d3.axisLeft, d3.axisBottom, and custom selection.join methods.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Humidity Vs Temperature Scatter Plot with Color

This fork visualizes the relationship between humidity (x-axis) and temperature (y-axis) as a scatter plot, with each point colored by the month of the year. The plot uses D3.js functions including `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and custom `axes` and `colorLegend` components to render the chart. Data originates from a CSV file containing monthly weather measurements, and the visualization displays all points with a constant opacity to show data density.

Ppadmeshnaik22@gmail.com
79% match
Loading thumbnail…

Humidity Vs Temperature Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length against sepal width. Data points are colored according to the species, with a categorical color legend identifying each group. The visualization uses D3.js `scaleLinear` and `scaleOrdinal` to construct the plot and color assignments, along with `axisBottom` and `axisLeft` for the axes. A custom `colorLegend` component displays the color-to-species mapping, while the data is read from a CSV file.

Ppadmeshnaik22@gmail.com
78% match
Loading thumbnail…

TemperatureReport Scatterplot

This visualization presents a reusable scatter plot that maps climate conditions against moisture levels, with each data point rendered as a steelblue circle that turns orange on hover. The plot displays the x-axis as "Climate" and the y-axis as "Moisture," both scaled linearly from zero to their respective maximums. Built with D3.js v7, the code loads a CSV file via `d3.csv` from a GitHub gist, then uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. Temperature data is visualized using SVG circles appended to the chart, with styling defined in an external CSS file.

Ttejasrikotipalli1@gmail.com
73% match
Loading thumbnail…

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.

MM
72% match
Loading thumbnail…

plot test

This scatter plot displays the relationship between temperature and a corresponding measure value from a small dataset. Two data points are plotted as circles using D3.js v5, with axes scaled linearly to fit the data range. The visualization reads from a CSV file and renders as an SVG, leveraging D3's selection and scale APIs (`d3.select`, `d3.scaleLinear`) to position the marks.

Wwangqin2215
72% match
Loading thumbnail…

Scatter Plot with Menus and Color legend

This interactive scatter plot explores the Bike Sharing Dataset from the UCI ML Repository, showing relationships between normalized temperature, humidity, and wind speed across 731 days. Users select variables for the x- and y-axes via ReactDropdown menus, while weather conditions are encoded by circle color using d3.scaleOrdinal with a custom ColorLegend component. The visualization uses d3.csv to load data, d3.scaleLinear for coordinate mapping, and React hooks to manage state, rendering SVG marks with d3.axis components.

SStefanZhang
72% match
Loading thumbnail…

Temperature scatterplot chart

A temperature scatterplot shows hourly temperature readings over one week, with time on the x-axis and degrees on the y-axis. Each data point is an SVG circle colored teal, with a native `<title>` tooltip displaying the exact temperature value. The chart uses React components for the axes and marks, while D3 v6 APIs (`scaleTime`, `scaleLinear`, `extent`, `csv`) handle data loading, scaling, and tick generation. The dataset comes from the Sense Your City weather CSV, and labels are formatted with `timeFormat`.

Ssurikmeetr
71% match
Loading thumbnail…

D3 Scatter Plot w/ other data set

This scatter plot displays the relationship between temperature and humidity using data from the Sense Your City dataset, which is loaded via a CSV URL. Each circle represents a data point, with position mapped along the x-axis for temperature and y-axis for humidity. The visualization leverages D3 v6.7.0 within a React environment, using `scaleLinear` and `axisLeft`/`axisBottom` from D3 to construct the plot, rendering circles as SVG elements. The margins are defined, and the plot area spans the full window dimensions.

Ccardoza-IPH
71% match