kartheekgurijala2023@gmail.com

Kartheek_ICE8

Kartheek_ICE8_Networkgraph

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.

Area Chart

This area chart visualizes the top 10 companies with the highest layoff counts, using a smooth curve to show the relative magnitude of workforce reductions. The chart employs D3 v5’s `area()` generator with `curveBasis` to create a filled, flowing shape beneath the line, while `scaleBand` and `scaleLinear` position companies along the x-axis and counts along the y-axis. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes labeled axes and a title, with styling defined in an external stylesheet.

Line Chart

This line chart visualizes the top 10 companies by number of laid-off employees, using the count on the y-axis and company names along the x-axis. The data is sourced from a CSV file and rendered as a smooth, curved line via D3’s `line` generator with `curveBasis`. Axes are built with `scaleLinear` and `axisBottom`/`axisLeft`, while tick labels show company names. The chart includes a title, axis labels, and a grid created by tick lines, with the SVG rendered at 960 by 500 pixels.

Line_Chart

This line chart visualizes one week of temperature in degrees Celsius for San Francisco, using data from the Data Canvas - Sense Your City project. The visualization shows temperature fluctuations across the seven-day period, with the y-axis representing temperature values and the x-axis representing time. The chart is rendered as an SVG using D3 v5, with the line path styled as a solid blue stroke. The code employs d3.scaleTime and d3.scaleLinear for axes and d3.line to generate the path, while the accompanying stylesheet defines the line's appearance.

Line Chart

This line chart visualizes the number of laid-off employees for various companies, with the data loaded from a CSV file. It uses D3’s `scaleBand` and `scaleLinear` for positioning, along with `axisLeft` and `axisBottom` to render axes. The line is drawn with `d3.line` and `curveBasis` to create smooth curves. The chart includes labeled axes, rotated tick labels for the x-axis, and a title, all within a responsive SVG container.

Pie Chart

This pie chart displays the distribution of company layoffs, ranking the top 10 companies by laid-off count in a circular layout with labeled segments and a legend. It uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG paths and color-coded segments, while loading data from a CSV via d3.csv. The visualization includes percentage-like tick labels formatted with d3.format and renders text labels directly on the arcs.

Simple Scatter Plot

This simple scatter plot visualizes the top 20 companies by layoff count from a dataset of layoffs, with each circle representing a company's total laid-off employees. The chart uses D3 v5 within a React component to load and parse CSV data, sorting and filtering to the 20 highest counts. The x-axis uses a linear scale for layoff numbers, while the y-axis employs a band scale for company names, with circles centered within each band. Rendering as SVG, the visualization includes labeled axes and was built using React hooks like `useState` and `useEffect`.

Bar Chart

This bar chart displays the top 10 companies with the highest number of laid-off employees, sourced from a CSV file. It uses React for component management and D3 v5 for rendering an SVG with scaleBand and scaleLinear axes. The bars are colored with a blue gradient based on index, and the data is sorted in descending order to emphasize the largest layoffs.

Kartheek_ICT5

This example visualizes tech industry layoffs using D3 v7 to load and parse CSV data from a gist. The page displays two static SVG illustrations: one of an office building with sad-faced employees to represent company layoffs, and another of a crying face with tear drops to symbolize employee distress. The visualization is accompanied by text explaining that the data was loaded and parsed using D3's `csv` function, and it summarizes the dataset size. The design uses simple, hand-crafted SVG shapes with a muted color palette of grays, white, and black, accented with blue tears, to emotionally convey the impact of layoffs in the tech sector. The project emphasizes data loading and parsing techniques using D3 v7 within a React framework.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a web page. It uses the D3.js library’s `d3.csv` method to fetch and parse the data asynchronously, then formats the result with `d3.csvFormat` to calculate the byte size. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and a nested promise chain, illustrating different approaches to handling asynchronous data loading. The data source is a CSV file containing CSS named colors, hosted as a GitHub gist.