Skip to main content
SimilarExport ZIP
100%

A6 - Scatterplot with Qualitative Color Scale

✓ Published0🌍 Public
RRiya Mathur
Last edited Mar 5, 2024
Created on Mar 5, 2024
Forked from HTML Starter

This scatterplot shows the relationship between average temperature and wind speed across different states, with each dot colored by state to reveal grouping patterns. The visualization uses D3.js v6 to load CSV weather data and render SVG circles, mapping temperature to the x-axis and wind speed to the y-axis. A qualitative color scale (d3.scaleOrdinal with d3.schemeCategory10) assigns distinct colors to each state, while a categorical legend created with the d3-legend library identifies the color encoding. The chart includes labeled axes, a title, and semi-transparent points for readability.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_question 3

This example visualizes the relationship between daily mean temperature and humidity, using wind speed to encode point color, in a scatter plot. Daily climate data from a CSV file is represented by circles, with a continuous color gradient that maps wind speed values. The chart includes labeled axes and a color legend for wind speed. The implementation uses D3 v7 functions like `scaleLinear`, `extent`, `scaleSequential`, `interpolateCool`, `axisBottom`, and `axisLeft`, rendering as SVG within the HTML document. A custom color legend is created with a linear gradient and axis ticks.

Ssindhureddykandada@gmail.com
77% match
Loading thumbnail…

A6 - Sequential Color Scale Bar Chart

This example visualizes average temperatures across cities using a horizontal bar chart with a sequential blue color scale. It shows how temperature values map to color intensity, with a legend on the right providing the quantitative scale. The visualization uses D3.js v6 with d3.scaleSequential and d3.interpolateBlues for the color encoding, along with d3.scaleLinear and d3.scaleBand for the axes. A linear gradient legend displays the temperature-to-color mapping, and the data comes from a CSV file hosted on GitHub Gist. The chart includes axis labels and a title, with the bars' color intensity reflecting the average temperature for each city.

RRiya Mathur
77% match
Loading thumbnail…

Q4

This bubble chart visualizes the correlation between mean temperature, humidity, and wind speed for 50 US cities. Each city is a circle whose x-position maps to temperature, y-position to humidity, and size to wind speed, with color encoded by city name via the Turbo color scale. Built with D3 v7, the SVG visualization includes axes, a wind-speed legend, and a hover tooltip. Data is loaded from a local CSV file using `d3.csv`.

Jjangalaupender@my.unt.edu
76% match
Loading thumbnail…

Qualitative color scale

A scatterplot displays six data points across three qualitative categories, using an ordinal color scale to distinguish category membership. The visualization employs d3.scaleOrdinal with d3.schemeCategory10 to assign colors to points, and includes a color legend generated via the d3-legend library. The code loads CSV data with d3.csv, converts string values to numbers, and renders circles and axes using SVG elements within a D3 v6 framework.

KKwasi Acquaye
76% match
Loading thumbnail…

State Data Scatterplot with Color Legend

This visualization displays a scatterplot of state ratings, with each circle representing a state's average customer rating against its total number of purchases. The circles are colored by the most popular season for that state, using an ordinal color scale with distinct hues for Summer, Fall, Winter, and Spring. A D3 color legend with interactive hover highlighting allows users to filter which season's data points remain fully opaque. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal for colors, and d3-axis for tick marks, while d3.select handles mouse events for tooltips and legend interactions.

Mmacgregorm01@gmail.com
75% 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
75% match
Loading thumbnail…

Fork of A7 Line Chart

This example visualizes monthly wind speed measurements across multiple cities, with each city represented by a distinct colored line. The chart uses an ordinal color scale with a legend to distinguish the ten city categories. Built with D3 v6 and rendered as SVG, the visualization includes both lines connecting data points and circular markers for each measurement. The code employs `d3.group` to structure the data by city, `d3.scaleOrdinal` for color mapping, and `d3.line` for path generation. A hover effect changes the dot color to red, and axis labels identify the months and wind speed units.

Bbharatpatil0701@gmail.com
74% match
Loading thumbnail…

ICE7-SCATTERPLOT

This scatterplot visualizes Seattle weather data, plotting daily maximum temperature against precipitation and encoding weather type by color. Built with D3 v7 and React, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for labeled scales. The SVG renders circles with fixed radius and opacity, includes a weather legend, and loads data from a CSV file.

Kkpavithrasai@gmail.com
74% match