J

jerry70938@gmail.com

@jerry70938·17 public vizzes

Loading thumbnail…

Fork of Taiwan Earthquake

This interactive visualization explores Taiwan earthquake data, showing a map of seismic activity and a linked scatterplot to investigate spatial patterns, correlations between magnitude and depth, and temporal trends. The map uses a Mercator projection via `d3.geoPath` with zoom functionality, while the scatterplot offers selectable axes and color attributes. A tooltip provides additional detail, and the visualization includes a legend for clarity. The code leverages D3 v5, TopoJSON for map shapes, and Turf.js, with data sourced from the Taiwan Geophysical Database Management System.

Loading thumbnail…

Fork of Data Visualization Homework 8: Sankey Diagram

This Sankey diagram visualizes car evaluation data, showing the flow of categorical attributes (buying price, maintenance cost, doors, persons, luggage boot, safety) into the final car acceptability rating. The diagram uses D3.js v5 to render nodes and links as an SVG, where node width represents the value of each category, and link thickness indicates the quantity of cars flowing between categories. The code defines a custom `flowDiagram` module with methods like `nodeWidth`, `nodePadding`, and `layout` to manage the diagram’s geometry, while a cubic Bézier curve function draws the links. The data is loaded from the `car.data` file, which contains comma-separated rows that are parsed into nodes and links.

Loading thumbnail…

Fork of Data Visualization Homework 8: Sankey Diagram

This Sankey diagram visualizes car evaluation results from the car.data dataset, showing how attributes like buying price, maintenance cost, doors, persons, luggage boot, and safety flow into final acceptability ratings. The diagram uses d3.sankey() to compute node positions and link paths, with nodes colored by attribute category and rendered as SVG rectangles. Links are grouped by source-target pairs and their thickness represents the count of cars with that combination. Interactive dragging of nodes is enabled through d3.drag(), allowing users to rearrange the visualization dynamically.

Loading thumbnail…

Fork of 312553048_HW3

This visualization is an interactive Sankey diagram built with D3.js v4 that maps the flow of categorical car attributes (buying price, maintenance cost, doors, persons, luggage boot, safety) from the Car Evaluation dataset. It shows how records transition sequentially through these attribute columns, with node widths representing counts and colored by attribute category. The implementation uses custom D3 Sankey layout functions, the `d3.csvParse` and `d3.text` APIs for data ingestion, and `d3.drag()` for interactive node repositioning. The SVG-based rendering displays attribute titles above each column and uses color scales to differentiate categories.

Loading thumbnail…

HW7

This visualization displays daily average air pollution levels for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) across multiple Seoul monitoring stations using a grid of horizon charts. Each chart encodes the pollutant concentration over time with layered color bands that fold overlapping values into the vertical axis, using D3.js v6 with SVG rendering. The code loads data from a CSV file, parses timestamps with d3.timeParse, groups measurements by date, and computes daily means via d3.mean. It applies d3.scaleTime, d3.scaleLinear, and d3.area to construct the horizon chart, with per-pollutant color scales and axis generation via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Iris_312553048_HW2

A parallel coordinates plot of the Iris dataset shows measurements of sepal length, sepal width, petal length, and petal width as polylines colored by species. Users can drag the vertical axis labels to reorder dimensions and explore correlations. The visualization uses d3.v6 with `scalePoint` and `scaleLinear` for axes, `d3.line` to generate paths, and `d3.drag` for interactive axis repositioning. Data is loaded from a CSV and rendered as SVGs with animated transitions.

Loading thumbnail…

HW6

This visualization shows a ThemeRiver of house property sales in a specific area from 2007 to 2019, with each colored stream representing homes with two, three, four, or five bedrooms. The height of each stream reflects the median sale price (in dollars) for that property type quarterly. The code uses d3.stack with stackOffsetWiggle to create the flowing river layout, d3.area to draw the paths, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for axes and coloring. An interactive tooltip, styled via CSS, reveals the exact price and season when hovering over any stream.

Loading thumbnail…

Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes university ranking data from the Times Higher Education World University Rankings, displaying weighted scores across five categories: Teaching, Research, Citations, Industry Income, and International Outlook. The D3.js v6 code uses `d3.stack()` to compute stacked series and `d3.scaleBand()` for the x-axis, with `d3.axisLeft()` and `d3.axisBottom()` for axes. Hovering over legend circles highlights the corresponding segment by adjusting rectangle opacity via `svg.selectAll()`, while a user interface allows re-sorting bars by different metrics and ascending or descending order.

Loading thumbnail…

Iris_312553048_HW4

This interactive scatter plot matrix visualizes the classic Iris dataset, showing pairwise relationships between sepal length, sepal width, petal length, and petal width. Using D3 v6 with an SVG rendering, the scatter plot matrix uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for coloring the three Iris species, and `d3.brush` for interactive selection. Brushing on any scatter plot highlights that data subset across the entire matrix by dimming unselected circles, and a legend updates to indicate which species are currently included in the selection.

Loading thumbnail…

312553048_HW3

This example shows a correlation matrix for abalone physical measurements, split by sex (Male, Female, or Infant). The upper triangle uses a red-blue color scale to encode correlation strength, while the lower triangle displays the numeric correlation values. A dropdown menu filters the matrix by sex category. The visualization is built with D3 v6, using `scaleBand` for axes, `scaleSequential` with `interpolateRdBu` for colors, and computes Pearson correlations from CSV data parsed with `d3.csvParseRows`.

Loading thumbnail…

Iris_312553048_HW1

This interactive scatterplot visualizes the Iris flower dataset, showing relationships between sepal and petal measurements. Users select which attributes to plot on the x- and y-axes via dropdown menus. Points are colored by species (setosa, versicolor, virginica) with a legend, and they animate into position using D3 transitions on `attr('cx')` and `attr('cy')`. The visualization uses d3.csv for data loading, scaleLinear, axisBottom, axisLeft, and scaleOrdinal for scales and axes.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, with each country plotted along the vertical axis and its population along the horizontal axis. The visualization uses d3.csv to load the data, then d3.scaleLinear and d3.scalePoint to map population and country names to positions. SVG circles represent the data points, with d3.axisBottom and d3.axisLeft generating the axes. The chart applies d3.format to abbreviate population labels and uses a custom tick size to create grid lines.

Loading thumbnail…

Customizing axes

This example demonstrates how to customize a bar chart in D3.js, specifically through the use of D3's `scaleBand` and `scaleLinear` functions. The visualization presents the top 10 most populated countries, with data loaded from a CSV file. The code customizes axes by applying a tick format function to convert large numbers to a readable "B" suffix, and it removes default axis domains and tick lines for a cleaner look. Axis labels and title are styled via CSS, with the entire rendering done as SVG, showcasing D3's flexibility in styling chart components.

Loading thumbnail…

making a bar chart

This example demonstrates a horizontal bar chart ranking the populations of ten countries, with each bar’s length proportional to its value. It uses D3 v6 with an SVG rendering approach, loading the data from a CSV file and scaling it with `d3.scaleLinear` and `d3.scaleBand`. The chart draws axes via `d3.axisLeft` and `d3.axisBottom`, and populates rectangles for the bars while styling them with CSS. The population values are multiplied by one thousand before plotting, as seen in the JavaScript.

Loading thumbnail…

making a bar chart

This example shows a bar chart of the top 10 most populous countries, using data from a local CSV file. The visualization renders horizontal bars sorted by population, with each bar labeled by country name and population value. The code loads the data with `d3.csv`, imports D3’s `select` and `arc` modules, and sets up an SVG container defined in the HTML. While the chart is intended to display the population ranks, the current implementation only logs the parsed data to the console, leaving the visual bars to be constructed. The example is designed for easy forking and modification with new datasets.

Loading thumbnail…

Fork of Let's make a face with D3.js!

D3.js draws a yellow smiley face with animated eyebrows and a static arc mouth on an SVG canvas. The code uses d3-selection to append circles for the eyes and face, rects for the eyebrows, and d3-shape’s `arc()` for the mouth. A chained `transition()` moves the eyebrow group up and down in a looping two-second animation, demonstrating basic DOM manipulation and simple, time-based SVG transitions.

Loading thumbnail…

Fork of HTML Starter

This example displays an HTML Cars Report as a collection of basic shapes, including circles and rectangles with varied colors, strokes, and transforms, grouped to form a simple composite figure. The visualization uses raw SVG elements defined directly in the markup, such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with an explicit SVG `transform` attribute for scaling. Additional styling is applied through a linked CSS file, specifically targeting the `.lines` class to set stroke properties and path stroke-linejoin. The SVG is rendered as a static, embedded graphic.