Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6: Rendering Marks and Channels (Bar Chart)

Public visualization

ICE-6: Rendering Marks and Channels (Bar Chart)

0 stars0🌍 Public
SSharmaAshwini
Last edited Mar 9, 2023
Created on Mar 6, 2023

This bar chart displays population density for 20 countries using SVG rectangles as marks, with country names on the y-axis and density values on the x-axis. It uses React hooks (useState, useEffect) to load and sort CSV data via d3.csv, then applies d3.scaleBand and d3.scaleLinear for axes. The code manually renders tick labels and grid lines without d3.axisBottom or axisLeft, instead using xScale.ticks() and yScale.domain() with text and line elements. Purple vertical grid lines mark each x-axis tick.

AI-generated description

CSCE 5320 ICE-6 HTML page.

Comments

Sign in to join the discussion.

MIT Licensed