Darpan313

@Darpan313·3 public vizzes

Bar chart

A bar chart displays the populations of ten countries, from China at the top down to Mexico, with each bar’s length proportional to its value in thousands. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, respectively, while rendering SVG rectangles via manual selection and `append`. Axes are generated with `axisLeft` and `axisBottom`, and the data is loaded asynchronously from a CSV file using `csv`. The chart is embedded in a React-compatible HTML page with D3’s minimal API.

Jan 21, 2020

Loading thumbnail…

Let's make face!

A smiling face rendered in SVG, constructed from basic geometric shapes using React and D3 v5. The visualization features a yellow circle head, black-outlined eyes, a curved mouth path drawn with `d3.arc()`, and rectangular eyebrows that animate in a repeating vertical bounce via chained `transition().duration(2000)` calls. The face is centered using SVG transforms, with all components positioned relative to the viewport, showcasing D3's declarative selection and animation APIs alongside React’s component framework.

Jan 19, 2020

Loading thumbnail…

HTML Cars report

This example showcases basic SVG shapes rendered on an HTML page, demonstrating circles, rectangles, lines, and paths with different fill colors, strokes, and transforms. The visualization uses React as the framework, with SVG markup embedded directly in the HTML structure. Styling is applied through a CSS file, including a custom class for line elements, while the SVG elements are organized within grouped `<g>` tags to illustrate positioning and transformation. The code references the v3 data source and offers a bare-minimum HTML approach, with no interactive or data-driven behavior beyond static shape rendering.

Jan 15, 2020