Y

yuting89830@gmail.com

@yuting89830·23 public vizzes

Loading thumbnail…

final 每日發電量

This chart visualizes the daily electricity generation trend over the past week, with each line representing a specific 10-minute interval (from 00:00 to 23:50) and plotting its usage values across the last seven days. The graph uses Chart.js to render a line chart on an HTML5 Canvas, with each time slot assigned a random color. Data is fetched from a remote JSON summary log hosted on GitHub, and the calculation of the trend relies on Moment.js to handle date arithmetic and timestamp conversions. The visualization focuses on comparing how usage at the same minute varies day-to-day.

Loading thumbnail…

Hourly Electricity Usage Trend Chart

This visualization shows hourly electricity usage trends over the past two weeks, with each line representing a specific time of day (e.g., "08:30") plotted across weekdays and labeled like "週一" or "上週一". The line chart is rendered on a Canvas element using Chart.js, which draws multiple randomly colored series to reveal daily consumption patterns. The underlying script fetches JSON data from a GitHub-hosted summary log, then uses moment.js to calculate timestamps and aggregate power usage values for each 10-minute interval. Data is grouped by weekday labels with a custom diffTrend function that distinguishes current-week days from previous-week ones.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense scatter of small, semi-transparent circles floats across a black canvas, overlaid by a large, intricate Buddha path rendered in colorful strokes. The circles are generated via nested React array maps, with random positions and RGB fill values, while the Buddha silhouette is drawn as an SVG path with a thick stroke. The visualization uses React and ReactDOM for rendering, with SVG elements and JavaScript’s `Math.random` to drive the stochastic placement and coloring of the overlapping points.

Loading thumbnail…

summary table

This example displays a summary table of daily power usage and capacity data, with each row representing a date and columns for each measured category, showing values as “used / cap.” The page fetches JSON data from a remote GitHub repository via the `fetch` API and builds the table dynamically using the Document Object Model (DOM) methods `insertRow`, `insertCell`, and `createElement`. The table’s header is generated from the first data entry’s keys, and all table content is rendered entirely through JavaScript on page load. It relies on the browser’s native `window.onload` event and JavaScript’s `response.json()` method.

Loading thumbnail…

Fork of Hourly Electricity Usage Trend Chart

This visualization displays a 14-day trend of hourly electricity usage, with each line representing a specific time of day (e.g., "HH:mm") and showing how usage varies across the recent two weeks. It fetches JSON data from a GitHub repository and processes it with Moment.js to calculate usage differences and label dates as weekday names. The chart is rendered using Chart.js on a Canvas element, with randomly assigned line colors. The y-axis represents electricity generation/usage, while the x-axis categorizes dates by weekday.

Loading thumbnail…

台電即時資訊表

This live-updating table displays real-time power consumption and capacity data for Taiwan's power grid. It presents each timestamped record as a row, with columns for each consumption category, showing values as "used / cap" pairs. The visualization fetches JSON data from a remote GitHub repository using the `fetch` API, then dynamically constructs an HTML table by iterating through the data object. The code uses standard DOM manipulation methods like `insertRow()` and `insertCell()` to build the table structure without external visualization libraries.

Loading thumbnail…

Hourly Electricity Usage Trend

The visualization displays a 14-day hourly electricity usage trend as a grid table, comparing each day’s usage by hour (from 00:00 to 23:50) with color-coded numeric values. It fetches JSON data from a GitHub gist using the Fetch API, then processes timestamps with Moment.js to calculate differences between consecutive readings. The table is dynamically generated via JavaScript’s DOM manipulation, showing weekday labels like “上上” for older days. The data represents total electricity used across multiple categories, rounded to two decimal places.

Loading thumbnail…

D3.js Table Example

This example displays a D3.js-generated HTML table that organizes power plant data from a JSON file, including details such as unit names, capacities, and operational statuses. The code uses d3.json to load the dataset and selects a div container to append the table, with d3.select and .append building both the header row and body rows dynamically. Each cell is populated using the .text or .html methods, allowing for inline markup in the source data. The table presents the raw array structure from the JSON’s aaData field, showing grouped entries by energy type with subtotals and annotations.

Loading thumbnail…

D3.js JSON Table

This example displays a stacked line chart of weekly website traffic across five marketing channels, using ECharts with a canvas renderer. The chart includes a title, axis tooltip, legend, and image-saving toolbox feature. Data is loaded from a JSON file containing detailed power plant operations, but the visualization focuses on the static array of channel values for Monday through Sunday. The code initializes an ECharts instance bound to a DOM container, sets a configuration object with stacked line series, and updates the chart on window resize.

Loading thumbnail…

Untitled

A line chart displays annual total automotive sales in the United States, with the year on the x-axis and sales on the y-axis, titled "各種能源日用量比較." The visualization uses D3.js and C3.js, loading data from a CSV file via `d3.csv` and rendering the chart as an SVG. The axes are labeled "Year" and "Sales," with the sales line drawn in red. The D3 `scaleTime`, `scaleLinear`, and `line` generator construct the plot, while gridlines and tick marks are styled via CSS.

Loading thumbnail…

homework1-IRIS Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, showing relationships between sepal length, sepal width, petal length, and petal width across three flower species. Each line represents a single flower, colored by its species using d3.scaleOrdinal with d3.schemeCategory10. The code builds SVG paths with d3.line, scales each dimension with d3.scaleLinear, and renders axes with d3.axisLeft. A legend is appended as a separate SVG element, listing the three iris classes. The data loads from a CSV file using d3.csv.

Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by source: gas, liquids, solids, cement production, and gas flaring. The chart uses a time-series x-axis and a y-axis labeled in gigatons per year, with each category filled with a distinct color from `d3.schemeDark2`. Built with D3 v4, the visualization leverages `d3.stack` for stacking, `d3.area` for rendering the areas, and the `d3-area-label` library to position white labels within each segment. The data comes from a CSV file of global CO2 emissions.

Loading thumbnail…

hw5-the World University Rankings

This example shows the World University Rankings as a stacked bar chart, with each bar representing a university and segments for teaching, research, citations, industry income, and international outlook. Users can sort the universities by any of these score fields in ascending or descending order using dropdown menus. The visualization uses D3 v6 with the `stack` and `scaleOrdinal` APIs to generate the stacked bars, and renders them as SVG. Data comes from a CSV file containing ranking and score information for over 200 universities.

Loading thumbnail…

Mouseover Example

This example demonstrates a mouseover interaction on a single circle rendered in an SVG. A tooltip appears near the cursor when the circle is hovered, displaying a custom HTML message that includes text and an image, and it disappears when the mouse leaves. The visualization is built with D3.js v6, using `d3.select` to append the SVG and tooltip elements and `.on()` event listeners for `mouseover`, `mousemove`, and `mouseleave` to control tooltip visibility and positioning. The tooltip is styled inline with CSS properties such as `position: absolute` and `visibility: hidden`.

Loading thumbnail…

Fork of Fork of Stacked bar chart of Yelp data: top cities

This stacked bar chart visualizes the distribution of ten food types (e.g., American, Italian, Mexican) across ten cities, excluding Boston, using Yelp data from a CSV file. Each horizontal bar is segmented by food category, with segment lengths proportional to the count of restaurants per cuisine, enabling quick comparison of culinary profiles between cities. The chart is built with D3.js, using `d3.scaleBand` for the city axis, `d3.scaleLinear` for the count axis, and `d3.scaleOrdinal` with a custom color palette for food types. The `d3.stack()` function transforms the data into stacked segments, and interactive tooltips display exact counts on mouseover via `d3.select` and a `toolTip` div. A legend and title annotate the visualization.

Loading thumbnail…

Fork of Stacked Franchise Revenues by Revenue Category

This stacked bar chart visualizes franchise revenue by category across different franchises, using data from TidyTuesday. The visualization, built with d3.js, shows revenue categories as stacked segments within each bar. Interactive highlighting is implemented by hovering over the legend, which fades out other categories while keeping the hovered one prominent. The chart uses d3.legend for the interactive color legend, d3.tip for tooltips on hover, and custom axis formatting that converts the revenue scale to billions.

Loading thumbnail…

Stacked Bar Chart for Universities

This stacked bar chart compares universities by their overall and category-specific scores from a Times Higher Education dataset. The visualization uses d3.scale.ordinal for the y-axis, d3.svg.axis for axes, and d3.legend.color to display a categorical color legend. A dropdown menu lets users re-sort the bars by score type and order, with d3-tip providing hover tooltips showing the university name and total score. The SVG renders through D3 v5 with animated transitions.

Loading thumbnail…

D3 Example

This example shows the population distribution across five countries, broken down by religious affiliation, using a stacked bar chart. The chart is rendered with SVG via the D3.js library, utilizing the `d3.nest` and `d3.layout.stack` APIs to group and stack the data, with `d3.scale.ordinal` and `d3.scale.linear` for the axes. The data is loaded from a CSV file, and the bars are colored using `d3.scale.category10`. The chart uses a custom SI formatter to display large numbers, such as "B" for billions, on the y-axis.

Loading thumbnail…

Stacked Column Chart - Apache ECharts Demo

This stacked column chart from ECharts compares weekly traffic sources, with categories for Direct, Email, and Ad groups stacked, while Search Engine data appears separately with its own stacked sub-sources. The chart uses a category x-axis for days and a value y-axis, with emphasis focus on series selection and a dashed markLine connecting minimum and maximum values. It is built with Apache ECharts 5, initialized on a canvas renderer, and responds to window resize events.

Loading thumbnail…

Brushable Scatter Plot Matrix

A brushable scatter plot matrix displays pairwise relationships among four numeric iris flower measurements, with histograms along the diagonal showing each variable's distribution and points colored by species. The visualization is built using D3 v7, rendering SVG elements via `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.histogram` for binning the diagonal distributions. Each off-diagonal cell encodes two variables as a scatterplot, while the color scale uses `d3.scaleOrdinal` with `d3.schemeCategory10` to distinguish Iris species.

Loading thumbnail…

HW3-Abalone Correlation Matrix

This visualization shows the correlation matrix for the Abalone dataset, split into three separate views by gender (Male, Female, Infant) via a dropdown selector. It displays the pairwise Pearson correlations between eight physical measurements (length, diameter, height, weight variables, and rings). Each cell is colored using a chroma color scale from red through white to steelblue, with values ranging from -1 to the maximum correlation. The tooltip on hover reveals the exact correlation value. Built with D3.js, the code utilizes `jz.arr.correlationMatrix` for calculations and `data2grid.grid` for layout.

Loading thumbnail…

homework1-IRIS Scatter Plots

This interactive scatter plot lets users explore the classic Iris dataset by selecting any two numeric attributes for the x- and y-axes via dropdown menus. Each flower species is color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and an animated transition (`transition().duration(2000).delay(...)`) moves circles from the center to their data positions. The visualization is rendered as SVG, with axes drawn using `d3.axisBottom` and `d3.axisLeft`, and includes a legend showing species names.

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the relationship between two selected features of automobile data, such as horsepower versus weight, using a dataset from VizHub. Users choose the x-axis and y-axis features from dropdown menus, and clicking the "生成结果" button updates the axis labels and title accordingly. The visualization is built with D3 v5, using `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to render the SVG scales and axes. The circles are colored red with 30% opacity, and grid lines are drawn with `tickSize` properties for clarity.