vipulrohit127@gmail.com

@Vipul-kumar18·7 public vizzes

Fork of Fork of Fork of Fork of Fork of Making a Bar Chart

This bar chart displays the 2018 population estimates for the top 10 most populous countries, sourced from the United Nations World Population Prospects. Using D3 v5, it renders an SVG with horizontal bars sorted by country name, a formatted x-axis that abbreviates large numbers (e.g., "B" for billions), and a custom title. The code applies `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, with data loaded via `d3.csv` and scales configured inside the `render` function.

Jun 1, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Making a Bar Chart

This horizontal bar chart displays the top 10 most populous countries using 2018 United Nations population estimates. The visualization encodes population values as bar lengths along a linear scale, with country names on a band scale. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the SVG rendering. Population figures are formatted in billions using d3.format, with axis grid lines and customized tick labels.

Jun 1, 2024

Loading thumbnail…

Fork of Fork of Fork of Making a Bar Chart

This horizontal bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart features customized axes, including formatted tick labels that convert billions to the appropriate scale. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map population values and country names, respectively. The `axisBottom` and `axisLeft` functions create the axes, while the data is loaded from a CSV file and rendered as SVG rectangles.

Jun 1, 2024

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries based on 2018 United Nations estimates. The D3 v5 code uses `d3.csv`, `scaleLinear`, and `scaleBand` to map population values to horizontal bar lengths and country names to vertical bands. Customized `axisBottom` and `axisLeft` axes include a formatted tick label that converts billions to “B”. The visualization is rendered as an SVG, with bars colored steelblue via CSS.

Jun 1, 2024

Loading thumbnail…

Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes the estimated religious breakdown of the 20 most populous countries in 2010, using data from the Pew Research Center’s Global Religious Landscape. Each horizontal bar represents a country, segmented by religion, with population measured in millions. Hovering over the color legend highlights the corresponding religion across all bars while fading others, implemented via D3’s `scaleOrdinal`, `stack`, `scaleLinear`, and `scaleBand`. The visualization uses D3 selections and custom helper modules for responsive axes and interactive legend behavior.

Jun 1, 2024

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS to show various fill colors, strokes, and line joins. The code uses raw SVG elements within an HTML document, applying transformations like scaling and translation via SVG attributes. CSS classes control stroke properties for the line group, while inline attributes define other visual styles. The visualization is static, with no animation or data binding, serving purely as a reference for SVG syntax and styling techniques.

May 31, 2024

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with temperature in degrees Celsius plotted against time. The visualization uses d3.csv to load the data, then employs d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the axes, with d3.line and curveBasis generating the smoothed path. The SVG rendering includes axis labels and a title, while the data originates from the Data Canvas - Sense Your City project.

May 31, 2024