Skip to main content
SimilarExport ZIP
100%

Fajardo_ICE_6_Scatter

✓ Published0🌍 Public
RRobFaj
Last edited Apr 3, 2023
Created on Mar 22, 2023

This scatter plot shows the relationship between the number of companies and total employed individuals across quarters, with points colored by quarter using red, blue, or black markers. The visualization uses d3.csv to load employment data from a GitHub gist, d3.scaleLinear and d3.extent for scaling axes, and d3.axisLeft and d3.axisBottom for rendering the SVG chart. The code applies d3.selectAll and join to create circles, with axis labels rotated and styled via CSS.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6_Fajardo_Bars

This bar chart displays the number of employed STEM workers in the U.S. per quarter during 2022, using horizontally oriented bars. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for the axes and bar widths. It loads CSV data from a GitHub gist, truncates it to 12 rows, and renders SVG rectangles alongside custom tick marks. Red vertical gridlines and axis labels are drawn manually, with the chart embedded in a fixed 960×500 SVG canvas.

RRobFaj
80% match
Loading thumbnail…

ICE-7_Pie_Fajardo

This pie chart visualizes STEM employment counts by sector, displaying the top 10 sectors with the highest employment numbers. Each sector is represented as a colored slice with a corresponding legend that lists the sector label and its employment value. The visualization uses D3 v5 within a React framework, employing d3.pie, d3.arc, and d3.scaleOrdinal APIs to generate the SVG chart. Data is loaded from a CSV file hosted on GitHub Gist, and mouseovers log sector employment values to the console.

RRobFaj
77% match
Loading thumbnail…

Company Data Scatter Plot

This scatter plot visualizes company data, showing the relationship between the number of employees and revenue, with the market value encoded by the size and color of each circle. The visualization uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleSqrt`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft`. Data is loaded from a remote CSV file, rendered as SVG circles on a linear scale for both axes, with a square-root scale determining the circle radius. The plot uses colorful circles colored via `d3.scaleOrdinal` with the `d3.schemeCategory10` palette.

Bbogasamudramvamsikrishnareddy
74% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Llibramanju
72% match
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the size of companies before and after layoffs, using randomized positions for each data point to distribute them across the screen. Built with reusable D3 modules, the chart relies on `scaleLinear` to map values, `axisBottom` and `axisLeft` for the axes, and a data-join pattern to render SVG circles. The code loads CSV data via `d3.csv` and applies a custom scatter plot function, with the current example using random x and y coordinates to illustrate the reusable component’s flexibility.

Kkartheekgurijala2023@gmail.com
72% match
Loading thumbnail…

ICE - 7

This interactive scatter plot animates through different attributes of a college dataset, cycling the x-axis among Unemployment_rate, Employed_full_time_year_round, Unemployed, and Employed every 1.9 seconds while the y-axis remains fixed on Employed. Each point represents a major category, colored distinctly by its category, with a reusable scatterPlot module built on D3's scaleLinear, axisLeft, and axisBottom. The SVG visualization, rendered on a wheat background, uses the Share Tech font and updates labels dynamically to reflect the current x-axis metric.

HHarishma Nallala
72% match
Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot, built with D3 v7, visualizes employee data from a CSV file using a pie chart, with slice sizes proportional to the number of projects each employee worked on. The code uses `d3.csv` to load data and transform it into name-value pairs, `d3.pie()` to compute arc angles, and `d3.arc()` to generate SVG path geometries. A categorical color scale from `d3.scaleOrdinal` with `d3.schemeCategory10` fills the slices, and text labels appear at arc centroids, while an SVG legend maps colors to employee names and project counts.

Rr79162810@gmail.com
71% match
Loading thumbnail…

ICE 7 Employment of STEM workers by Quarter_RobFaj

This line chart visualizes quarterly STEM employment data from a CSV file, plotting the number of employees against quarters in 2022. An orange smoothed line shows the trend, with labeled axes for both dimensions. The code uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `line`, `curveBasis`, `axisLeft`, and `axisBottom` to generate an SVG chart. Data is loaded asynchronously via `csv()` from a GitHub gist, and the chart includes gridlines, axis labels, and a title.

RRobFaj
71% match