Skip to main content
SimilarExport ZIP
100%

ICE-6 Part 2

✓ Published0🌍 Public
Aav.dj.2000@gmail.com
Last edited Mar 23, 2023
Created on Mar 23, 2023

This example visualizes earthquake data from a CSV file, plotting latitude against longitude as a scatter plot with each point sized by depth. The chart uses D3 v6 to load and parse the data, then renders SVG circles with color-coded species markers. Axes are generated using `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The visualization dynamically fills the browser window and includes labeled latitude and longitude axes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows earthquake data as a scatter plot with longitude on the x-axis and latitude on the y-axis, using blue circles to mark each seismic event. The code loads a CSV file via `d3.csv`, computes the data domain with `d3.min` and `d3.max`, and maps coordinates using `d3.scaleLinear`. The SVG is appended directly to the body, with axes and point positions created through D3 selections and SVG circle elements. The visualization runs within a React shell, although the rendering itself relies entirely on D3’s imperative API.

Ppethavenu
83% match
Loading thumbnail…

ICE-6 (Part-2)

This example plots a weather dataset from a GitHub-hosted CSV file as a scatter plot, showing the relationship between temperature (x-axis) and humidity (y-axis). The visualization is created with D3 v7, directly utilizing the library's `csv`, `scaleLinear`, `extent`, and axis functions to map data points as circles within an SVG canvas. The code constructs linear scales for both axes and renders the plot across the full window dimensions, with labeled axes for temperature in Celsius and humidity as a percentage.

Ppavankrishna441@gmail.com
82% match
Loading thumbnail…

ICE-6 Scatter Plot

This example presents an ICE-6 scatter plot, a static visualization that displays individual data points as circles within a bounded area. The plot uses D3.js (v7) to create the visualization, with the code defining scales for positioning, axes for orientation, and SVG elements for rendering. The data appears to be plotted without any encoding for size or color, suggesting a focus on spatial distribution rather than multidimensional analysis. The implementation relies on standard D3 methods like `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and the visualization is contained in a simple HTML file with a single container div.

Nneeharika2023@gmail.com
82% match
Loading thumbnail…

ICE-6

This bar chart displays the magnitudes of earthquakes across different states in India, ranking the first 50 records from a CSV dataset. The visualization uses React for component structure and D3 v5 scales and SVG rendering to map state names to a y-axis band scale and magnitude values to an x-axis linear scale. Blue gridlines and labeled axes help compare the relative severity of seismic activity across regions, with data loaded asynchronously via D3’s `csv` function and rendered as horizontal rectangles.

Aav.dj.2000@gmail.com
80% match
Loading thumbnail…

ICE 6

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes, with each point colored by species. It uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with axes and labels. The code demonstrates `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and the `join` method for binding data to SVG elements. The chart includes custom tick styling and a simplified color scheme for the three iris species.

AAmar09nath
79% match
Loading thumbnail…

ICE-6

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis, body mass on the y-axis, and coloring each point by species using a custom color function. The code loads data from a CSV file via `d3.csv`, scales the axes with `scaleLinear` and `extent`, and renders circles with SVG. Axis ticks are drawn using `axisLeft` and `axisBottom`, with text labels added for both axes and a title.

EEeshwarReddy
79% match
Loading thumbnail…

ICE-6 Part - II

This visualization presents a scatter plot of penguin measurements, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species. Using D3 v5 and React, it loads data from a CSV file, applies linear scales, and renders circles with SVG. Axes are added via d3.axisLeft and d3.axisBottom, while labels and a title use static SVG text.

Mmosesimmanuelvemana@my.unt.edu
79% match
Loading thumbnail…

ICE-6

This example displays a horizontal bar chart of the 12 most populous countries in 2022, loaded from a CSV dataset via d3.csv. D3’s scaleBand and scaleLinear map country names and population values to SVG rectangles, with axes drawn manually using d3.axisBottom and d3.axisLeft. The chart is rendered inside a React component using react-dom, with D3 v5 handling data parsing and scales, while React manages state and updates the SVG elements.

Aabdhaseeeb
78% match