Skip to main content
Log in
Y

yogichoudhary

@yogichoudhary·7 public vizzes

Loading thumbnail…

Making a bar chart

This dashboard displays survey responses about whether university students have ever consulted a psychiatrist, with counts for each response category. It uses D3.v5’s `csv` loader to read `data.csv` and `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering bars as SVG `<rect>` elements. The chart is titled “Regarding Mental health issue in students” and uses axis generators from D3 v5 (`axisBottom`, `axisLeft`).

Jun 3, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020, with horizontal bars ranked by population. Built with React and D3 v5, it renders as an SVG and reads data from the United Nations World Population Prospects 2019 dataset. The chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and `format('.2s')` to abbreviate large numbers. The Poppins font and teal bar color give the visualization a modern, cohesive aesthetic.

Jun 3, 2020
Loading thumbnail…

Lets draw a bar chart

A horizontal bar chart displays employee salaries as bars animated from zero width to their final values. Data comes from a CSV file listing names and monthly salaries, converted to annual amounts. The visualization uses d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom. SVG rectangles are rendered in React with d3.v5, featuring interactive tooltips that appear on mousemove, highlighting bars via CSS class changes, and entrance transitions using transition().duration(300).

Jun 3, 2020
Loading thumbnail…

Learn D3.js

This example demonstrates fundamental D3.js selection and DOM manipulation techniques within a React starter setup. It uses `d3.select` and `d3.selectAll` to target the `h1` element, changing its text, adding a class attribute, and styling it red. The code also appends a new paragraph to the body via `d3.select('body').append('p')`. Running with D3 v4, the visualization shows how D3 can directly manipulate HTML elements alongside a standard webpage structure.

Jun 2, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020, with horizontal bars ranked by population. Built with React and D3 v5, it renders as an SVG and reads data from the United Nations World Population Prospects 2019 dataset. The chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and `format('.2s')` to abbreviate large numbers. The Poppins font and teal bar color give the visualization a modern, cohesive aesthetic.

Jun 2, 2020
Loading thumbnail…

Stylized Bar Chart

This bar chart visualizes the ten most populous countries using United Nations World Population Prospects 2019 data. The chart uses horizontal bars, with country names on the y-axis and a formatted population scale (in billions) on the x-axis. Built with React and D3 v5, the visualization separates axes and marks into reusable components—`AxisBottom`, `AxisLeft`, and `Marks`—which render SVG elements. The linear scale maps population values, while the band scale handles categorical country labels with built-in padding. Tooltips display the population value when hovering over each bar.

Jun 2, 2020
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, styled with a large 13em font size, to demonstrate the simplest possible web-based visualization setup. It contains no external libraries, relying solely on native HTML elements and CSS within the `index.html` file. The page’s content is static, with no interaction, animation, or data source, serving as a bare-minimum starter template for the Vega platform.

May 31, 2020