alisaipsoc

@alisaipsoc·6 public vizzes

Fork of World Population Area Chart

This area chart visualizes global population growth over time, with a smooth curved path filled in maroon against a clean white background. The x-axis maps years to time, while the y-axis uses a linear scale with tick labels formatted in billions. The code employs d3.area with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft within an SVG. Data comes from a CSV file containing world population figures by year, loaded via d3.csv.

Dec 17, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, rendered as red semi-transparent circles on an SVG canvas. Using D3 v5, the code employs `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines and ticks, and `extent` to compute domains. The data is loaded via `csv` from a remote URL, parsed to numeric values, and then plotted with circle elements.

Dec 17, 2022

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example presents a pie chart of the top 10 countries with the highest air pollution-related deaths in 2020, using data from a CSV hosted in a GitHub gist. The visualization uses D3 v5 to parse the data with `d3.csv`, compute the pie layout with `d3.pie()`, and render SVG paths via `d3.arc()`. A `scaleOrdinal` maps categorical colors to each slice, while `d3.format` abbreviates death counts (e.g., "4.5K") for labels and a legend. The SVG is selected and manipulated directly within a React framework, with styling applied via CSS.

Nov 28, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A fork of an SVG and CSS example shows geometric shapes—circles, rectangles, lines, and a path—arranged in a grid and transformed with a scale. Basic shapes initially appear unfilled or with simple fills, while a translated group applies a light blue fill and black stroke to its children. The custom `.lines` class sets stroke properties on the SVG elements, with the path receiving a distinct dark teal color, rounded joins, and caps. The code uses raw SVG elements and CSS selectors, with no JavaScript libraries, and is rendered directly in the browser.

Nov 10, 2022

Loading thumbnail…

Fork of SVG Animations using CSS transitions1

A single red rectangle with a thick yellow border occupies the center of an SVG canvas. When hovered over, the rectangle smoothly transitions its fill color to green and expands its border width to 100 pixels. The animation is implemented using pure CSS transitions applied to the SVG `<rect>` element, with a 3000-millisecond duration for all property changes. The example demonstrates how CSS properties like `fill` and `stroke-width` can animate SVG shapes without JavaScript.

Oct 5, 2022

Loading thumbnail…

shape

This example demonstrates the basic SVG shape elements available in the browser, including rectangles, circles, ellipses, lines, polylines, polygons, and paths. Each shape is rendered with a transparent fill and a colored stroke of varying width, showing how stroke properties work across different geometric primitives. The code uses inline SVG markup with standard attributes like `cx`, `ry`, `points`, and path commands such as `M`, `Q`, `T`, `C`, and `S`. The visualization is embedded directly in an HTML page with minimal CSS to reset margins and hide overflow.

Sep 28, 2022