Bar Chart using d3

100%

Bar Chart using d3

✓ Published0🌍 Public

Last edited Jan 5, 2020

Created on Jan 5, 2020

This bar chart displays the literacy rates of women across Indian states, with horizontal bars ordered by literacy percentage, from Kerala’s high rate to Bihar’s lower rate. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft/axisBottom to render ticks. A transition.attr on rectangle widths animates the bars over two seconds. SVG rendering includes labeled title and axis, with tick lines and custom formatting for rate values.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot displays the literacy rates of women across 16 Indian states, with each circle representing a state and its position along the horizontal axis corresponding to the literacy percentage. The vertical axis lists the state names, using a point scale for categorical placement. The visualization is built with D3 v5, employing `scaleLinear` for the numeric axis and `scalePoint` for the categorical one, alongside `axisBottom` and `axisLeft` for the ticks. Data is loaded from a local CSV file, and the SVG rendering includes styled circles and axis labels.

SSrishti2398

83% match

Loading thumbnail…

Bar chart Graph with D3.js

A horizontal bar chart displays the population of Indian states, with bars sorted by descending values from Uttar Pradesh to Andhra Pradesh. The visualization uses D3.js v7 to load CSV data via `d3.csv` and renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with state labels on the y-axis and population counts on the x-axis. The bars are styled orange with axis labels added as SVG text elements.

DDanthalakirankumar

77% match

Loading thumbnail…

Literacy rate of visualization in Pie Chart

This pie chart displays the literacy rates of Southern Indian states, with each slice representing a state and its corresponding percentage. The visualization uses D3.js (v5) to render the chart as SVG, employing the `pie` and `arc` functions to generate the segments, `scaleOrdinal` for color mapping, and `arcGenerator.centroid` to position state labels. A legend with colored swatches and percentage values accompanies the chart. Data is loaded from a remote CSV file using D3's `csv` method, and formatting of the tick labels is handled with `format`.

Pprachow

74% match

Loading thumbnail…

Bar chart of crime in India

This bar chart displays the total number of rape cases reported across different states in India, with each bar’s height proportional to the case count. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map case numbers to horizontal bar lengths and states to vertical positions, rendering as SVG with semi-transparent red bars. The x-axis is labeled “Total number of rape crime cases in India,” and data comes from a CSV file loaded via `d3.csv` containing crime statistics against women.

LlzlazmSylas

73% match

Loading thumbnail…

Dynamic Bar Chart

This dynamic bar chart visualizes crimes against women in India, showing the number of assault cases for each state in a selected year. A dropdown menu lets users switch between years, while bars transition smoothly to updated values and re-sort in descending order. The visualization uses D3 v7 APIs including `csv`, `rollups`, `scaleLinear`, and `scaleBand`, with `transition` and `easeLinear` for animation. Bars change opacity on hover, and value labels appear at the end of each bar. The dataset comes from a CSV hosted in a GitHub gist.

GGabrielle Nyirjesy

72% match

Loading thumbnail…

Srividya Bargraph

This example visualizes the population of Indian states in 2011 as a bar chart. The chart uses a vertical bar for each state, with the height encoding the population value, and includes labeled axes for states and population. The code utilizes D3 v7’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render the SVG, with bars colored steelblue and a hover effect. Population data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and the chart is displayed alongside an analysis section.

Ssrividyamadas@gmail.com

72% match

Loading thumbnail…

Bar Chart

A horizontal bar chart displays population estimates for ten countries, with bar length encoding each nation’s population value. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering SVG rectangles via `svg.selectAll('rect')`. Data is loaded from a CSV file using `d3.csv`, with population values multiplied by 100 during preprocessing. The chart is fully responsive to the SVG’s width and height attributes, with no axes or labels added.

KKrishu

72% match

Loading thumbnail…

Bar chart

A horizontal bar chart displays the population of ten countries, with bars ordered vertically by country name and extending horizontally to represent each nation's population in millions. The visualization uses CSV data loaded from a file, with population values multiplied by one thousand. Built with D3 v5, the chart employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders SVG rectangles with axes annotated via `axisLeft` and `axisBottom`.

KKrishu

72% match