Skip to main content
SimilarExport ZIP
100%

MOUNISH_ICE6

✓ Published0🌍 Public
Mmounishnaidu96@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024
Forked from ICE6.1

This visualization displays the relationship between Revenue and Crop1 Length across different countries, with each circle representing a data point colored by country. The scatterplot uses D3.js v6 to load CSV data, scale the axes with `scaleLinear`, and render the circles as SVG elements. The x-axis shows Revenue Length while the y-axis shows Crop1 Length, with axis labels added via `axisBottom` and `axisLeft`. Country-specific colors are assigned through a marker function, and the visualization adapts to the full viewport size using `window.innerWidth` and `window.innerHeight`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7_Reusable_Scatter_CropYield_Manisha

This interactive scatter plot, built with D3.js (v7), visualizes crop yield in tons per hectare across different countries. Each blue circle represents a single country, positioned along the y-axis and plotted horizontally based on its yield value, with countries sorted in descending order. The chart is created using a reusable `reusableScatter` function that employs D3's `scaleLinear` and `scalePoint` for axes and a `join` pattern for efficient SVG element management. The data is loaded from a remote CSV file using `d3.csv` with `d3.autoType` and then processed and rendered into the visualization.

Kkonudulamanisha@gmail.com
76% match
Loading thumbnail…

ICE7_Reusable_Scatter_CropYield_Manisha

This example shows a reusable scatter plot of crop yield by country, built with D3.js v7 and styled with a clean, minimal layout. The chart renders circles for each data point, with position mapping to a country’s yield and the visual encoding defined by a custom-scale function. It uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` to generate the tick marks, while the data is loaded from a CSV using `d3.csv`. The reusable pattern is implemented through a `scatterPlot` function that takes configuration options, making the chart adaptable to different datasets.

Kkonudulamanisha@gmail.com
75% match
Loading thumbnail…

ScatterPlot_Ice6

This scatter plot visualizes Amazon sales data, showing the relationship between Total Revenue and Total Profit. Each circle represents a country, positioned by revenue and profit, with its size encoding Units Sold and its color encoding the sales Region. The D3.js code loads a remote CSV, uses `d3.scaleLinear` for axes and `d3.scaleSqrt` for sizing, and renders interactive tooltips on mouseover. A legend and animated hover transitions enhance the presentation.

SSaiSriSuryaBandaru@my.unt.edu
74% match
Loading thumbnail…

ICE7_Reusable_Scatter_CropYield_Manisha

This scatter plot visualizes crop yield in tons per hectare against production in million tonnes, with points colored by a categorical group. Built as a reusable D3.js component, it loads data from a CSV file and uses the `d3.selectAll().join()` pattern for incremental rendering. The chart applies `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom`/`d3.axisLeft` for labeled axes, with a legend generated from the distinct group values.

Kkonudulamanisha@gmail.com
74% match
Loading thumbnail…

ICE7_LineChart_CropProduction_Manisha

This line chart displays crop production by country, with countries sorted in descending order of total production in million tonnes. The visualization uses a monotone curve to connect data points, with each point represented by a colored dot that reveals exact production values on hover. The chart is rendered as an SVG using D3 v7, employing `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` with `d3.curveMonotoneX`. Data is loaded asynchronously from a CSV file using `d3.csv` with `d3.autoType`.

Kkonudulamanisha@gmail.com
73% match
Loading thumbnail…

ICE7_AreaChart_CropProduction_Manisha

This area chart visualizes crop production (in million tonnes) across countries, sorted from highest to lowest producers. The visualization combines a smooth blue area fill with a line overlay and labeled dots to highlight individual data points. Built with D3.js v7, it uses `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shapes, while `d3.scaleLinear` and `d3.scaleBand` handle the axes. Data is loaded from a CSV file via `d3.csv`, with grid lines and rotated country labels for readability.

Kkonudulamanisha@gmail.com
71% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes crop production in India, showing relationships between variables like cultivated area, production, yield, and year, with data points colored by season. Built with a custom `scatterPlot` component using `scaleLinear`, `axisLeft`, and `axisBottom`, the chart automatically rotates the x-axis variable every three seconds using `setInterval`, updating titles and re-rendering the SVG. The code loads CSV data via `d3.csv` and uses the `select` API for DOM manipulation, with animations driven by re-calling the plot function.

MMahesh
71% match
Loading thumbnail…

MOULI ICE-6

This example uses D3.js v6 to render a responsive scatter plot of product data loaded from a CSV file, showing Price on the x-axis and Product_ID on the y-axis. It highlights how individual products are distributed across price levels, with each circle colored by its category using a categorical color scale. The visualization employs an ordinal band scale for the y-axis and a linear scale for the x-axis, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Circle positions are computed from the parsed data and rendered as SVG elements, with the chart filling the full browser window.

Ddmouli369@gmail.com
71% match