Setting Attribute Values from Data

100%

Setting Attribute Values from Data

✓ Published0🌍 Public

Last edited May 4, 2015

Created on May 4, 2015

This example shows a horizontal bar chart of HPV vaccination rates for males across U.S. states and territories, with bars sorted in descending order of the male3doses value. The visualization uses D3 v3 to load a CSV file, sort the data, and render SVG rectangles whose widths encode the numeric attribute from each row. The code specifically applies the `d3.csv` method for data loading, `d3.descending` for sorting, and `.attr("width", ...)` to bind the data value to the bar length. The chart height is fixed, and bars are spaced vertically every 10 pixels.

AI-generated description

Similar vizzes

Loading thumbnail…

Loading HPV Vaccination Data

This example loads a CSV file of HPV vaccination rates by U.S. state and locality, displaying the raw data in the browser console. The visualization shows female and male three-dose vaccination percentages as separate columns for each geographic entry. Using D3.js version 3, the code calls `d3.csv` to fetch and parse the local `hpvvaccinations.csv` file, then logs the resulting array of objects to the console. The data originates from a gist by Cindy Jones-Hulfachor. No chart or visual encoding is rendered; the example solely demonstrates the initial data-loading and inspection step.

CCindyJonesHulfachor

78% match

Loading thumbnail…

Bar Chart Using CDC Data Describing Height for Males vs. Females

This bar chart visualizes CDC data on height by gender, showing the distribution of heights for males versus females using horizontal bars. The chart is rendered with D3 v7’s `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for tick marks, and SVG rectangles for the bars. Data is loaded from a CSV file using `d3.csv` and processed to numeric values. The visualization uses a simple steelblue fill and a fixed margin layout.

RRidhima Saxena

76% match

Loading thumbnail…

Setting Attribute Values from Data

This example demonstrates how to bind CSV data to rectangles in an SVG bar chart, where each bar’s length reflects a numeric value. It uses D3 v3’s `d3.csv` to load the Chicago FDIC dataset, then applies `.data()`, `.enter()`, and `.append("rect")` to create bars. The `width` attribute is set dynamically from the `TotalLoanstoIndividuals` field, while `y` positions are computed by index. The visualization shows a simple horizontal bar chart rendered with SVG, using white space between bars for clarity.

AAbechtel

74% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of male population totals for ten countries, sorted by descending value using a linear scale for bar width and a band scale for country positioning. The SVG renderer uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from `TotalPop.csv` and draw axes and rectangles. Bars are styled with steel blue fills, and margins are applied via a transformed group element.

Rrix007

73% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of male population estimates for ten countries, ordered by descending value. The visualization encodes population numbers as bar lengths and country names along the vertical axis using an SVG rendering. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning and sizing, and d3.axisLeft and d3.axisBottom to draw the axes. Steel-blue rectangles represent the bars, with a 110-pixel left margin accommodating country labels.

SSorin Neculae

73% match

Loading thumbnail…

Cindy's chart

A scatterplot displays state-level HPV vaccination coverage among U.S. youth, comparing the percentage of females who received three doses against that of males, with each dot representing a state or local area. The chart encodes the female vaccination rate on the x-axis and the male rate on the y-axis, revealing a general positive association between the two. Built with D3 v3, the visualization uses `d3.scale.linear` for axes, SVG `circle` elements for data points, and native `title` tooltips to show exact values on hover. Data comes from the 2013 National Immunization Survey, filtered to include only entries with both male and female values.

CCindyJonesHulfachor

73% match

Loading thumbnail…

A Bar Chart

A bar chart displays U.S. state populations from a CSV file, sorted descending by value, with white value labels at the end of each steel-blue bar and axis ticks along the top and left. It uses D3 v3 to load and parse the data, then builds scales with `d3.scale.linear` and `d3.scale.ordinal`, rendering SVG elements via `append` and styling with CSS classes. The `d3.svg.axis` component draws the ordinal left axis and linear top axis, while `d3.format` formats the numeric labels.

Mmbostock

73% match

Loading thumbnail…

Sortable Table with Bars

This example displays demographic data for U.S. states as a sortable HTML table, where each age-bracket column is rendered as a horizontal bar chart. Clicking a column header re-sorts the table rows by the proportion of the population in that age range, with bar lengths proportional to that share. The visualization uses D3 v3 to load the CSV data with `d3.csv`, then builds the table structure with `d3.select`, `selectAll`, and `.data`, appending SVG elements to each cell. The bars are drawn as `rect` elements whose widths are calculated from the percentage values, with hover styling applied via CSS.

Mmbostock

72% match