Jusung

@jungjusung·13 public vizzes

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, rendered as an SVG using React and D3 v5. It displays sepal width along the y-axis and a user-selected attribute on the x-axis, chosen via a dropdown menu. The code uses D3’s `scaleLinear`, `extent`, and `format` for axis scaling and tick formatting, with custom `Marks` and axis components. Data is fetched as CSV using `d3.csv`, with styles defined in CSS for axes and labels.

Jan 21, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the Iris Dataset, displaying sepal and petal measurements across four attributes. Users select which variables to plot on the X and Y axes through two dropdown menus, allowing arbitrary pairings of the dataset’s quantitative features. The visualization uses React with `useState` for menu state and D3’s `scaleLinear` for axes, rendered as SVG circles with tooltips showing axis values. The example demonstrates a classic approach to interactive multivariate exploration within a fixed canvas.

Jan 21, 2022

Loading thumbnail…

Menus with React

This example demonstrates a simple pet-selection dropdown menu built with React. It shows how React state manages the currently selected option, with a custom `Dropdown` component that renders a `<select>` element and updates the selection via an `onSelectedValueChange` callback. The code uses React’s `useState` hook, `ReactDOM.render`, and JSX to bind the dropdown’s options from a hardcoded array. The current value is logged to the console on each change, but no further data visualization or external data source is included.

Jan 18, 2022

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, with landmasses filled in teal against a light gray sphere. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render geographic features from World Atlas TopoJSON data, while d3.geoGraticule generates the latitude and longitude grid lines. The React application loads data via d3.json, processes topology with topojson’s feature and mesh functions, and renders the SVG output with distinct styling for land, sphere, interiors, and graticules.

Jan 18, 2022

Loading thumbnail…

Working with Time

A time series visualization plots temperature readings over a week, using an SVG line chart with circular markers for each data point. Built with React and D3 v5, it employs `scaleTime` and `scaleLinear` to map timestamp and temperature values, while `timeFormat` renders abbreviated weekday labels on the x-axis. The chart loads CSV data from a remote URL through `d3.csv` and includes custom axis components that generate gridlines and ticks. Hovering over a circle reveals a native tooltip showing the formatted date.

Jan 10, 2022

Loading thumbnail…

Stylized Bar Color

This example visualizes the top 10 most populous countries using a stylized bar chart, where each bar's width is scaled to population values derived from the United Nations World Population Prospects 2019 dataset. The chart omits traditional axes, instead displaying only a horizontal axis with tick labels and a "Population" axis title. Built with React and D3 v5, it uses `d3.scaleLinear` for the x-axis mapping, `d3.scaleBand` for vertical positioning, and renders marks as SVG `rect` elements via a custom `Marks` component. Data is loaded asynchronously via `d3.csv`.

Jan 5, 2022

Loading thumbnail…

Chart

A horizontal bar chart displays the ten most populous countries for 2020, with country names on the y-axis and population lengths on the x-axis. It loads data from a CSV using d3.csv and renders SVG rect elements scaled by d3.scaleBand and d3.scaleLinear. React manages the component state, updating the visualization once the data arrives.

Dec 29, 2021

Loading thumbnail…

Loading Data with React

A pie chart displays the CSS named color palette, with each slice colored by its corresponding RGB hex value. Built with React and D3, the example loads data from a remote CSV URL using `d3.csv` and manages the asynchronous state with React hooks. The `d3.pie` and `d3.arc` functions generate the paths, which are rendered as SVG elements. While data loads, a large "Loading.." message appears. The chart uses a full-width outer radius and no inner radius, creating a complete circle.

Dec 29, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive performance data by plotting horsepower against country of origin, with vehicle names available as tooltip labels. The code uses the Vega-Lite API to define a circle mark with large size and low opacity, while loading data from a CSV file of auto-mpg statistics using d3.csv. Configuration adjusts axis labels and tick marks for readability, and the visualization renders as a full-window SVG using vega-tooltip for interactive hover details.

Dec 29, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing a CSV file from a remote URL, then displaying summary statistics about the dataset as large text. It uses D3’s `d3.csv` method to fetch and parse the file, then reports the formatted size in kilobytes, the number of rows, and the number of columns. The data comes from a GitHub gist containing CSS named colors. The visualization is minimal, rendering the textual summary in an HTML `<pre>` element styled with a large font size, with no graphical chart involved.

Dec 28, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a minimal React application that loads a dataset of CSS named colors from a remote CSV file and displays its key statistics. The code uses React hooks, specifically `useState` and `useEffect`, to manage asynchronous data loading, while the `csv` function from D3 v5 fetches and parses the file. After loading, a text summary shows the file size in kilobytes, row count, and column count, using `d3.csvFormat` to compute the byte length. During the fetch, a simple "Loading..." placeholder is rendered, highlighting the interplay between React state and D3's data utilities.

Dec 28, 2021

Loading thumbnail…

Fork of Hello HTML

This is a React-based SVG drawing of a smiley face, rendered within a 960 by 500 viewport. The visualization shows a large yellow circle with a thick black stroke, two smaller black circles for eyes, and a D3 arc for a smile. The code imports React and ReactDom for the component structure, and relies on the d3 `arc` API to generate the path for the mouth. All elements are positioned using a central translate transformation.

Dec 28, 2021

Loading thumbnail…

Hello HTML

This example shows a simple smiley face rendered as an SVG using React components. A yellow background circle, two eyes, and an arc-based mouth are positioned using SVG transforms. The mouth is drawn with the D3 `arc()` API, while React functional components `BackgroundCircle`, `Eyes`, and `Mouth` handle the rendering. All geometry is defined by constant dimensions, and the SVG is centered on a 960×500 canvas.

Dec 28, 2021