Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Circles with D3

✓ Published0🌍 Public
Ssanjanadadi19@gmail.com
Last edited Apr 25, 2024
Created on Apr 25, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

MMonish Galla
87% match
Loading thumbnail…

Fork of Bubble chart

A bubble chart displays the correlation between the area in square kilometers, GDP in billion USD, and population in millions for major U.S. cities. The visualization uses D3.js v7, rendering SVG circles whose x-position maps population, y-position maps area, and radius encodes GDP. A color scale, derived from the city names via `d3.interpolateTurbo` and `d3.scaleOrdinal`, distinguishes each city, while a tooltip shows the city on hover. The code also includes a legend for bubble size and interactive hover effects.

Aanjalimadhavi98@gmail.com
77% match
Loading thumbnail…

Fork of SVG

This visualization uses a grouped bar chart to compare job title populations between 1980 and 2023. The code loads data from a merged JSON dataset via `d3.json()` and uses `d3.scaleBand()` for the categorical x-axis, `d3.scaleLinear()` for the y-axis, and SVG `<rect>` elements to render the bars. Hovering over a bar triggers an interactive tooltip that shows the job title and population value. The chart is built with the D3 library (v6) and rendered as static SVG with CSS styling for the legend and tooltip.

MMonish Galla
77% match
Loading thumbnail…

Fork of Fork of Simple Bar Chart

This example shows the relationship between employee salary and employee ID as a scatter plot. The visualization encodes salary on the x-axis and employee IDs on the y-axis, with each employee represented by a small circle. The code loads salary data from a CSV file using d3.csv, then creates linear and band scales with d3.scaleLinear and d3.scaleBand to map the data to screen positions. Axes are rendered with d3.axisLeft and d3.axisBottom. The SVG rendering approach is used, with circles appended via d3.selectAll and join.

Hharichandanamone21@gmail.com
77% match
Loading thumbnail…

Fork of Q2 Area chart

This example displays a responsive scatter plot of employee salaries using an SVG-based area chart. It loads salary data from a CSV file and maps employee IDs along the x-axis using d3.scaleBand, with salary values on a linear y-scale via d3.scaleLinear. The chart utilizes d3.area to render a filled steelblue region beneath the salary points, and interactive circles with pointer-events enable tooltips that display employee names on mouseover. Axis labels are rotated for readability, and the visualization updates dynamically with d3 transitions.

Rramsrinivaskatragadda@my.unt.edu
77% match
Loading thumbnail…

Fork of Fork of Circles with D3

This scatter plot displays the relationship between population density and median age for various countries. Circles are colored steelblue and turn orange on hover, with a tooltip revealing the country name and both values. Built with D3.js, the visualization loads data from `mergedata.json` and uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circle elements with mouse event handlers to control tooltip opacity.

MMonish Galla
77% 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
76% match
Loading thumbnail…

Bubble Chart

This bubble chart displays average salary by year for Stamen employees across multiple states, with circle size encoding a rate value and color distinguishing states. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for state colors. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and circles include a title tooltip for data inspection. Data comes from a CSV file loaded via `d3.csv`.

Hhollyjpotter
76% match