daojunL

@daojunL·18 public vizzes

Total Subscriber of Each Subject

This bar chart displays the total number of subscribers for each Udemy course subject, highlighting one selected subject in red. A dropdown menu allows users to choose which subject to emphasize, such as Business Finance or Web Development. The visualization uses React components, D3 v5 scales (scaleBand and scaleLinear), and SVG rendering. Data is loaded from a CSV file using d3.csv, aggregated with d3.nest and d3.sum, and formatted with d3.format.

Nov 4, 2020

Loading thumbnail…

Total Subscriber of Each Subject

A horizontal bar chart displays the total number of Udemy course subscribers aggregated by subject, highlighting Web Development as the most popular. The visualization uses React with D3 v5, employing `d3.nest()` and `d3.sum()` to roll up subscriber counts from a CSV dataset, with an SVG rendered via D3’s `scaleBand` and `scaleLinear` mappings, axes, and tooltips.

Nov 4, 2020

Loading thumbnail…

Scatter Plot with Color Legend

This example shows a scatter plot of Udemy courses, mapping the number of subscribers along both axes while coloring each point by course subject. The visualization includes a categorical color legend on the right, with circles using d3.scaleOrdinal for color mapping and d3.scaleLinear for positioning. The React components render SVG elements, with axes built from custom AxisBottom and AxisLeft components, and the data is loaded via d3.csv from a GitHub gist. A hover handler on the legend logs the selected subject value.

Nov 3, 2020

Loading thumbnail…

City of China

This visualization displays a hierarchical tree of Chinese provinces and cities, with Beijing, Shanghai, Hongkong, and several regional groupings as top-level nodes. Leaf nodes such as Guangzhou and Shenzhen are shown with uniform values. The graph uses D3 v5’s `d3.hierarchy` and `d3.tree` to compute node positions, while `d3.linkHorizontal` generates Bézier curves for the links. Nodes are rendered as white circles with blue strokes, and labels are placed beside each circle in an SVG canvas.

Nov 2, 2020

Loading thumbnail…

Course Number of Each Subject

This bar chart shows the number of courses for each subject in a Udemy course dataset. The visualization uses a horizontal bar layout, with subjects listed along the y-axis and course counts along the x-axis. The code aggregates the raw CSV data using d3.nest() and rollup to count entries by subject, then renders the bars as SVG rectangles with React components. It leverages d3.scaleBand and d3.scaleLinear for positioning, and uses d3.format for axis tick labels.

Oct 15, 2020

Loading thumbnail…

Scatter Plot with Color Legend for Udemy Courses

This scatter plot visualizes Udemy courses, showing the relationship between course price (x-axis) and the number of subscribers (y-axis). Each circle represents a course, colored by its subject category via a color legend on the right. The visualization uses React with D3 v5 to render an SVG, employing `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for the categorical color mapping, and `d3.format` for axis tick labels. Data is loaded from a CSV file using `d3.csv`.

Oct 15, 2020

Loading thumbnail…

Scatter Plot with Color Legend

This example visualizes the classic Iris Dataset, plotting petal length against sepal width to reveal species clusters. The visualization is built with React and D3 v5, rendering as an SVG. It uses `scaleLinear` for the x and y axes and `scaleOrdinal` with a custom color range to encode the three iris species. A color legend, composed of circles and text, displays the species categories. Tooltips are provided via SVG `<title>` elements, showing the numeric value of petal length for each data point.

Oct 14, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes Spotify track attributes, letting users explore relationships between features like energy, danceability, and liveness. Two dropdown menus control which attribute appears on each axis, and hovering reveals precise tooltip values. Built with React and D3 v5, the SVG chart uses `scaleLinear` for axes, custom `AxisBottom` and `AxisLeft` components for ticks, and updates scales and marks dynamically when menu selections change. Data loads from a TSV file via D3's `tsv` loader.

Oct 8, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

Oct 8, 2020

Loading thumbnail…

Radial Gradient

This example demonstrates a radial gradient by rendering a single circle filled with a smooth transition from gold at its center to red at its edge. The SVG markup defines the gradient using a `radialGradient` element with two `stop` points, and applies it to the circle via the `fill` attribute referencing the gradient’s ID. The circle is positioned with a center at (5,5) and a radius of 5 within a 10×10 viewBox, rendering as a 960×300 SVG.

Sep 30, 2020

Loading thumbnail…

Vega-Lite API Template for Spotify Music Attributes

This scatterplot visualizes Spotify music attributes, plotting liveness scores against a binary target variable to examine their correlation. The visualization uses the Vega-Lite API within a D3 v5 framework, loading data from a TSV file hosted on GitHub. The chart encodes the target attribute on the x-axis, liveness on the y-axis, and track names as tooltips. Data comes from the Spotify Music Attributes dataset on Kaggle, with appearance customization handled through a shared config object that adjusts font sizes and axis styling.

Sep 25, 2020

Loading thumbnail…

Vega-Lite API Template for Udemy Course

This visualization shows the relationship between course publication date and subscriber count for Udemy courses, revealing that publication timing has little correlation with subscription numbers. The scatterplot uses Vega-Lite API through d3.v5, with data loaded from a CSV via d3.csv. The visualization applies configurable styling and tooltips via vega-tooltip, with points sized and opacity-adjusted to show density at overlapping coordinates. Both axes use zero-disabled scales for clearer distribution analysis.

Sep 24, 2020

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between country and year using a bar chart, where each bar’s length encodes the year value, sorted in descending order. It processes data from a TSV file, calculating a burglary-per-capita metric and filtering out low values before rendering. The visualization is built with the Vega-Lite API, using `vl.markBar` and `vl.y().fieldQ` for encoding, while D3’s `tsv` loader fetches the dataset. A custom configuration adjusts axis fonts and colors for readability.

Sep 24, 2020

Loading thumbnail…

React Starter

A large, yellow smiling face fills the browser window, rendered entirely as SVG elements from React components. The face is built from circles for the head and eyes, lines for the mouth, and paths for the nose and lips, with all geometry computed from window dimensions. The example demonstrates how to structure a React application with ReactDOM for rendering interactive SVG graphics, using JSX to define the visual hierarchy without any external data or animation libraries.

Sep 24, 2020

Loading thumbnail…

Obesity Among Adults

This example demonstrates how to load and inspect a dataset on adult obesity rates by country, displaying basic statistics about the data file. The visualization presents three key metrics: the file size in kilobytes, the number of rows, and the number of columns. Using D3.js version 5.11, the code loads a TSV file from a remote URL via `d3.tsv`, formats the data with `d3.tsvFormat`, and calculates the byte length of the formatted string. The resulting information appears in a large `<pre>` element. The dataset originates from Kaggle, covering obesity rates from 1975 to 2016.

Sep 24, 2020

Loading thumbnail…

Udemy Courses Information

This example summarizes the contents of a Udemy courses dataset by displaying the file size, row count, and column count in large text. It loads a CSV file from a GitHub gist using `d3.csv` and formats the raw data with `d3.tsvFormat` to compute the kilobyte size. The visualization explicitly demonstrates both the primary `d3.csv` approach and commented-out alternatives using `fetch` with async/await and nested promises. The dataset originates from Kaggle and covers four course subjects.

Sep 24, 2020

Loading thumbnail…

The most subscribed course

This visualization shows the top 10 most subscribed Udemy courses using horizontal bars, with course titles on the y-axis and subscriber counts on the x-axis. The chart uses React components (AxisBottom, AxisLeft, Marks) and D3 v5 scales including scaleBand and scaleLinear, with data loaded via d3.csv from a GitHub gist. The SvG rendering includes a formatting function that converts large numbers to abbreviated units, and each bar displays a tooltip showing the exact subscriber count. The visualization highlights that business finance courses are the most popular among subscribers.

Sep 22, 2020

Loading thumbnail…

Spotify Music Attributes

This example loads a Spotify dataset of 2017 songs and displays basic file metadata in a large-text overlay. It uses `d3.tsv` to fetch and parse the tab-separated data, then reports the approximate file size in kilobytes, the total number of rows (songs), and the column count. The visualization also demonstrates an alternative async/await fetch method with `d3.csvParse`, though the primary path relies on `d3.tsv` and promise-based loading. Each song includes a binary label indicating whether the author liked it.

Sep 11, 2020