rahool001

@rahool001·6 public vizzes

BarChart with Mouse Hover

A bar chart displays population figures for ten countries, with bars animating upward over two seconds when the page loads. Hovering over a bar turns it red with a blue outline and displays a text label showing the country name and its population, formatted using d3.format. The visualization uses d3.scaleBand and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv to load the data from a CSV file.

Jan 10, 2021

Loading thumbnail…

Fork of HTML Starter

This bar chart displays population estimates for ten countries, with each bar colored steel blue by default. Hovering a bar highlights it in red with a blue outline and displays a text label showing the country’s population in billions, using the `format` function from d3. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for ticks, with a custom Indian digit-grouping function in `format-india.js`.

Jan 9, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This horizontal bar chart displays the ten most populous countries for 2020, using data derived from the United Nations World Population Prospects 2019. The visualization leverages React with SVG rendering, employing D3’s `scaleBand`, `scaleLinear`, `max`, and `format` APIs to map countries to bars and population values to lengths. A `csv` loader fetches and processes the dataset, while custom SVG components for axes and marks generate the chart. The Poppins font and specific color styling for ticks and marks create a clean, stylized presentation.

Jan 9, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows move up and down in a looping transition. The code uses d3-selection to append SVG elements and d3-transition to animate the eyebrow group’s transform attribute. An arc generator from d3-shape creates the mouth path. All geometry is defined with hardcoded constants, rendering entirely as SVG.

Jan 9, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates customizing D3 axes, including horizontal grid lines, rotated tick labels, and a custom tick formatter that converts numbers into abbreviated units like “B”. The visualization uses d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft for axes, with SVG rendering.

Jan 9, 2021

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the word “Hello” at a massive 13-em font size, centered on the page. The code uses plain HTML with inline CSS for styling and a small JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. It demonstrates a minimal static page with no external libraries or data sources, relying solely on standard web technologies.

Jan 9, 2021