Skip to main content
SimilarExport ZIP
100%

Scatterplot with a Qualitative Color Scale Using D3

✓ Published1🌍 Public
OOlha
Last edited Apr 18, 2022
Created on Mar 8, 2022

This scatterplot displays bike stations in the Bay Area for 2013, plotting longitude on the x-axis and latitude on the y-axis. Each station is colored by city using a qualitative scale, d3.scaleOrdinal, with d3.schemeTableau10, while a D3 legend (d3.legendColor) shows location categories. The visualization uses D3 v7 to render SVG axes and circles, with data loaded from a remote CSV file.

AI-generated description

Assignment 6 part A

Scatterplot (with 2 quantitative variables and a qualitative variable) with a Qualitative color scale Using D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot of Bike Locations with D3

A scatter plot maps the latitude and longitude of Bay Area bike stations from a 2013 CSV dataset, with each orange circle positioned by its coordinates. The visualization uses d3.csv to load the data, then d3.scaleLinear to map longitude and latitude to SVG canvas positions, while d3.axisBottom and d3.axisLeft generate the axes. Titles for longitude and latitude labels and a heading are added as SVG text elements.

OOlha
87% match
Loading thumbnail…

Scatter Plot in D3 with Qualitative Color Scale

A scatter plot visualizes workout data, mapping distance in miles to the x-axis and duration in minutes to the y-axis. Each point is colored according to the exercise type using D3’s `d3.scaleOrdinal` with the `d3.schemeCategory10` qualitative color scale. The SVG is rendered with D3 v7, and a categorical color legend is added via the `d3-legend` library. The data is loaded from a CSV file, and axes and labels are generated using D3’s `d3.axisBottom` and `d3.axisLeft`.

Bbhavi.kenia@gmail.com
79% match
Loading thumbnail…

Bubble Chart with D3 without Tooltips/Legend

This bubble chart displays the locations of bike stations in the Bay Area, with circles sized by dock count and colored by city. The visualization aggregates station data from a CSV file by city, plotting averaged longitude and latitude coordinates. Using D3 v7, the code employs scaleLinear functions for the x, y, and radius mappings, scaleOrdinal for categorical colors, and standard axis generators. Dashed lines and inline labels identify each city with its total dock count, while SVG text elements provide axis titles and chart headings.

OOlha
79% match
Loading thumbnail…

Bubble Chart with Tooltips Using D3

This bubble chart uses D3 v7 to visualize bike station locations in the Bay Area, mapping latitude and longitude to axes, dock counts to bubble size, and cities to categorical colors from `d3.scaleOrdinal`. A legend, built with the d3-legend library, identifies city colors. Interactive tooltips, styled via CSS and positioned with mouse events, display the total bike count and city name for each aggregated data point. The chart renders as SVG and loads data from a remote CSV using `d3.csv`.

OOlha
77% 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
75% match
Loading thumbnail…

Scatter Plot Template

This scatter plot displays temperature readings over time for San Francisco, with each circle representing a data point. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. Data is loaded as CSV via d3.csv and converted to Date and numeric types before rendering as semi-transparent steelblue circles. The chart includes custom axis labels and a title, all drawn as SVG elements within a fixed-width container.

LLex
72% match
Loading thumbnail…

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with an overlaid maroon area fill beneath a line connecting the data points. The visualization uses D3 v6 to load CSV data, map timestamps to a time scale, and temperatures to a linear scale with axis ticks and labels. The SVG rendering includes a custom area generator with curveBasis for smoothing, and the chart is styled with labeled axes, a title, and gridlines.

WWayne716
72% match
Loading thumbnail…

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with each point representing a single observation. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.axisBottom` and `d3.axisLeft` to generate the gridlines with tick marks. Circles are styled with semi-transparent steelblue fill, and data is loaded from a CSV file containing timestamp and temperature values.

Vvic126
72% match