Skip to main content
SimilarExport ZIP
100%

Tutorial_task_3.2

✓ Published0🌍 Public
Aamanipeddolla@my.unt.edu
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from 5 Buddhas

This scatter plot visualizes the relationship between production staff’s weekly output, comparing Units/Hour in Week 1 against Week 2. Each point uses a distinct custom shape—triangle, pentagon, hexagon, star, or heart—to encode the staff member’s position, with a legend identifying shape categories. The chart is built with D3 v7 and React, using `scaleLinear` for axes, `scaleOrdinal` for shapes, and `axisBottom`/`axisLeft` for ticks. Data is fetched as a CSV from GitHub and parsed with `csvParse`.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity_6_Task_3_2

This scatter plot visualizes the relationship between hours worked per week and monthly salary, with employee department encoded through symbol shapes. The chart uses d3.v7 scaleLinear for axes scaling, scaleOrdinal with symbolsFill to map categorical department values to distinct marker shapes, and displays a custom shape legend. Data is loaded dynamically from a CSV file hosted on GitHub, parsed with csvParse, and rendered using D3 join patterns for marks and axes.

LLarry Johnson
76% match
Loading thumbnail…

Jaswanth_Assignment7_re-usable Scatter Plot

This reusable D3.js v7 scatter plot visualizes work hours against productivity scores from a personal productivity tracker CSV, using square symbols sized by exercise minutes and colored by screen-time buckets. The chart renders as SVG and demonstrates the factory-pattern component design, with configurable accessors for x, y, radius, and color encoding, plus an optional legend. Interactive tooltips appear on mouseenter to reveal month, work hours, productivity, and screen-time details, while axes, labels, and scales are built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol.

JJaswanthKoorapati@my.unt.edu
73% match
Loading thumbnail…

Working with Time

This example shows a scatter plot of one week of temperature data from a CSV file hosted in a GitHub gist, with time on the x-axis and temperature in degrees on the y-axis. The visualization uses React components to render SVG circles, with d3.scaleTime and d3.scaleLinear for scales, d3.timeFormat for weekday tick labels, and d3.extent for domain calculation. Axes are custom-built using React, and each data point includes a title for hover-based tooltips. Data loading is handled asynchronously via d3.csv within a custom useEffect hook.

RRudy Shayganfar
72% match
Loading thumbnail…

working with time React and D3

A React and D3 scatterplot displays weekly San Francisco temperature readings over time, plotting each timestamp and temperature pair as a pink circle on an SVG canvas. The code uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.timeFormat for weekday labels. Custom React components AxleBottom, AxleLeft, and Marks render ticks and circles, with layout managed through margin calculations and SVG transforms.

Bblackbottt
72% match
Loading thumbnail…

Team Efficiency Scatter Plot

This scatter plot shows the relationship between team efficiency and optimal weekly output, with one circle per team positioned by efficiency on the x-axis and optimal hours per week on the y-axis. The code uses D3 v5 APIs including `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.nest` to group the data by team name. Each circle is colored using a categorical color scale based on the team’s position. Axes include gridlines and labels, while the data comes from a CSV file parsed with `d3.csv`.

HHirsh Gupta
71% match
Loading thumbnail…

Stylized line chart working with Time

This visualization displays temperature readings over the course of a week, plotted as a scatterplot of circular marks. Using React to render SVG elements, the chart employs d3.scaleTime for the horizontal axis, d3.scaleLinear for the vertical axis, and d3.extent to compute the domains from the data. The code uses d3.csv to load the dataset from a GitHub-hosted CSV, and d3.timeFormat to format weekday labels on the bottom axis. Each point includes a tooltip showing its timestamp, with styling applied via the Poppins font and custom axis colors.

WWasanta Pruttisarikorn
71% match
Loading thumbnail…

Working with Time

A scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` to map data domains to pixel coordinates. The `Marks` component renders circles for each data point, while the `AxisBottom` and `AxisLeft` components draw the axes. Data is loaded from a CSV file via D3's `csv` method, with timestamps parsed as `Date` objects and temperatures converted to numbers.

CCodeDuckie99
71% match
Loading thumbnail…

Working with Time

This scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Each orange circle represents a data point, and hovering reveals its exact timestamp and temperature. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` to map the data. SVG elements render the axes, tick marks, and labels, while the data is loaded from a CSV file and parsed with `csvParse`.

EEhtisham UL Hassan
71% match