divyanshu7073

@divyanshu7073·6 public vizzes

creating a bar chart

This example creates a bar chart from a CSV file listing building names and heights in meters. It loads the data with `d3.csv` and logs it to the console, though it does not yet render bars. The visualization uses an SVG element sized 900 by 600 pixels, selected via `d3.select`, with the D3 v5 library imported from the `d3` module in a React project.

Jan 8, 2020

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a basic bar chart using React and D3.js, displaying the heights of six notable buildings from a CSV data file. The SVG-based visualization renders steelblue rectangles for each bar, with text labels sized at 1.4em. The code initializes by selecting the SVG element from the HTML, then loads the data using D3's `csv` function, which parses the building names and heights. The current implementation focuses on data ingestion and console logging, with the visual encoding already defined in the stylesheet.

Jan 8, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at an extremely large font size. It serves as a minimal demonstration of a static HTML page rendered through the v3 visualization framework in a React environment. The code uses a plain HTML file with inline CSS styling, setting the body’s text alignment to center and font size to 13em, resulting in a single, oversized greeting. No external libraries or data sources are involved, highlighting the simplest possible starting point for embedding a visualization.

Jan 8, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population data for the ten most populous countries, with each bar’s length proportional to population and country labels on the y-axis. The code uses D3 v5 primitives including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG visualization. Population values from the CSV are read as strings, multiplied by 1000, and then mapped to bar widths via a linear scale, while country names are mapped to y-positions using a band scale. The resulting chart is rendered with a minimal React-free setup inside an SVG container.

Jan 8, 2020

Loading thumbnail…

Stylized Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, using a logarithmic-free linear scale to encode population values. The chart is built with React and rendered as SVG, leveraging d3-scale for the band and linear scales, d3-format for tick labels, and d3.csv to load the United Nations World Population Prospects 2019 dataset. It includes axes, a population axis label, and SVG <title> tooltips on each bar. The design uses a clean, stylized aesthetic with the Poppins font.

Jan 8, 2020

Loading thumbnail…

Stylized Bar Chart

This example shows the top 10 most populous countries using horizontal bars, with population values displayed along a bottom axis and country names on the left. The chart uses React components to render SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) mapping data to positions. Population data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The bars are styled with a teal fill, and hovering reveals exact population values through SVG `<title>` tooltips.

Jan 8, 2020