everyfin-in

@everyfin-in·5 public vizzes

Fork of Making a Bar Chart

This horizontal bar chart displays the year-over-year compound annual growth rate (CAGR) of IPOs from 2006 to 2020, with positive values shown in steelblue bars. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisBottom` with a custom tick formatter that shortens large numbers. Data comes from a local `data.csv` file, and the SVG rendering includes labeled axes and a title. The chart highlights a notable spike in 2020, reaching a CAGR of 57, compared to earlier years’ mostly single-digit or negative values.

Jan 10, 2021

Loading thumbnail…

Fork of Making a Bar Chart 2

This example visualizes the top 10 most populous countries in 2018 as a horizontal bar chart, using data from the United Nations World Population Prospects. It highlights custom zero-lines and axis labels. The SVG visualization is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` for axes, with tick values formatted to abbreviate billions.

Jan 10, 2021

Loading thumbnail…

bar chart try

This bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Horizontal bars represent each country’s population, with a formatted x-axis showing values in billions. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements rendered via React components. Native SVG `<title>` elements provide tooltips showing exact population values on hover.

Jan 10, 2021

Loading thumbnail…

IPO Data Till date CAGR

A bar chart displays the compound annual growth rate (CAGR) of IPO gains from 2006 to 2020, with 2019 and 2020 showing the largest gains. The visualization uses d3.csv to load the data, then d3.scaleLinear for the x-axis and d3.scaleBand for the yearly categories on the y-axis. Axes are rendered with d3.axisLeft and d3.axisBottom, while rectangles represent each year's percentage gain, with the chart rendered as an SVG.

Jan 6, 2021

Loading thumbnail…

Try

This example demonstrates a minimal setup for loading D3 and local ES6 modules within VizHub. It displays the text "Hello World" in a `<pre>` element by importing a message from a separate `myMessage.js` module. The page uses `import` from `"d3"` via UNPKG and local module syntax, with styling from `styles.css` that centers and enlarges the text. The code targets the element by ID and sets its text content directly.

Jan 3, 2021