tharanitaran

@tharanitaran·11 public vizzes

Cheap Tricks for Interaction

This example shows a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, where each country is colored green and turns yellow on hover. Users can pan and zoom the entire map via D3’s `zoom` behavior, which applies an SVG transform to a group element. The map data comes from World Atlas TopoJSON (50m), with country names matched from a TSV file and displayed as native SVG `<title>` tooltips. Styling is handled through CSS classes, with the sphere filled in blue.

Sep 18, 2020

Loading thumbnail…

Analyst Job Salaries from Glass Door

This visualization displays the distribution of analyst job salary ranges scraped from Glass Door, using a horizontal bar chart where each bar represents a salary bracket and its length corresponds to the count of job postings. The chart is rendered as an SVG using D3.js v5, with d3.scaleBand for the categorical salary ranges on the y-axis and d3.scaleLinear for the count on the x-axis. The code employs d3.axisLeft and d3.axisBottom for the axes, and the data is loaded from a CSV file using d3.csv.

Sep 18, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays population data for ten countries, with country names on the y-axis and population values on the x-axis, formatted in billions. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for the axes and SVG `<rect>` elements for the bars, each with a native tooltip. The data is loaded from a Google Sheet via `d3.csv`. The chart features a clean, minimal design using the Poppins font and a teal color scheme.

Sep 18, 2020

Loading thumbnail…

Barchart of Stock yields

This horizontal bar chart shows the stock yield, calculated as dividend divided by book value, for 13 companies on the MSE in 2020, sorted in descending order. Built with D3 v6, it uses `scaleLinear` and `scaleBand` for the value and category axes, and `axisBottom` with a percentage format. The SVG rendering includes a grid from the x-axis ticks and labeled axes, with the dataset loaded from a local CSV file.

Sep 18, 2020

Loading thumbnail…

Untitled

A word cloud layout algorithm arranges words of varying font sizes within a bounded space. The browserify.js example generates random words and sizes, then renders them as SVG text elements with rotations and Impact font, centered on a 500×500 canvas. The core d3-cloud library uses a canvas-based sprite collision detection technique via `getImageData` to place words without overlap, employing an Archimedean spiral search pattern and a dispatch event system to signal layout completion.

Sep 6, 2020

Loading thumbnail…

Smily_Face_Part_2

A stylized smiley face rendered as a static SVG, with a large red circle for the head, two black eyes, and a blank area where a mouth will later appear. The face is centered on the screen and fills the entire viewport height. Built with React and ReactDOM, the component uses JSX to construct SVG elements, including circles for the face and eyes, with the eye positions and radii defined as constants. The rendering relies on React’s declarative approach to generate the SVG hierarchy.

Aug 19, 2020

Loading thumbnail…

Smily_Face_Part_1

A large red circle forms the base of a smiley face, with two smaller unfilled black circles positioned as eyes. The SVG circles are drawn using the `circle` element, with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes. The rendering uses static SVG markup within an HTML page, with the main circle centered at (480, 250) and a radius of 245. The eyes are offset horizontally from the center, creating a simple, unfinished facial composition as noted in the README.

Aug 18, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples render in an SVG, and clicking one selects it with a green stroke. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius, mapping fruit types to visual properties. The `FruitBowl` component handles click events via React state, updating the selected fruit’s ID to trigger a re-render.

Aug 11, 2020

Loading thumbnail…

HTML Starter

This example displays a large, centered “Hello HTML” message with basic styling applied through a CSS rule. It demonstrates a minimal HTML page structure that includes a head section, body content, and an inline script. The script logs “Hello JavaScript!” to the browser’s console, showing how to integrate client-side scripting. The page uses plain HTML and CSS without any external libraries, providing a simple starting point for web development.

Aug 5, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the minimal structure required to render an HTML page. It displays a static text element, "Hello HTML," styled with large centered font, and executes a simple JavaScript command that logs a message to the browser’s developer console. The code uses plain HTML, CSS, and inline JavaScript without any external libraries or frameworks. It provides a bare-bones foundation for building a web-based application or visualization from scratch.

Aug 5, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries for 2020, using horizontal bars to compare population sizes. The visualization is built with React and D3 v5, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Each bar renders as an SVG rectangle with a native `<title>` tooltip, while axes are generated using custom `AxisBottom` and `AxisLeft` components. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and formatted with `format('.2s')` to abbreviate values in billions.

Aug 5, 2020