Nikhil Sharma

@NIk22517·7 public vizzes

Axes with React & D3

This example shows a horizontal bar chart comparing the population of ten countries from a UN 2019 dataset, rendered as SVG via React components. The chart displays country names on the y-axis and population values on the x-axis, with axes and marks built from reusable React components. The code uses D3’s `scaleBand` and `scaleLinear` for positioning, `csv` for data loading, and React’s `useState`/`useEffect` hooks for state management. Axis labels and ticks are generated manually from the scales, while bars are drawn as `<rect>` elements per data row.

Mar 21, 2022

Loading thumbnail…

Fork of Fork of Loading Data with React & D3 in Bar Chart

This example demonstrates a horizontal bar chart that displays population data for ten countries, rendered as SVG elements within a React component. The chart uses D3’s `scaleBand` and `scaleLinear` to position bars and axes, while gridlines and tick labels are generated with `xScale.ticks()`. Data is loaded asynchronously from a CSV file using `d3.csv` and stored in React state via the `useEffect` hook. A separate `message.js` module computes a data summary string included in the display.

Mar 21, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example renders a pie chart of CSS named colors using React and D3 v5. It loads the data asynchronously from a CSV file via `d3.csv` into React state with `useState` and `useEffect`. The visualization computes pie arc paths using `d3.pie()` and `d3.arc()`, filling each slice with its corresponding CSS color value. While loading, a message prop from `message.js` displays the dataset’s size and row count, and the final SVG output fits 960 by 500 pixels.

Mar 21, 2022

Loading thumbnail…

Area Chart

This example displays an area chart depicting temperature variations over time in San Francisco, using data sourced from a CSV file. The visualization employs the Vega-Lite API, registered with Vega and Vega-Tooltip, to render the chart as an SVG. The `markArea` method encodes the timestamp on the x-axis and temperature on the y-axis, with the chart automatically sizing to fit the window. The code customizes the appearance through a configuration object that adjusts axis properties and text styling for improved readability.

Mar 21, 2022

Loading thumbnail…

Line chart

This line chart visualizes temperature data over time, using a line mark to represent temperature values on the y-axis against timestamps on the x-axis. Built with the Vega-Lite API (vl) and D3.js, the example loads CSV data from a remote URL via d3.csv, then renders the chart with configurable axis styling and an SVG renderer. Tooltips are enabled through the Vega tooltip handler, and the visualization auto-fits to the browser window size.

Mar 21, 2022

Loading thumbnail…

Stacked Bars

This stacked bar chart visualizes the top five religions by population across countries, with each bar segmented by religion. The visualization uses the vega-lite-api to define the chart specification and the vega and vega-lite libraries for rendering. Data is loaded asynchronously from a CSV file using d3.csv. The chart displays country on the x-axis, population on the y-axis, and religion for color, with tooltips showing population values. The vega-tooltip library provides interactive hover details, while the config.js file customizes axis and label styling.

Mar 21, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart displays population by country for 2015, using a horizontal layout with country names on the y-axis and population on the x-axis, with tooltips showing exact population values on hover. The visualization uses the Vega-Lite API (`vl.markBar()`, `vl.x().fieldN('country')`, `vl.y().fieldQ('population')`) to declaratively build the specification, which is then rendered via Vega-Lite and Vega. Data is loaded from a CSV file using `d3.csv()` from a GitHub gist, and the chart resizes to fit the browser window using width and height bindings.

Mar 21, 2022