Sanchay

@snlgrglns·7 public vizzes

Area Chart

This area chart visualizes Google's monthly closing stock prices. The D3.js v7 code loads data from a CSV file via UNPKG and uses the `csv()` function to parse it. The visualization employs `scaleTime` and `scaleLinear` for the axes, and the `area()` generator with a `curveBasis` curve to create the smooth, filled area path. The SVG rendering includes styled tick marks, axis labels, and a title, all formatted with `timeFormat` and CSS.

Mar 26, 2022

Loading thumbnail…

ICE-6

This example visualizes COVID-19 vaccination rates across U.S. states as of February 28, 2022, using a horizontal bar chart. The code employs React for component state and rendering, with D3 v5’s `csv` to load data, `scaleBand` for categorical y-positions, and `scaleLinear` for the x-axis. SVG rectangles represent each state’s fully vaccinated population, while axis ticks are generated manually using `xScale.ticks()` and styled with blue gridlines. The visualization updates reactively from the fetched dataset.

Mar 5, 2022

Loading thumbnail…

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

This example visualizes the top 10 most populous countries using a horizontal bar chart. It renders SVG marks with React, using D3’s `scaleBand` and `scaleLinear` to map country names and population values to positions, with axes and tick labels drawn manually. Data is loaded from a CSV via `csv` and parsed with a row function. The code uses React hooks (`useState`, `useEffect`) and D3 utilities like `max` and `format`.

Mar 1, 2022

Loading thumbnail…

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

This example presents a horizontal bar chart of the top 10 most populous countries, using population data from a CSV file. The chart is built with React and D3 v5, rendering SVG elements directly. The code uses `scaleBand` for the categorical country axis and `scaleLinear` for the population values, with axes manually constructed via tick maps. Bars are drawn as `rect` elements within a translated group, with labels for both axes generated from the scales’ domains.

Mar 1, 2022

Loading thumbnail…

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

This bar chart displays the top 10 most populous countries for 2019, sourced from a CSV file loaded via d3.csv. Built with React and D3 v5, the visualization maps country names to a d3.scaleBand y-axis and population values to a d3.scaleLinear x-axis, rendering SVG rectangles for each data mark. Axis ticks and labels are generated manually using React components, while d3.axisBottom and d3.axisLeft are imported but not directly used in the rendered output. The chart updates reactively once the data loads.

Mar 1, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple face using React and SVG, consisting of a yellow circle for the head and two smaller black circles for the eyes. The positioning is computed from the SVG dimensions and offsets defined in the JavaScript. The code is written as a React function component that returns JSX, which is then mounted into the DOM via `ReactDOM.render`. The HTML page loads React and D3 from a CDN, and CSS resets the body margin for a clean canvas.

Feb 17, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a smiley face composed of a yellow circle with black outline, red elliptical eyes, and a curved mouth shape rendered as an SVG. The code uses React to define the SVG structure and D3's arc generator to calculate the mouth path. It builds on a starter template, importing React, ReactDOM, and D3 from CDN, and demonstrates inline JavaScript expressions within JSX curly braces to compute positions and values.

Feb 17, 2022