Skip to main content
SimilarExport ZIP
100%

Fork of Circles with D3

✓ Published1🌍 Public
MMonish Galla
Last edited Apr 22, 2024
Created on Apr 19, 2024
Forked from Circles with D3

This visualization presents salary data as a heatmap, using color intensity on a linear scale from light gray to blue to represent salary amounts in US dollars across job titles and company sizes. The SVG chart employs D3 v7 with `scaleBand` for the categorical axes and `scaleLinear` for the color mapping. Hovering over individual rectangles triggers a tooltip displaying the exact salary value, while a legend with axis ticks and color rectangles provides a visual reference for the salary scale.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Circles with D3

This bubble chart visualizes the relationship between salary and employee residence place, with bubble size representing population and color indicating job title. It is rendered as an SVG using D3 v7, employing `d3.scaleLinear` for axes, `d3.scaleSqrt` for radius encoding, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. The chart includes interactive tooltips on circle hover, axis labels, and a categorical legend. Data comes from merged JSON containing salary, population, and job title information.

Ssanjanadadi19@gmail.com
87% match
Loading thumbnail…

PROJECT

This heatmap visualizes salary data across job titles and company sizes, using a blue sequential color scale where darker shades indicate higher salaries in USD. Hovering over any cell displays a tooltip with the exact salary value. Built with D3.js v7, it renders SVG rectangles positioned by scaleBand axes, with a linear color scale and an axis-based legend showing the salary range. The visualization loads data from a merged JSON dataset containing job and salary information.

MMonish Galla
85% match
Loading thumbnail…

Fork of Circles with D3

A fork of circles with D3 shows a static bar chart of billing amounts by customer name, rendered as SVG rectangles. The chart uses D3 v7 scales and axes to map data, with bars colored steelblue that turn brown on hover. The code sets up a linear y-scale and band x-scale, then appends axes and rects to the SVG. The sample data appears truncated, and the visualization relies on `d3.scaleBand` and `d3.scaleLinear` for layout.

SSamir Tarda
81% match
Loading thumbnail…

Salary scatter plot

This scatter plot displays individual member salaries as yellow circles, with a single dark blue circle representing the current user's salary for comparison. The y-axis shows salary amounts in dollars, while the x-axis positions are randomized. When hovering over a circle, it enlarges, changes color, and displays a yellow tooltip with the exact salary value. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for scales, `d3.axisLeft` for the y-axis, and event handlers for mouse interactions, with data sourced from a JSON array.

FFernando Guillen
79% match
Loading thumbnail…

Fork of Circles with D3

A scatter plot maps California housing data from a CSV file, showing longitude and latitude coordinates with circles sized by median house value and colored by median income. The visualization uses D3 v7 to load the data, apply linear scales for axes, a sequential blue interpolator for color, and a square-root scale for circle radius. SVG rendering includes axis labels for both dimensions.

Ddeepanshu123sharma4@gmail.com
79% match
Loading thumbnail…

Fork of chart 2

This interactive scatter plot visualizes the relationship between wage and potential ratings, with each circle representing a data point colored by wage value. The visualization includes hover tooltips displaying exact values, click interactions that enlarge points and show details, and buttons to reset the zoom or filter for potential values above 70. The chart uses D3 v7 with d3.scaleLinear for axes, d3.scaleSequential with the Viridis interpolator for colors, and d3.select transitions for smooth animations. Data loads from a CSV file into SVG circles rendered on a white background.

Ssriharshithaanugu5@gmail.com
79% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes average salaries across different job titles using data from a CSV file loaded via D3.js. It displays the distribution of salaries with vertical bars, where hovering over a bar highlights it in orange and shows a tooltip with the exact salary amount. The visualization uses D3 v6's `scaleBand` and `scaleLinear` for positioning, with axes labeled and rotated for readability. The chart is rendered as an SVG element inside an HTML page, with the data fetched from an external GitHub Gist containing job title and salary pairs.

JJorge Melchor
78% match
Loading thumbnail…

Fork of Fork of A4_Bar-chart

This example displays a bar chart of average salaries by job title, with each bar colored steel blue and highlighted orange on hover. It fetches CSV data from a remote gist using `d3.text`, parses it into job title and salary pairs, and renders the chart as SVG via D3 v6. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and includes a tooltip div that appears on mouseover showing the job title and formatted salary.

Ppavan vasamsetti
78% match