San

@San0321·9 public vizzes

Fork of Working with Time

A line chart tracks San Francisco temperature readings over one week, with time on the x-axis and degrees on the y-axis. The visualization uses React components to render SVG axes and a d3.line path from the Data Canvas Sense Your City dataset. d3.scaleTime, d3.scaleLinear, and d3.extent handle scaling and domain computation, while d3.timeFormat labels weekdays.

Apr 16, 2023

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with each flower species represented as a circle. Built with React and rendered as SVG, it uses D3's `scaleLinear` for axes and `extent` for domain computation. The code loads data via D3's `csv` function, applies numeric type coercion, and includes axis components with tick formatting using `format('.2s')`. Styling uses the Poppins font with custom colors for marks, axes, and labels.

Apr 15, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

This chart visualizes the top 10 most populous countries using a "pathetic" bar chart—bars extend horizontally from a left baseline without axes or ticks, though gridlines and x-axis labels are drawn. Built in React with D3 v5, it loads UN World Population Prospects 2019 data via `d3.csv`, scales the x-axis with `d3.scaleLinear` and y-axis with `d3.scaleBand`, and renders each bar as an SVG `<rect>`.

Apr 15, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors CSV data, displaying basic statistics about the dataset: its size in kilobytes, row count, and column count. The visualization uses d3.csv to fetch and parse the remote CSV file asynchronously via promises. The code also includes commented alternatives using fetch with async/await and d3.csvParse, highlighting different approaches to handling asynchronous data loading in D3 v5.

Apr 15, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face made of yellow circles fills the browser window, but its eyes follow the pointer in real time. The React app tracks mouse coordinates via the `onMouseMove` event, updating the eye positions through `useState` and `useCallback`. The SVG is rendered with ReactDOM, using hardcoded dimensions from `window.innerWidth` and `window.innerHeight`. The face’s static features—head, stroke, and mouth—are defined as SVG circles, while the dynamic eyes are the only responsive elements.

Apr 15, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG shapes, composed of a circular face, two eyes, and a curved mouth. The face is constructed using React components and D3.js helper functions, with the `arc()` generator creating the mouth’s path. The SVG is centered via a transform, and the code uses ReactDOM to render the visualization into the page.

Apr 15, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face created with SVG shapes. It displays a large yellow circle with a black stroke for the head, plus two smaller black circles for the eyes, positioned symmetrically around the center. The SVG is rendered directly in the browser with explicit pixel coordinates for each element, using no external JavaScript libraries. The face is incomplete, with the mouth missing, as noted in the project’s README. The code sets the SVG width to 960 and height to 500, and uses inline circle elements with fixed cx, cy, and r attributes.

Apr 15, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example draws a full-window yellow smiley face. It uses SVG circles for the head, eyes, and mouth, with the face centered and scaled to the browser viewport. A React app computes the layout by deriving coordinates and radii from `window.innerWidth` and `window.innerHeight`. The project loads the React and ReactDOM libraries and renders the graphic directly into a root `<div>`.

Apr 15, 2023

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal SVG circle rendered inside an HTML page. It uses the raw SVG `<circle>` element with an `r` attribute, centered by default. The code relies on SVG's built-in rendering capabilities without any JavaScript libraries. It shows that a basic visualization can be created with just a few lines of markup, using standard SVG tags directly in the document body. The circle is drawn with no fill or stroke properties, appearing as a simple outline.

Apr 10, 2023