Skip to main content
SimilarExport ZIP
100%

activity6-task-3

✓ Published0🌍 Public
Rrajeswariamruthabommaraju@my.unt.edu
Last edited Oct 24, 2024
Created on Oct 24, 2024
Forked from Hello VizHub

This example visualizes the relationship between employee experience and salary in a scatter plot. Each circle represents an employee, with the x-axis showing years of experience and the y-axis displaying salary, while the circle’s fill color encodes the number of projects handled using a sequential blue scale. It uses D3 v6 to load CSV data from a GitHub repository and render SVG elements with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleSequential` for color mapping.

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_Task_4

This example presents an interactive bubble chart showing the relationship between salary and experience, with bubble size encoding age and color distinguishing employee status (Stayed or Left). It loads CSV data from a GitHub repository and uses D3 v6 scales (scaleLinear, scaleOrdinal) to map attributes. The visualization renders as SVG, with axes, gridlines, and a legend constructed via d3.axisBottom, d3.axisLeft, and appended circle elements.

Ssuhaibuddinahmed10@gmail.com
86% match
Loading thumbnail…

Scatter plot using d3.js

This scatter plot visualizes the relationship between years of experience and salary, with each circle representing a data point from a CSV file loaded via d3.csv. The example uses d3.scaleLinear to map the data to x and y axes, with axis labels for both variables. Circles are appended to an SVG container with a fixed radius of 5 pixels and a teal fill, positioned using the scales. Axes are rendered with d3.axisBottom and d3.axisLeft, and the visualization uses d3.v6 in a simple HTML page.

Yyvarshachowdary@gmail.com
84% match
Loading thumbnail…

Activity6_Question3

A scatter plot displays employee math scores against age, with each circle colored by department (Finance, HR, Engineering, Marketing, Sales, IT). The visualization uses D3 v7 with SVG rendering, loading CSV data from a GitHub repository via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color mapping, `d3.axisBottom` and `d3.axisLeft` for ticks, and a manually constructed legend with circles and text.

SSai Praveen Lokavarapu
84% match
Loading thumbnail…

Creating Scatter plot using D3.js

This example shows a scatter plot of age against salary, where each dot represents an individual data point from a CSV file. The code uses D3.js v6 to load and parse the data, then applies `d3.scaleLinear` to map the values. Axes are generated with `d3.axisBottom` and `d3.axisLeft` for the x- and y-axes, respectively, and circles are appended to an SVG container. The data comes from a remote CSV hosted on GitHub, and the plot is styled with a green fill and labeled axes.

Yyvarshachowdary@gmail.com
80% match
Loading thumbnail…

Activity_6_Question 3

This interactive scatter plot visualizes the relationship between age and salary across genders in an income dataset. Each circle represents a person, colored by gender (green for male, yellow for female, red for other), with hover tooltips showing detailed records. The visualization uses d3.csv to load external data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for ticks. SVG circles and event listeners handle mouseover interactions, while the tooltip div transitions opacity to display information. The plot includes labeled axes for salary and age, rendered with custom axis label styling.

HHarsha vardhan reddy Yarmareddy
80% match
Loading thumbnail…

Activity6-Question4

This bubble chart displays sales information for a group of employees, plotting profit against revenue while using circle size to encode product quantity and color to distinguish employee names. It loads data from a CSV file and renders with D3 v7 in SVG, featuring interactive tooltips on mouseover that show each employee's name. The visualization includes a size legend for quantity and a color legend for employees, with colors generated via `d3.interpolateTurbo` and scales built using `d3.scaleLinear` and `d3.scaleOrdinal`.

LLayaMyadam@my.unt.edu
80% match
Loading thumbnail…

chapter 7

This example visualizes six data points mapping salary to friend count using a scatterplot. D3.js v5 creates the SVG circles and axes. It uses `scaleLinear`, `extent`, `axisBottom` with negative tick sizes, and `axisRight` for the y-axis. An empty group element renders the x-axis, while the y-axis appears without an explicit transform. The circles are positioned using the scales from the hardcoded array of salary and friend values.

EEmmanuel Chukwujindu
80% match
Loading thumbnail…

activity 6 Task 2

This example shows the distribution of employee salaries across six departments, broken into five income brackets from "below 50k" to "above 85k." A stacked bar chart displays each department’s proportional share per bracket, with a tooltip revealing the exact percentage on hover. The code uses d3.stack() to aggregate the data from a CSV file and d3.scaleBand and d3.scaleLinear for axes, with d3.axisLeft and d3.axisBottom for ticks. Custom colors, a legend, and interactive opacity changes on mouse events enhance readability.

Aa9.hemraj@gmail.com
79% match