Y

YohR

@YohR·16 public vizzes

Loading thumbnail…

Scatter plot color viz

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements across three flower species. Dropdown menus dynamically select which quantitative attributes appear on the x and y axes, while color encodes species. Hovering over a color legend entry dims other points to highlight the selected species. The visualization uses React with d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and custom React components for axes, marks, and the legend, rendering as SVG.

Loading thumbnail…

Scatter with menu viz

A scatterplot of the Iris dataset displays measurements of sepal and petal dimensions. A dropdown menu above the chart lets the user select which two attributes to plot on the X and Y axes, updating the scatterplot and axis labels accordingly. Built with React and D3 v5, the visualization uses `d3.scaleLinear`, `d3.extent`, and `d3.csv` to load and scale the data, with SVG circles rendered via React components.

Loading thumbnail…

Working with menu

This example demonstrates a simple dropdown menu for selecting an option from a list, using React state to track the chosen value and update the UI accordingly. The app renders a labeled `<select>` element via a reusable `Dropdown` component, which maps an array of four options into `<option>` elements. It uses React hooks (`useState`) to manage the selected value and D3 v5 for DOM manipulation, though no visualization is drawn—the focus is purely on interactive menu controls within a React framework.

Loading thumbnail…

World Map viz

This visualization displays the world’s landmasses in teal on a light gray natural Earth projection, with white borders separating countries. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and render SVG paths from TopoJSON data loaded from the world-atlas package. The `topojson.feature` and `topojson.mesh` APIs extract land polygons and country boundaries, while distinct CSS classes style the sphere, land, and interior strokes.

Loading thumbnail…

Line Chart viz

This line chart shows temperature readings over a week, with each point marked by a small circle and connected by a smooth natural curve. The visualization is rendered as an SVG using React components, with D3 scales (scaleTime and scaleLinear) mapping data to positions. The data is loaded from a CSV file using d3.csv, with axes created by custom Axis components that generate tick marks and labels. Time formatting uses d3.timeFormat to display weekday abbreviations on the bottom axis.

Loading thumbnail…

Scatter Plot viz

This scatter plot visualizes the relationship between petal length and sepal length in the Iris flower dataset, with each flower represented as a semi-transparent teal circle. The visualization uses React for component structure and d3.js v5 for data loading, scaling, and axis generation, with d3.scaleLinear mapping the data domains to pixel coordinates. SVG rendering handles the circles and styled tick marks, while the data is loaded asynchronously from a CSV file via d3.csv.

Loading thumbnail…

Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars using React and D3 v5. The chart lacks axes, displaying only labeled bars with lengths proportional to each country’s 2020 population estimate. Data comes from the United Nations World Population Prospects 2019 CSV file, loaded via `d3.csv`. The code uses `d3.scaleBand` for vertical positioning, `d3.scaleLinear` for bar widths, and renders SVG elements within a React component using hooks.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using horizontal bars with rounded corners. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom React components render the axes and marks. Population data comes from the UN World Population Prospects 2019 CSV, formatted with `d3.format`. The bars are colored teal and include native SVG tooltips showing the country and population value, with axes styled using grey gridlines and labels.

Loading thumbnail…

Refactored Bar Chart

This example shows a bar chart of the top 10 most populous countries, with values plotted along a linear scale and country names on an ordinal axis. The visualization is rendered as SVG on a white background, using React for component structure and D3.js (v5) for scales and data loading. The data is fetched from the United Nations World Population Prospects 2019 CSV via D3’s `csv` helper, then sliced to the first ten entries. The chart is divided into four React components—axes and marks—each taking scales and dimensions as props, demonstrating a modular, refactored approach to building D3 visualizations within a React framework.

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load and summarize a CSV dataset within a React application using D3. It fetches a remote file of CSS named colors and displays a brief textual report of its size in kilobytes, row count, and column count. The code uses React’s `useEffect` and `useState` hooks to trigger the asynchronous `d3.csv` request, then formats the result with `d3.csvFormat` and a custom `message` module. The output appears as large, plain text in a `<pre>` element while the data is loading.

Loading thumbnail…

Loading and parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying a summary of the data’s key metrics: size in kilobytes, row count, and column count, rendered inside an HTML `<pre>` element. The code fetches a remote CSV containing CSS named colors via `d3.csv`, which parses the file into an array of objects. Using the parsed result, it calls `d3.csvFormat` to compute the formatted string length, and accesses the `data.length` and `data.columns.length` properties. The page relies on a large font size for the output message, making the stats highly visible.

Loading thumbnail…

Mouse Follower

A blue circle tracks the mouse cursor across a 960 by 500 SVG canvas. The circle follows the pointer's exact coordinates, which are captured from the `clientX` and `clientY` properties of the mouse-move event. Built with React and ReactDOM, the example uses the `useState` hook to store the cursor position and the `useCallback` hook to handle the `onMouseMove` event on the SVG element. The rendered SVG outputs a single circle whose center coordinates update dynamically with each mouse movement.

Loading thumbnail…

Smiley Face Part V

The example displays a grid of eighteen randomly parameterized smiley faces, each rendered as a separate SVG group. The code builds each face from React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which compose circles and an arc path. It uses d3’s arc generator to shape the mouth and d3’s range function to create the six-by-three array of faces. Random values for stroke width, eye radius, and mouth width make every face unique.

Loading thumbnail…

Fork of Smiley Face Part III

This example uses React and D3 v7 to render a stylized smiley face as an SVG graphic. The yellow circle, black-outlined face, eyes, and curved mouth are all drawn using SVG primitives, with the mouth path generated by D3’s `arc` generator using specified inner and outer radii and angular ranges. The `ReactDOM.render` method mounts the component, demonstrating a straightforward integration of D3’s geometry utilities within a React rendering pipeline.

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as SVG circles uses React components to position a large circle for the face, two smaller circles for the eyes, and relies on ReactDOM to mount the visualization into the DOM. The code defines geometric constants for the face radius, eye radius, and offsets, then applies a black stroke to the outer circle with a fill color. This example demonstrates declarative SVG rendering through React's component model, where all shapes are computed from proportional relationships derived from the smiley radius.

Loading thumbnail…

Smiley Face Part I

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the face and two smaller black circles for the eyes. The graphic is encoded directly in the HTML file using SVG elements with attributes for position, radius, fill, and stroke. The page relies on raw SVG markup, with CSS setting body margin and overflow, and a minimal JavaScript script tag that contains no code. The rendering approach is immediate, with no external libraries or data source involved.