ICE6_11703795

Last edited Mar 25, 2025

Created on Mar 25, 2025

This example presents two linked charts that analyze a small job dataset. It displays a bar chart showing the count of people in each job role, using a dark green fill that changes to hot pink on hover, and a scatter plot mapping experience against salary, where points transition to orange and enlarge when hovered. The visualization is built with D3 version 6, using its `scaleBand`, `scaleLinear`, `rollup`, and selection methods within an SVG canvas. The code encodes the dataset directly and uses CSS transitions for interactive styling effects.

AI-generated description

MIT Licensed

Similar vizzes

ICE6_11703795_BARGRAPH

This bar chart visualization displays the distribution of job roles across a small dataset, with each bar representing the frequency of a specific role such as Software Engineer or Data Analyst. The chart uses D3 v6's `d3.rollup` to aggregate role counts, then renders bars as SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated category labels. The dark green bars transition to hot pink on hover, while the chart sits on a light coral SVG background within a dark gradient page.

87% match

ICE6_11703795_SCATTER PLOT

This scatter plot visualizes the relationship between years of experience and salary for a small dataset of ten individuals, using a dark-themed, styled web page. It renders data points as dark red circles on a light coral SVG background inside a bordered, rounded container. The visualization employs D3.js v6, using `d3.scaleLinear` for both the x and y axes and `d3.axisBottom` and `d3.axisLeft` to draw the scales. Hovering over a point transitions its fill to orange and increases its radius via CSS.

82% match

ICE6-BarChart

This visualization shows average salaries by employee role as horizontal-free vertical bars, with a color-coded bar for each role and corresponding value labels above them. The data comes from a CSV file hosted in a GitHub gist, and the code uses D3 v7 to load and process the data. The visualization uses `d3.rollups` to compute mean salaries per role, `d3.scaleBand` for the x-axis positioning, `d3.scaleLinear` for the y-axis, and `d3.schemeTableau10` for color encoding. It renders as an SVG with gridlines, rotated x-axis labels, and axis titles, all created via D3's selection and axis APIs.

Bbrodyoneal10@gmail.com

81% match

ICE 6: Bar chart showing salary based on experiences

This bar chart visualizes the relationship between years of experience and annual salary, with each bar's height representing salary and its color intensity mapped from a green color scale. The visualization uses D3 v7 to render SVG elements, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleQuantize` with ColorBrewer's Greens palette for encoding salary values. Data is loaded asynchronously from a CSV file via `d3.csv`, and a color legend is generated using the d3-legend library.

SShreeti Upreti

80% match

ICE5_11703795

This visualization presents a static summary of a professional career dataset, showing key statistics such as file size, row count, and column count alongside contextual information about career roles and salary ranges. The example uses D3 v7 solely to load the library, with the display built entirely through HTML and CSS styling, including a pink container and styled typography. The page presents the dataset overview as a simple, structured text-based dashboard without any interactive or dynamic data-binding features.

ICE6 - Combined bar+line chart

This dashboard visualizes employee salary trends by age using two synchronized SVG charts. The first chart displays multi-series lines for average, minimum, and maximum salaries, while the second combines bars for employee counts with an overlaid line for average salary. Built with D3.js v7, the visualization loads CSV data, groups records by age, and uses `d3.rollups` for aggregation, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. Gridlines and legends are rendered programmatically, with salary values parsed from formatted strings.

Bbrodyoneal10@gmail.com

ICE-6

This example visualizes the relationship between years of experience and salary compensation using a bar chart built with D3 v7. It shows how salary values scale across different experience levels, with the y-axis formatted in dollars and the x-axis displaying experience values. The visualization loads data from a CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to screen coordinates. Bars are rendered as SVG `<rect>` elements, while axes are generated using `d3.axisBottom` and `d3.axisLeft` for clear quantitative comparison.

AArun

ICE-6 Application of Marks and Channels

This interactive bar chart visualizes the salary distribution of the first fifteen records from a CSV dataset, plotting salary amounts against years of experience. The visualization uses orange rectangles as marks, with the horizontal axis encoding salary values through position and length. Built with React and D3.js v5, the application loads data via the `csv` function from a GitHub gist, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The chart includes red gridlines and styled tick labels to enhance readability.

NNavaneeth-Ragi