Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6: Rendering Marks and Channels

Public visualization

ICE-6: Rendering Marks and Channels

0 stars0🌍 Public
JJustin Roberts
Last edited Mar 9, 2023
Created on Mar 9, 2023
Forked from HTML Starter

This example displays a horizontal bar chart comparing the counts of female and male participants, with the female bar shorter than the male bar. The SVG visualization uses D3 v7’s scaleLinear, scaleBand, axisLeft, and axisBottom to map counts to bar widths and sex labels to bar positions, rendering the marks as SVG rect elements. Data is loaded from a local data.csv file via the d3.csv function, and the chart is drawn with specific margins and a formatted x-axis using the d3.format utility.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed