ICE-7 (Part-1)

100%

ICE-7 (Part-1)

✓ Published8🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

This reusable scatter plot visualizes the relationship between temperature and humidity from weather data loaded via a CSV file. It uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG chart with steelblue circles that turn orange on hover. Axis labels are appended directly to the tick groups, and margins define the plot area within a 600x400 pixel container styled by external CSS.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-7)

Part-1 REUSABLE SCATTER PLOT

Pavan Krishna Yarlagadda (11600263)

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 (Part-1)

This scatter plot visualizes the relationship between temperature and humidity from a weather dataset. The visualization encodes each data point as a circle, with temperature mapped to the x-axis and humidity to the y-axis. Using D3 v7, the code loads CSV data via `d3.csv`, constructs linear scales with `scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. SVG circles are appended to the plot, with a hover effect that changes their fill color to orange.

Rreddysushma994@gmail.com

91% 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

89% match

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This interactive scatter plot, built with D3.js, visualizes weather data from a CSV file, mapping variables like Visibility, Temperature, and Humidity to the x- and y-axes. The chart is reusable, designed with a modular `scatterPlot` function that configures scales, axes, and circle radii. It animates by cycling through different x-axis variables every two seconds, using `setInterval` to update the plot. The SVG rendering includes clear axis labels and a custom font, drawing from the Iris Dataset for demonstration.

Ttrivikramcheluri@gmail.com

87% match

Loading thumbnail…

ICE7 - Reusable Scatter

This example presents a reusable scatter plot built with D3 that visualizes weather observations from a CSV dataset. The plot maps visibility, temperature, humidity, and wind speed onto x and y axes, with each point rendered as a distinct SVG path shape according to the weather summary. The scatter plot uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and map data values. A `setInterval` function dynamically cycles the x-axis variable every two seconds, demonstrating the chart's reusability. The data loads asynchronously via `d3.csv` and the plot itself is defined as a reusable function following the Towards Reusable Charts pattern.

Ttrivikramcheluri@gmail.com

85% match

Loading thumbnail…

ICE-7 (Part-4) - Area Chart

This interactive area chart displays temperature readings for various cities, with each city’s temperature value encoded as the height of a filled region. The SVG visualization includes rotated city labels on the x-axis and a labeled y-axis for temperature in degrees Celsius. The code fetches weather data from a remote CSV file, parses it with `d3.csvParse`, and uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative variables. Areas are drawn using the `d3.area` generator, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. The chart is styled with a color ordinal scale and a clear gridless presentation.

Ppavankrishna441@gmail.com

84% match

Loading thumbnail…

ICE-7 (Part-2) - Pie Chart

This pie chart displays the distribution of city temperatures across three categories: low (<20°C), medium (20-30°C), and high (>30°C). The code loads CSV data from a remote GitHub gist using `d3.csvParse`, then uses `d3.pie()` and `d3.arc()` to generate SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to segments, while labels and a legend are added via D3 selections. The visualization is rendered entirely in SVG with D3 v7.

Ppavankrishna441@gmail.com

82% match

Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plotsdffxgch

This reusable D3 scatter plot visualizes weather data from a CSV file, mapping visibility, temperature, humidity, and wind speed onto x/y axes. It uses a chainable scatterPlot function with configurable accessors, scales, and margins, rendering SVG shapes that change (square, triangle, circle) based on the Summary column. The plot dynamically cycles through x-axis columns every two seconds, updating the visualization through d3’s scaleLinear, axisLeft, axisBottom, and join operations for seamless redraws.

Aakshitha.rapala@gmail.com

82% match

Loading thumbnail…

ICE-7 (Part-3) - Line Chart

This line chart displays temperature variations across different cities, with each city on the x-axis and temperature values on the y-axis. The visualization uses D3.js v7 to fetch and parse a CSV file from a GitHub gist, then renders an SVG line chart with rotated x-axis labels and a y-axis labeled "Temperature (°C)". The chart applies a linear scale for temperature and a band scale for cities, with a smooth line connecting data points using the d3.line() API. The chart includes a drop shadow and rounded corners, making the visualization visually appealing.

Ppavankrishna441@gmail.com

81% match