arjandhakal

@arjandhakal·7 public vizzes

Fork of Stylized Line Chart

This example visualizes weekly temperature data from San Francisco using a stylized line chart. The SVG rendering leverages React components for axes and marks, with D3 v5 scales (scaleTime, scaleLinear) and the curveNatural interpolation to create smooth lines. Data loads via d3.csv from a remote GitHub gist. The minimal design uses Poppins typography and muted colors, with axes rendered using custom d3 tick generation and grid lines.

Sep 21, 2021

Loading thumbnail…

Fork of Working with Time

A scatter plot displays temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a data point, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to handle scales and ticks. SVG circles render the marks, while `csv` loads and parses the data, and `useState`/`useEffect` manage the asynchronous data loading.

Sep 21, 2021

Loading thumbnail…

Loading Data in React & D3

This example demonstrates how to load CSV data asynchronously and display its summary statistics in a React application. Using D3’s `csv` function, it fetches a named-colors dataset from a GitHub gist, then formats a text-based report showing file size in kilobytes, row count, and column count via `d3.csvFormat` and the `message` utility. The interface toggles between a “Loading” state and the computed metrics. React manages the component’s lifecycle with `useEffect` and `useState`, while `ReactDOM.render` mounts the app.

Sep 2, 2021

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates how to parse CSV data using D3's built-in parsing utilities, displaying basic file statistics in a text container. It loads a remote CSV file containing CSS named colors via `d3.csv()` and then calculates the formatted data size in kilobytes, the total row count, and the number of columns using `d3.csvFormat()` and the data’s `columns` property. The result is rendered as plain text into a `<pre>` element. The code also includes commented-out alternatives using `fetch()` with `d3.csvParse()` for async/await workflows.

Sep 1, 2021

Loading thumbnail…

Mouse Followers

A single brown circle with a black outline follows the mouse cursor across a 960 by 500 pixel SVG canvas. The circle's center position updates on every mouse movement event via React's `useState` hook and `onMouseMove` handler. The example demonstrates interactive state management, using React and ReactDOM to render the SVG element, while D3 is loaded but not directly used in the visualization logic.

Sep 1, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows the initial step of a data pipeline: loading and parsing a CSV file from a remote URL. It fetches the text of a CSS named colors dataset using the Fetch API and logs the raw CSV content to the browser console via d3.v7, without any visualization yet. The code uses `fetch` with an asynchronous `async`/`await` pattern to retrieve the text, and React is included in the environment alongside a reusable `BackgroundCircle` component that draws a brown circle with a black stroke, though the component is not invoked in the current script.

Aug 31, 2021

Loading thumbnail…

Smiley Face

This example draws a smiling face, centered within an SVG canvas, using a brown background circle, two black eyes, and a curved mouth. The face is built from modular React components, with the mouth generated using D3's `arc` function to create a path with specified radii and angles. The entire composition is positioned and translated using SVG groups, with key dimensions like eye offset and mouth radius passed as props to control the final appearance.

Aug 31, 2021