Skip to main content
SimilarExport ZIP
100%

Activity-8_Q3.6

✓ Published0🌍 Public
SSree Yuktha Sunkara
Last edited Apr 14, 2024
Created on Apr 13, 2024
Forked from Activity-6

This example shows a scatter plot of temperature versus humidity, with points shaped according to weather condition (sunny, cloudy, or rainy) and colored accordingly. The visualization loads CSV data via fetch, parses it with `d3.csvParse`, and renders shapes using `d3.symbol` with `symbolsFill` scales. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while a custom legend maps shape scales to weather labels. The code is organized into modular ES6 files, using `d3.scaleLinear` for positioning and `d3.scaleOrdinal` for shape encoding.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_question 3

This example visualizes the relationship between daily mean temperature and humidity, using wind speed to encode point color, in a scatter plot. Daily climate data from a CSV file is represented by circles, with a continuous color gradient that maps wind speed values. The chart includes labeled axes and a color legend for wind speed. The implementation uses D3 v7 functions like `scaleLinear`, `extent`, `scaleSequential`, `interpolateCool`, `axisBottom`, and `axisLeft`, rendering as SVG within the HTML document. A custom color legend is created with a linear gradient and axis ticks.

Ssindhureddykandada@gmail.com
81% match
Loading thumbnail…

Activity 7_Q2

This example displays monthly average temperatures as a smooth area chart, with the area fill and line colored green and each data point labeled with its value in degrees Celsius. It loads CSV data from a GitHub gist and renders an SVG visualization using D3 v5, applying `scaleBand` and `scaleLinear` for the axes, `area` to generate the area path, and `axisBottom`/`axisLeft` for the titled axes. The code uses `select`, `csv`, `max`, and the `join` method to add text labels for peaks and troughs.

Sssuryateja804@gmail.com
80% match
Loading thumbnail…

Activity-9_Question-2

This example shows an area chart of temperature over time, with a filled region beneath a line that maps date to temperature readings. The visualization uses D3 v5 to load a CSV dataset from a gist, parse dates with `d3.timeParse`, and create the chart with `d3.area` and `d3.scaleTime`/`d3.scaleLinear`. It renders to an SVG via a `path` element, styled with a categorical color scheme, and includes labeled x- and y-axes using `d3.axisBottom` and `d3.axisLeft`. The data source is a remote CSV file, and the chart displays the unlabeled series with a single filled area.

Hharipadmavathim2023@gmail.com
78% match
Loading thumbnail…

Fork of Activity6_Task3

This scatter plot visualizes the relationship between average temperature and rainfall across multiple cities, using distinct colors and geometric shapes to differentiate data points by city. The visualization loads city data from a GitHub-hosted CSV file and renders it as an SVG using D3 v7, with linear scales for both axes. It employs `d3.symbol` with ordinal scaling to assign unique shapes to each city, while `d3.scaleOrdinal` with `schemeCategory10` provides color encoding. The chart includes labeled axes, a title, and a legend constructed from repeated symbol paths and text elements.

IILYAS AHMED
78% 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
78% match
Loading thumbnail…

Activity6_Question4_9

This bubble chart visualizes the correlation between temperature, humidity, and precipitation across 29 US cities, with each bubble’s position encoding temperature and humidity while its size and color represent precipitation and city. The visualization includes an SVG scatterplot with axes, tooltips on hover, and legends for both bubble size and city colors. It uses D3 v7 APIs such as `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft`, with data loaded from a local CSV file. Bubble colors are generated using `d3.interpolateTurbo`, and interactive tooltips support mouseover, mousemove, and mouseleave events.

Llikhitha.sarahah01@gmail.com
77% match
Loading thumbnail…

Activity-6-Q3

This scatter plot shows the relationship between mean temperature and humidity in Delhi, with each point colored by humidity category (low, medium, or high). The data comes from the DailyDelhiClimateTest.csv file, and the visualization uses d3.v7 with SVG rendering. The code uses d3.csv to load the data, d3.scaleLinear for the axes, and d3.scaleOrdinal with a custom color range to categorize humidity levels. A legend identifies the three humidity categories.

119n81a0581sunny@gmail.com
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Hharichandanamone21@gmail.com
76% match