Skip to main content
SimilarExport ZIP
100%

Scatterplot

✓ Published0🌍 Public
LLauraCortes
Last edited Nov 1, 2016
Created on Nov 1, 2016

This scatterplot visualizes the relationship between distance from the center of the contiguous United States and the cost of a 20-minute, 10-mile ride for various cities. Each point is colored blue and includes a tooltip showing the city name and exact values on hover. The code loads data from a TSV file using `d3.csv`, scales the x and y axes with `d3.scale.linear`, and computes domains with `d3.extent`. It renders SVG circles, axes via `d3.svg.axis`, and uses `d3.scale.category10` for legend colors.

AI-generated description

This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3887118'>Scatterplot</a>

forked from <a href='http://bl.ocks.org/xaranke/'>xaranke</a>'s block: <a href='http://bl.ocks.org/xaranke/ca3a852e218ac517f00a'>Scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

CS360 A10

A choropleth map of the United States visualizes the average monthly transportation cost by state, with a color scale from light yellow to dark red. The map is rendered using SVG paths projected with `d3.geoAlbersUsa` and `d3.geoPath`, with state boundaries drawn as black strokes. Fill colors are assigned based on the `transportationCost` field from the `StateExp.csv` dataset, mapped through a linear color scale. A horizontal `d3.legendColor` legend displays the cost range, and a hover interaction logs the corresponding state ID to the console.

Lleoframba
74% match
Loading thumbnail…

Fork of reusable D3 Scatter Plot

This interactive map of the United States plots ten major cities as red circles, scaled by their netflow values. A click on any city draws semi-transparent black lines connecting it to all other cities, visually comparing its position relative to the entire set. Built with React and D3, the visualization uses a geoAlbersUsa projection from `d3.geoPath` to render the states, while mouseover transitions animate circle size and color, and the `topojson` library converts US Atlas data for state boundaries.

GGan Gao
73% match
Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin
71% match
Loading thumbnail…

Proportional Symbol Maps

This proportional symbol map displays transportation costs across U.S. states, with circles sized by cost and colored purple for the top 10 most expensive states or violet otherwise. Hovering reveals a tooltip with the state name and exact cost. Built with D3 v3, it uses d3.geo.path for map rendering, d3.scale.sqrt for circle radii, and topojson to draw state boundaries. The visualization includes a legend showing cost values and employs queue.js to load GeoJSON, centroid data, and a CSV of state costs.

PPranay Matalia
71% match
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
71% match
Loading thumbnail…

Creating the Scatter plot - ICE6

This scatter plot visualizes tourist visitor counts across U.S. states, comparing 2019 figures on the x-axis with 2021 numbers on the y-axis. Each circle represents a state, with data loaded from a CSV file via `d3.csv` and rendered as SVG elements using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear`. The chart includes axis labels, a title, and a subtitle, while hover effects on the dots change their fill color. The accompanying HTML provides a written analysis noting an overall upward trend in visitors between the two years, with notable increases in destinations like California, Hawaii, and Idaho.

Ssridhardubala106@gmail.com
71% match
Loading thumbnail…

D3 Scatterplot

This interactive D3 scatterplot visualizes cumulative Uber fare amounts per day from 2009 to 2015, using data from a Kaggle dataset. The SVG chart plots each date on the x-axis and total daily fares on the y-axis, with green circles marking individual points. The visualization uses `d3.csv` to load the raw data, `d3.scaleBand` for the time-based x-axis, and `d3.scaleLinear` for the fare amounts. Custom tick marks highlight the first date of each year, while gridlines and labeled axes improve readability.

DDominic Fernandez
71% match
Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes a road and ride measurement dataset, cycling through four attribute combinations on the x-axis while y remains fixed. Data points are colored by category (word-wrap, word-color, word-country) and rendered as ellipses with variable rx and ry radii. The visualization uses D3 v6 with the reusable `scatterPlot` module, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` for rotation. It loads data via `d3.csv`, appends SVG circles, and includes a custom legend with labels.

AAnanthulaaditya
71% match