Skip to main content
SimilarExport ZIP
100%

ICE-6 (Part-2)

✓ Published1🌍 Public
Ppavankrishna441@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024
Forked from Pavan ICE-5

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.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-6)

Part-2 SCATTER PLOT

  • Pavan Krishna Yarlagadda (11600263)
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 (Part-1)

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.

Ppavankrishna441@gmail.com
89% match
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
86% match
Loading thumbnail…

ICE-6 Part 2

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.

Aav.dj.2000@gmail.com
82% 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
82% 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
80% 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
79% 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
79% 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
77% match