halinswaroopch@gmail.com

@halinswaroop·4 public vizzes

Fork of Fork of Fork of ICE5 - chaturya d3.js parsing

This visualization displays car data with two side-by-side SVG charts: a bar chart showing the top 10 cars by price and a bar chart showing fuel type distribution, alongside summary statistics cards. The code uses D3.js v7 (d3.csv, d3.rollup, d3.scaleBand, d3.scaleLinear) to load and parse CSV data from a GitHub gist, then renders the charts with dynamic styling and data-driven bar heights.

Mar 19, 2025

Loading thumbnail…

ICE5

This interactive bar chart displays average retail prices for car brands, with data loaded from a GitHub Gist CSV and rendered as a React component. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) to map brand names and price values, while `axisBottom` and `axisLeft` generate labeled axes with rotated x-axis text. Rounded blue rectangles represent individual prices, with SVG dimensions fixed at 960×500 pixels and margins defined for the chart area. React hooks (`useState`, `useEffect`, `useRef`) manage the asynchronous data loading and axis updates after the dataset arrives.

Mar 19, 2025

Loading thumbnail…

11594097

This example renders a stylized decorated cake using D3. It builds the SVG scene from fixed-position shapes: layered rectangles form the cake tiers, while paths, circles, and ellipses add frosting, sprinkles, cherries, plate, and candles. The code relies on the D3 selection and append API to construct the drawing, with random sprinkle placement and a fixed color palette.

Feb 24, 2025

Loading thumbnail…

11594097

This example displays a stylized, seasonal cake built from layered SVG shapes. Using D3.js version 7, the visualization constructs each cake component programmatically: brown rectangles form the base layers, pink ellipses create frosting, and circles represent sprinkles and decorative elements. A golden candle with an orange flame tops the cake, while random category-colored dots add a festive touch. The scene is drawn with vector graphics on a fixed 500x500 canvas, set against a warm background. The code demonstrates D3's selection API for creating and styling SVG primitives with custom attributes and transformations.

Feb 24, 2025