ujjwalgarad

@ujjwalgarad·5 public vizzes

Scatter Plot

This horizontal bar chart ranks the ten most populous countries, with bars extending proportionally to each nation’s population. The chart uses D3 v6 scales (`scaleLinear` for the x-axis and `scaleBand` for y-axis categories) rendered as SVG rectangles. Axes are customized with D3’s `axisBottom` and `axisLeft`, including a custom tick formatter that abbreviates large numbers (e.g., “1.38B”). Data is loaded from a CSV via `csv()` and parsed with unary plus operators.

Dec 14, 2020

Loading thumbnail…

Customizing Axes

This visualization displays the populations of the ten most populous countries as horizontal bars, demonstrating customized axes in D3 v6 within a React framework. It uses `d3.scaleLinear` and `d3.scaleBand` to position bars, while `d3.axisBottom` and `d3.axisLeft` render the axes. The bottom axis applies a custom tick format via `d3.format` (converting billions to "B"), and both axes have their domain lines and ticks partially removed for a cleaner look. Data comes from an external CSV file loaded with `d3.csv`.

Dec 8, 2020

Loading thumbnail…

Shapes with SVG

This example displays a horizontal bar chart of population data for ten countries, with bars rendered as SVG rectangles. The visualization uses D3 v6 scales (`scaleLinear` for the x-axis and `scaleBand` for the y-axis) to position the bars, and employs `axisLeft` and `axisBottom` to generate the axes. The data is loaded from a CSV file using `d3.csv`, and the values are explicitly converted to numbers before rendering. The chart area is inset with margins and a group translation, with bars styled in a solid steelblue color.

Dec 8, 2020

Loading thumbnail…

Shapes with SVG

A smiling face is rendered as a composition of SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an overlaid arc path for the mouth. The code uses d3.select and d3.arc to position these elements around a central group, translating coordinates dynamically based on the SVG’s width and height. One eyebrow animates downward via a transition on its y-attribute over two seconds, while the other remains fixed.

Dec 4, 2020

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—rendered on a 960-by-500 canvas. The composition uses a scaling transformation and a group with translation, fill, and stroke settings to show how attributes like fill, stroke-width, and stroke-linejoin alter appearance. The shapes are created directly in the markup with coordinates and styling, and the page is styled using a minimal CSS file, all within a React starter project.

Dec 3, 2020