manoj5464

@manoj5464·4 public vizzes

Bar Chart

This bar chart displays monthly head counts from January 2013 through February 2014. The visualization uses D3 v5 with an SVG rendering approach, loading data from a CSV file. The code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate axes. The bars are styled with a steelblue fill, and the chart includes a title and axis label. The y-axis gridlines are customized with `tickSize` to extend across the plot area.

Apr 5, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Drawn with SVG through React, the visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the population x-axis, with d3.format to abbreviate tick labels. Each bar includes a native SVG `<title>` tooltip showing the exact population value. The chart incorporates custom React components for axes and marks, styled with the Poppins font and teal-colored bars.

Apr 5, 2020

Loading thumbnail…

D3 Face

A smiling face rendered in SVG animates its mouth and eyelids using D3 transitions. The code draws a yellow circle for the head, positions two eyes, and constructs an arc-based mouth with `d3.arc()`. The mouth transitions between two arc radii over two seconds, while rectangular eyelids move up and down using chained `.transition().duration()` calls. Built with D3 v5 selections, the example demonstrates SVG shape manipulation and timed animations within a React-free HTML page.

Apr 5, 2020

Loading thumbnail…

HTML Visualization Learning

This example demonstrates how to build a visual composition using SVG primitives within a React application, rendering shapes directly in the HTML document. The graphic combines circles, rectangles, lines, and paths arranged in groups with transforms to create an abstract, geometric design. The code uses SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes for styling, while the React framework manages the component structure. The visualization serves as a learning exercise for manipulating SVG coordinates and transformations in a web-based environment.

Apr 4, 2020