Skip to main content
Log in
J

JunyanL

@JunyanL·28 public vizzes

Loading thumbnail…

Virtual Progress recorder

This interactive tool visualizes task progress using a physical metaphor: marbles move from a left container to a right container as steps are completed. Users set the number of tasks with a numeric input and click a button to advance progress by one marble. The visualization renders two steel-blue rectangles as containers in an SVG, with React managing the component structure and state updates. The interface is built with React and ReactDOM for rendering, while D3.js v5 is included for potential data binding or transitions, though the current implementation relies primarily on React's declarative JSX.

Jul 5, 2020
Loading thumbnail…

Real-time Mongolia Data Table

This example presents a real-time data table visualizing the last five records from a Missing Migrants Global dataset, with columns for reported date, total dead and missing, and location coordinates. The table is built using React, with `TableContent` component managing the display. Using D3 v5, the code loads the CSV data via `d3.csv`, filters the final entries, and appends a text element to the list via a ref and `d3.select`. The static header list is rendered in JSX, while the dynamic data output is logged to the console.

Mar 13, 2020
Loading thumbnail…

world map

An interactive bar chart demonstrates how data updates respond to user controls. Buttons increment values, filter entries below 50, or append random numbers, while D3 transitions animate the bars and tooltips. The React component manages state with hooks, and a custom `useResizeObserver` hook dynamically recalculates scales when the container resizes. The SVG rendering uses `scaleBand` for the x-axis, `scaleLinear` for y and color scales, and `axisBottom`/`axisLeft` to draw axes.

Mar 10, 2020
Loading thumbnail…

Responsive chart

A responsive bar chart built with React and D3 v5 updates its layout and axes to match the container’s dimensions via a custom `useResizeObserver` hook and the `ResizeObserver` API. Three buttons control the data: incrementing each value, filtering out values above 50, and appending random numbers. Bars render as SVG `rect` elements with smooth transitions, while hover tooltips appear as text. Axes are generated using `axisBottom` and `axisLeft`.

Mar 10, 2020
Loading thumbnail…

colored bar chart

A colored bar chart displays a dataset of numeric values as vertical bars, with color mapping from green through orange to red via a `d3.scaleLinear` domain of 0 to 110. React state management allows the user to increment, filter (values ≤ 50), or randomly append data through buttons, triggering `useEffect` updates. The SVG is rendered using `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and D3 v5 axes. Bars animate on transitions, and mouseenter events create tooltips with D3 text elements that fade in.

Mar 6, 2020
Loading thumbnail…

Brush with react(axis)

This example shows a line chart of a small dataset, rendered with React and D3, where the curve updates in response to button clicks that either raise each point’s value or filter the data to those under 50. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.line with curveCardinal to draw a smooth path. The chart is an SVG whose axes and line are re-rendered via a useEffect hook whenever the state changes, with the buttons driving the dataset transformations.

Mar 5, 2020
Loading thumbnail…

Basic brush practice

This example demonstrates interactive brushing on a 400×400 SVG canvas, where a single circle changes color based on whether it falls within the user’s brush selection. The brush updates the circle’s fill to blue when selected and red otherwise, using animated transitions. Built with React and D3 v5, the code leverages `d3.brush`, `d3.select`, and `d3.event.selection` to detect the brushed region and compare its coordinates against the circle’s position. The brush extent is fixed to the full canvas, and the color change triggers on both brush start and end events.

Mar 4, 2020
Loading thumbnail…

Nested Components

Nested Components demonstrates a minimal React application composed of three child components: Navbar, MainContent, and Footer, all rendered inside a parent App component. The code imports React and ReactDOM, using `ReactDOM.render` to mount the App into the `#root` div. Each child component returns simple JSX elements, such as a navigation link, a paragraph with Chinese text, and a footer heading, with styling defined in an external stylesheet. The example illustrates component nesting and basic UI structure without any data fetching or interactive behavior.

Feb 29, 2020
Loading thumbnail…

Multiple scatter plots

Four scatter plots show variations in raw concentration, pressure, air temperature, and wind speed over time, using data from a 2018 CSV file. Each plot renders an SVG via React and d3.v5, using `scaleTime` and `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks. The circles are colored steelblue with hover effects, and a brush/Highlight module supports selecting points, highlighting them pink while dimming others.

Feb 29, 2020
Loading thumbnail…

Multiple scatter plots

Four time-series scatter plots visualize daily measurements of airborne particulate concentration, pressure, air temperature, and wind speed from 2018. The plots use D3 version 5's `scaleTime` for the date axis and `scaleLinear` for the value axis, rendering each day as a circle via SVG. Brushing is implemented with `brushSelection` from D3, which highlights brushed circles in magenta and dims the rest to gray.

Feb 29, 2020
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented by a semi-transparent circle whose radius encodes population size via a square-root scale. The visualization uses React for rendering SVG elements, with d3’s geoNaturalEarth1 projection and geoPath to draw land boundaries, country interiors, graticules, and the sphere. City coordinates are projected from latitude and longitude, while data comes from a CSV sourced from Simplemaps’ World Cities Database, processed through d3.csv. Topology for country boundaries is loaded via d3.json from World Atlas TopoJSON.

Feb 18, 2020
Loading thumbnail…

Test for React

This visualization combines a world map with a temporal histogram to show migration-related fatalities. The map uses D3 geoNaturalEarth1 projection with geoPath to render landmasses and graticules, while scaled circles represent total dead and missing per location. The histogram bins reported dates into monthly intervals using d3.histogram, with a brushX selection filtering the map’s displayed data. React manages state and component rendering, fetching CSV data and TopoJSON world atlas via custom hooks.

Feb 17, 2020
Loading thumbnail…

Mapping components

This example shows how to render a list of jokes from an array of objects using React components. The `App` component maps over the imported `JokeSource` array and passes each item’s `question` and `punchline` as props to the `Joke` component, which conditionally displays the question and adjusts the punchline font size based on whether a question exists. The code uses React’s `map()` method to generate multiple DOM elements dynamically from the static data file.

Feb 16, 2020
Loading thumbnail…

Props in react

This example demonstrates how React components pass data through props, rendering a list of jokes where each joke card displays a question and punchline. The `App` component passes a `bunk` object containing optional `question` and `punchline` fields to three `Joke` components. Using inline styles, the `Joke` component conditionally hides the question heading with `display: none` when no question exists, and changes the punchline background to orange for standalone punchlines. The code uses React’s `useState` implicitly through prop passing, with the `ReactDOM.render` API mounting the app.

Feb 16, 2020
Loading thumbnail…

Props in react

This example demonstrates how React components pass and receive data through props. The App component renders three Contact components, each receiving a `card` object containing image URLs, names, phone numbers, and emails from placeholder kitten images. The Contact component uses destructuring with a default value for the `ashy` property, logging the props object to the console. The code uses React 16.10 with `ReactDOM.render` to mount the component tree in the root element.

Feb 14, 2020
Loading thumbnail…

To-do list

This example shows a simple interactive to-do list titled “To get the Flow going,” presenting three checkbox items that ask about daily habits and ending with a self-affirmation. Built with React, it renders the list as JSX components, using the `useState`-less controlled inputs directly in the markup. The code imports a custom `todoItem` component that returns a list item with a checkbox and label, while the main `App` component composes three instances with hardcoded phrases. Styling is applied via plain CSS, setting a steelblue background and font size on the list container.

Feb 14, 2020
Loading thumbnail…

JSX inline styling

This example demonstrates dynamic inline styling in a React component, displaying the current time of day with conditional colors. The App component computes the hour from a fixed Date object, determines whether it is morning or afternoon, and assigns AM/PM labels. Using JavaScript objects for the style prop, the background color switches between purple and green based on the time. The code highlights React’s JSX syntax, where styles are objects rather than strings, and CSS property names use camelCase. ReactDOM renders the component into the root element, with styling applied through inline objects.

Feb 14, 2020
Loading thumbnail…

JSX inline styling

This example shows how JSX inline styling dynamically changes a headline’s color and background based on the current hour. The React component creates a Date object for March 14, 2020, at 2 PM, determines whether it is morning or afternoon, and applies a green background for morning hours or orange for afternoon. Styling is defined as a JavaScript object with camelCase properties, and the `style` attribute uses double braces to embed the object in JSX. The code imports React and ReactDOM from their production UMD builds served via CDN.

Feb 14, 2020
Loading thumbnail…

Fun with scatter

Two scatterplots compare daily PM2.5 concentrations over time in 2018, with one chart treating the date as a categorical axis and the other as a continuous time axis. Both use the `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, rendered as SVG circles via `d3.select` and `d3.append`. The data comes from `2018.csv`, loaded with `d3.csv`. Axis ticks are generated with `d3.axisLeft` and `d3.axisBottom`, with the PM2.5 axis labeled explicitly.

Feb 11, 2020
Loading thumbnail…

SVG chart

This example shows two parallel bar charts from the v3 dataset, each plotting PM2.5 concentration (Raw.Conc.) over time, with one chart treating dates as ordinal strings and the other as parsed date objects. The visualization uses D3 v5’s SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, plus `axisLeft` and `axisBottom` for tick marks. Data is loaded from the 2018.csv file, and each chart’s rect elements are colored steelblue via CSS, while axis labels and titles are styled with D3 text elements.

Feb 11, 2020
Loading thumbnail…

Interactive fluctuation plot

This interactive fluctuation plot compares air quality measurements across different years and weather variables. Users select a year and two variables via dropdown menus, and Chart.js renders a line chart showing the relationship between the chosen x-axis and y-axis columns. The visualization imports PM2.5 concentration and meteorological data from yearly CSV files (2016–2019) using the Fetch API. The chart displays tooltips that identify the corresponding date and variable values, with both canvas and SVG elements present in the underlying D3.js and p5.js structure.

Feb 4, 2020
Loading thumbnail…

interactive scatter plot

This interactive scatter plot lets users explore air quality data from CSV files for the years 2016 through 2019. Users can select which columns (e.g., Raw.Conc., pressure, air_temp) map to the X and Y axes, as well as the year, via dropdown menus built with a custom `dropdownMenu` module. The visualization uses Chart.js to render the scatter plot on a Canvas element, while D3.js handles the dropdown interface and CSV data loading via `fetch`.

Feb 3, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates D3's general update pattern with special cases for adding, removing, and mutating data. A bowl of fruit animates as apples disappear and one transforms into a lemon, using enter, merge, and exit selections. The code employs d3.scaleOrdinal for color and radius mapping, with SVG circle and text elements positioned via transforms. Animated transitions occur through setTimeout-triggered re-renders.

Jan 15, 2020
Loading thumbnail…

More basics of JS

Rendering five circles in an SVG via a React-started D3 v5 data join, this example demonstrates enter, update, and exit selections over time. It uses `d3.select` to manage the SVG, `d3.range` to generate an array of objects, and `d3.scaleOrdinal` to map domain values like "baseball" and "cube" to fill colors. After two timed `setTimeout` calls, one circle exits with a thick black stroke while another updates its fill from white to dark green.

Jan 15, 2020
Loading thumbnail…

Interactable time table

This interactive visualization combines a world map and timeline chart to explore global migrant deaths. A bubble map uses `d3.geoNaturalEarth1` and `d3.geoPath` to project circles scaled by total dead and missing, with country boundaries and graticules from TopoJSON. A linked date histogram, powered by `d3.brushX` and `d3.bin`, allows brushing to filter the map in real time. The data comes from a CSV of migrant incidents, rendered with React and D3 v5.

Jan 13, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economy category and includes an interactive color legend for filtering. Hovering a legend item highlights matching countries and dims all others, while clicking toggles the selection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths with click-driven state updates.

Jan 11, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while `transition().duration()` animates circle positions when the data mapping changes. The SVG rendering includes axis labels and semi-transparent red circles.

Jan 8, 2020
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying the file size, row count, and column count of the dataset. It uses `d3.csv` to fetch and parse the local `beijing.csv` file, which contains air quality measurements. The parsed data is then processed with `d3.csvFormat` to calculate the size, while `data.length` and `data.columns.length` provide the row and column counts. The result is displayed as large text in a `<pre>` element, highlighting the simplicity of D3’s data-loading API. An alternative approach using `fetch` and `d3.csvParse` is also included as commented code.

Jan 8, 2020