Fork of Activity 7 Scatter Plot

100%

Fork of Activity 7 Scatter Plot

✓ Published0🌍 Public

Last edited Oct 20, 2024

Created on Oct 20, 2024

This scatter plot visualizes monthly accident rates in the USA from 2004 onward, with each circle’s color encoding the month of the year. The x-axis represents time as a decimal year, while the y-axis shows the rate value. Using D3 v7, the visualization applies a linear scale for both axes, an ordinal color scale with `d3.schemeCategory10` for months, and appends SVG circles to the chart. The data is embedded inline in the HTML, and axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

We are Displaying the IRIS dataset using Scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot

This scatter plot displays the relationship between accident dates and the number of casualties, with time on the x-axis and casualty counts on the y-axis. The visualization uses D3.js v7 to render an SVG chart, employing `d3.scaleTime()` and `d3.scaleLinear()` for axis scaling, `d3.line()` to generate the path connecting data points, and `d3.axisBottom()` and `d3.axisLeft()` for labeled axes. Sample accident data is embedded directly in the script, with dates parsed using `d3.timeParse()` for proper time-based positioning.

JJames Cruz

80% match

Loading thumbnail…

Fork of Fork of Hello VizHub

This example shows a scatter plot of global road accidents from 2015 to 2020, with each circle representing a year’s accident count and colored by accident severity (green, orange, red for Low, Medium, High). The plot uses D3 v6 to load a CSV file via `d3.csv`, then builds an SVG with linear scales for the x- and y-axes (`d3.scaleLinear`), ordinal color mapping (`d3.scaleOrdinal`), and axis generators (`d3.axisBottom`, `d3.axisLeft`). Circles are appended and positioned using the scales, with a legend added manually alongside the axes. The data source is a global road accident CSV, and rendering is entirely SVG-based.

Llikhithakarunakarreddym@gmail.com

79% match

Loading thumbnail…

Accident Data

This scatter plot visualizes accident data, encoding accident count on the x-axis and categorical severity (High, Medium, Low) on the y-axis using numeric mapping (3, 2, 1). The SVG rendering uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` to map severity levels to red, orange, and green fills. The chart loads data from a local `accidents.csv` file, with custom axis labels for severity and count.

Llikhithakarunakarreddym@gmail.com

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

An animated scatter plot visualizes traffic accident data from a CSV file, cycling through four quantitative columns—Speed Limit, Number of Casualties, Number of Vehicles, and Accident Severity—as its axes every two seconds. The visualization uses a reusable D3 scatter plot module that dynamically updates the axis domains and circle positions based on the currently selected variables. Rendered as an SVG via D3 6.7.0, the chart employs `scaleLinear`, `axisLeft`, and `axisBottom` utilities to construct axes and scales, with a fixed y-axis origin and a radius of five pixels for each data point.

Ppragnyalipsa96@gmail.com

78% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes traffic accident data, plotting speed limits against the number of vehicles involved, with points color-coded by weather condition and shaped by accident severity. The visualization cycles through different x-axis variables every three seconds, alternating between speed limit and driver experience. Built with D3.js v6, the example uses `scaleLinear` for axes, `scaleOrdinal` for categorical color and shape encoding, and `symbol()` for point markers. Data comes from a CSV file fetched via `csv()`, rendered as an SVG with axis labels, legend, and custom styling.

Ppragnyalipsa96@gmail.com

78% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization displays the number of accidents in the USA from 2010 to 2020 as an area chart, with a green filled region beneath a yellow line. The data is loaded from a CSV file via `d3.csv` and rendered as an SVG using D3 v5. The chart uses `scaleLinear` for both the x and y axes, `line` and `area` generators with `curveBasis` smoothing, and `axisLeft`/`axisBottom` for labeled ticks. The y-axis uses a `.3s` number format, and gridlines are drawn with red tick lines.

Bblikitha

77% match

Loading thumbnail…

Fork of Activity6-Q3.6

This D3.js (v7) scatter plot visualizes population data over time, with each circle representing a country-year observation. The plot distinguishes USA data points in blue from other countries in orange, using year on the x-axis and population on the y-axis. The code loads CSV data from a GitHub repository, converts numeric fields, applies linear scales via `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. Circle positions are set using the scaled x and y coordinates, with point radius fixed at 5 pixels. The SVG output automatically sizes to the browser window dimensions.

Ssriyaalugupalli@my.unt.edu

76% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3 v7, visualizes traffic accident data by mapping vehicle counts against speed limits and driver experience. The chart uses color-coded symbols to distinguish weather conditions and road types, with legends and axis labels providing context. Implemented using Mike Bostock’s reusable chart pattern, the scatterPlot function exposes chainable setters for x, y, color, and symbol accessors. Two SVG instances render the same dataset with different configurations, while an optional index.js variant cycles the x-axis variable every three seconds to demonstrate the chart's reusability through D3’s selection.call method.

Ppragnyalipsa96@gmail.com

76% match