Skip to main content
Log in
N

neetusingla12(Neetu Singla)

@neetusingla12·12 public vizzes

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes changes in fruit consumption over time, with each bar segment representing a fruit type and its height corresponding to the value. The visualization uses d3.layout.stack to layer the data, d3.time.scale for the ordinal x-axis, and d3.svg.axis for labeled axes. Hovering over a segment displays a tooltip with the exact value via mouseover and mousemove events. A legend identifies the four fruit categories. The chart is built with SVG, using d3.v3, and applies Bostock's margin convention for layout.

Oct 14, 2020
Loading thumbnail…

Simple Bar chart Police station vs fatilities

This example shows a simple bar chart comparing the total number of fatalities across nine police stations in the Ropar district, using data loaded from a CSV file. The visualization encodes the count for each station as the height of an SVG rectangle, with police station names on the x-axis and the fatality count on the y-axis. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes. The bars are styled with a steelblue fill.

Oct 14, 2020
Loading thumbnail…

Simple Bar chart Police station vs fatilities

This example shows a simple bar chart comparing the total number of fatalities across nine police stations in the Ropar district, using data loaded from a CSV file. The visualization encodes the count for each station as the height of an SVG rectangle, with police station names on the x-axis and the fatality count on the y-axis. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes. The bars are styled with a steelblue fill.

Oct 14, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The React-based visualization renders horizontal bars with SVG rectangles, using d3.scaleBand for the categorical country axis and d3.scaleLinear for the population values. D3's format function converts large numbers to abbreviated labels, while custom axis components draw tick marks and text. A tooltip, implemented with SVG `<title>` elements, shows the precise population on hover. The chart uses a clean Poppins font and a teal color scheme against muted gray axes.

Oct 12, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The React-based visualization renders horizontal bars with SVG rectangles, using d3.scaleBand for the categorical country axis and d3.scaleLinear for the population values. D3's format function converts large numbers to abbreviated labels, while custom axis components draw tick marks and text. A tooltip, implemented with SVG `<title>` elements, shows the precise population on hover. The chart uses a clean Poppins font and a teal color scheme against muted gray axes.

Oct 12, 2020
Loading thumbnail…

Simple Bar Chart

This simple bar chart displays the count of values associated with six named categories, with each bar’s height proportional to its numeric value. The visualization uses D3.js v5, loading data from a CSV file via `d3.csv` and rendering SVG rectangles appended to a prepared SVG container. The code sets bar positions and dimensions using linear calculations based on each data point’s index and value, with no axes or labels present. The chart is static, with fixed width and height attributes defining the viewBox.

Oct 12, 2020
Loading thumbnail…

Simple Bar Chart

This simple bar chart displays the count of values associated with six named categories, with each bar’s height proportional to its numeric value. The visualization uses D3.js v5, loading data from a CSV file via `d3.csv` and rendering SVG rectangles appended to a prepared SVG container. The code sets bar positions and dimensions using linear calculations based on each data point’s index and value, with no axes or labels present. The chart is static, with fixed width and height attributes defining the viewBox.

Oct 12, 2020
Loading thumbnail…

Area Chart

This area chart visualizes temperature readings in San Francisco over time, with a smooth curve tracing the data points. The chart uses D3 v5’s `area()` generator with `curveBasis` to fill the space beneath the line, while `scaleTime` and `scaleLinear` map the timestamp and temperature values. Axes are rendered with `axisBottom` and `axisLeft`, and the data is loaded from a CSV file hosted on VizHub.

Oct 12, 2020
Loading thumbnail…

Multi Line Chart

This multi-line chart displays three data series (A, B, C) over a two-week period in July–August 2019, plotting daily measurement values. Each series is rendered as a distinct colored path with different dash patterns, accompanied by end-of-line labels. The visualization uses D3 v5 with an SVG viewBox for responsive scaling, d3.scaleTime and d3.scaleLinear for axes, d3.line with default curve interpolation for paths, and d3.axisLeft/axisBottom for gridlines. Data comes from an inline CSV file.

Oct 12, 2020
Loading thumbnail…

Fatal Police Shootings Bar Menu

This visualization presents a stacked bar chart of fatal police shootings in the United States, with the X axis showing the victim's race and the bars color-coded by the victim's "flee" status at the time of the incident. The chart uses a count aggregation to display the total number of fatalities per race, with each segment representing a different flight behavior. Built with React and the Vega-Lite API, it loads data from the Washington Post's Fatal Police Shootings database via d3.csv, while the chart is rendered using vega and vega-tooltip for interactive details. The appearance is customized through a Vega-Lite config that adjusts font sizes and axis colors for readability.

Oct 12, 2020
Loading thumbnail…

Fatal Police Shootings Bar Menu

This interactive visualization presents fatal police shooting counts from the Washington Post database, using a stacked bar chart where each bar represents a racial category and each segment is color-coded by the victim’s flee status. Built with React, it leverages the vega-lite API (vl) to define the bar mark and encodings, while D3’s csv loader fetches the remote dataset. The chart renders as a full-window SVG via Vega, with tooltip support handled by vega-tooltip.

Oct 12, 2020
Loading thumbnail…

Making an Interactive Pie Chart

A donut chart displays income categories with a tooltip showing percentage on hover. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` functions to load income data and render SVG paths. Labels are positioned using the `labelArc.centroid` method, while tooltips appear via mouseover events and are hidden on mouseout, with interaction handling for both slices and the tooltip itself.

Oct 11, 2020