srividyabachina22

@srividyabachina22·3 public vizzes

ICE-6: Rendering Marks and Channels with React & D3

This example displays the basic monthly cost of Netflix across 15 countries as horizontal bars, using bar length to encode price. It renders SVG marks with React, building scales and axes through D3’s `scaleBand` and `scaleLinear`, and draws tick lines and labels manually via `ticks()`. Data is loaded asynchronously from a CSV URL using D3’s `csv` function. The chart uses blue gridlines and text labels, with margins and dimensions fixed in the code.

Mar 3, 2023

Loading thumbnail…

ICE5

A D3.js animation renders a red smiley face with horns, mustache, beard, and teeth on a light blue background. The face’s eyebrows rotate and shift downward over two seconds using `transition.attr` and `transform` operations. The example demonstrates DOM manipulation and SVG shape generation with `d3.arc`, `d3.line`, and `d3.curveBasis`. It also loads COVID case metadata from a CSV file via `d3.csv`, displaying file size, row count, and column count as text.

Mar 2, 2023

Loading thumbnail…

ICE5

This example displays metadata about a COVID-19 dataset loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count as plain text. The visualization demonstrates loading D3 v5 via UNPKG, using `d3.csv` to fetch and parse the CSV data, and `d3.csvFormat` to calculate the data’s size. It also illustrates importing from local ES6 modules, though the primary output is a simple text-based summary rather than a graphical chart.

Mar 2, 2023