Skip to main content
Log in
C

Cenz Wong

@cenzwong·8 public vizzes

Loading thumbnail…

Fork of ECharts

This example loads a JSON dataset from a remote URL containing salary information and extracts the “Lower Salary” field from each record for further processing. The visualization uses ECharts 5.3.2 with its stat extension (ecStat) and D3.js v7, which retrieves the data via `d3.json`. The code prepares an ECharts-enabled `<div>` container, though no chart is yet configured, focusing instead on data fetching and console inspection.

May 3, 2022
Loading thumbnail…

ECharts

This example shows a bar chart of sales data for six clothing categories, with a title, tooltip, and legend. The visualization uses the ECharts library, initialized via `echarts.init` and configured through the `setOption` method. It fetches JSON data from a remote GitHub URL using the Fetch API, though the chart currently displays hardcoded values from the option object. The page loads ECharts from a CDN and renders the chart into a fixed-size `<div>` element.

May 3, 2022
Loading thumbnail…

ECharts

This example demonstrates a simple line chart of weekly data using the ECharts library. It renders a smooth curve across seven days of the week with values ranging from 820 to 1330. The visualization is initialized on a fixed-size DOM element via the `echarts.init` method, and the chart configuration specifies a category x-axis and a value y-axis. The code loads ECharts from a CDN and uses the `setOption` API to define the line series, showing how the library handles standard chart rendering with minimal setup.

Mar 23, 2022
Loading thumbnail…

Scatter plot on COVID CFR

This scatter plot visualizes the COVID-19 case fatality rate by plotting total deaths against total cases for each country on the latest recorded date. The chart uses D3 v7 (d3.scaleLinear, d3.axisBottom, d3.axisLeft) to render SVG circles that enlarge on mouseover and display a tooltip with location and death rate via d3.format. Data comes from the Our World in Data JHU GitHub repository, filtered to exclude aggregate regions and rows with missing death values.

Mar 8, 2022
Loading thumbnail…

Scatter plot on COVID CFR

This scatter plot visualizes the COVID-19 case fatality rate by plotting total deaths against total cases for each country on the latest recorded date. The chart uses D3 v7 (d3.scaleLinear, d3.axisBottom, d3.axisLeft) to render SVG circles that enlarge on mouseover and display a tooltip with location and death rate via d3.format. Data comes from the Our World in Data JHU GitHub repository, filtered to exclude aggregate regions and rows with missing death values.

Mar 8, 2022
Loading thumbnail…

Data Visualization - Assignment 1

This example visualizes the distribution of 150,000 randomly generated points using a static heatmap rendered as an SVG. The viewport is divided into a 10 by 10 grid, and each cell’s fill color encodes the density of points within it, using a white-to-blue interpolated color scale via `d3.interpolateRgb`. The code computes per-cell point counts to determine the minimum and maximum densities, then maps those values to the color range. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the grid rectangles are bound to data with `d3.selectAll().data().enter()`.

Mar 1, 2022
Loading thumbnail…

Data Visualization - Assignment 1

This example uses a 10×10 heatmap grid to visualize the density of 150,000 randomly generated points, with each cell colored on a gradient from white to royal blue based on point count. The visualization is rendered as SVG using D3.js v4, employing `d3.interpolateRgb` for color scaling and D3’s data-join to bind grid cells to rectangles. Points are binned into rows and columns via JavaScript math, and the minimum and maximum densities normalize the color scale. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

Feb 24, 2022
Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter demonstrates the minimal setup for rendering text with D3 version 7. It imports the `select` function to target the document body and sets its text content to “Hello D3 version 7”. The page loads the D3 library from unpkg and applies a central layout via CSS. The example shows the simplest use of D3’s selection API, with no data or visual encoding involved.

Feb 21, 2022