Skip to main content
SimilarExport ZIP
100%

ICE-6_Fajardo_Bars

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

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.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fajardo_ICE_6_Scatter

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.

RRobFaj
80% match
Loading thumbnail…

ICE - 6 Bar Graph

The visualization displays a bar chart comparing the population of U.S. states, sourced from a CSV file. It uses React with D3 v5 to render SVG bars, where each bar’s height and color vary by population value. The code employs `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` to generate the scales, and formats population values by stripping commas.

MM
80% 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
79% match
Loading thumbnail…

ICE-6

This bar chart displays the ages of the first fifteen employees from a company dataset, with each row labeled by full name and bar length proportional to age. Built with React and D3 v5, it uses `d3.csv` to load remote CSV data, `d3.scaleBand` and `d3.scaleLinear` for axes, and renders an SVG with `rect` elements for bars. Grid lines and tick labels are generated via `d3.ticks`, while the layout follows a margin convention in a `VizContainer` component.

Ggeethanjalikotaru
79% match
Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571
79% match
Loading thumbnail…

ICE_6

This horizontal bar chart displays population estimates for a subset of US states using React and D3 v5. The visualization maps state names to the y-axis and population values to scaled bar widths on the x-axis. Population data is loaded from a CSV file via `d3.csv`, parsed with `parseInt`, and sliced to 11 records. The chart uses `d3.scaleBand` for categorical y-positions and `d3.scaleLinear` for quantitative scaling, with SVG `rect` marks for bars and manual axis tick rendering via `xScale.ticks()`.

Cchilukuritagore1427@gmail.com
78% match
Loading thumbnail…

ICE-6 Data

This example displays a bar chart of salary hikes for the top 20 countries, with each bar’s length proportional to a population value from a CSV file. The visualization uses React to manage state and render the SVG, while D3 v5’s `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions handle data parsing, scaling, and layout. Green rectangles represent the bars, with blue gridlines and tick labels generated manually from the scales. The data is fetched from a GitHub-hosted CSV via a raw URL.

Aarcothanmukha
77% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

A bar chart displays the 2022 population data for the top three students, using horizontal bars to show marks. It loads CSV data from a GitHub gist via `d3.csv`, then renders an SVG with React. The chart uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.axisBottom` and `d3.axisLeft` are omitted, with custom ticks drawn instead. Purple gridlines and labeled axes are included.

Mmanishcheruku
77% match