Skip to main content
Log in
J

ji3ji3ji3195@gmail.com

@lw-iab·15 public vizzes

Loading thumbnail…

Homework 7

The visualization displays hourly air quality measurements from a Seoul monitoring station as a horizontal chart, with each line representing a pollutant such as SO2, NO2, or PM2.5 across time. Users can zoom into specific date ranges using a dual-handle time slider that filters the displayed data. The rendered SVG chart uses D3.js v7’s `d3.drag` for interactive range selection, `d3.group` to organize data by pollutant and date, and a custom `multitext` function for labeling. The underlying data comes from a CSV file containing pollutant concentrations and timestamps.

Oct 28, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example presents an interactive range slider built with D3.js (version 7) and rendered as SVG. Two draggable circular handles on a horizontal track allow users to select a numeric interval between 0 and 100, with the current selection displayed below. The slider uses `d3.scaleLinear()` to map data values to pixel positions and `d3.drag()` to manage handle movement, constraining positions within the track and preventing handle overlap.

Oct 28, 2024
Loading thumbnail…

Homework 7

This interactive scatter plot visualizes the Iris dataset, coloring each point by species: purple for setosa, blue for versicolor, and red for virginica. The visualization provides two dropdown menus constructed with D3.js, allowing users to dynamically select which attribute to plot on the x-axis and y-axis from the dataset’s four numeric measurements. The scatter plot is rendered as SVG circles within an HTML page that imports D3 v7 from a CDN, with the UI defined alongside the plot in a static HTML file.

Oct 24, 2024
Loading thumbnail…

Homework 6

This interactive ThemeRiver chart visualizes median house prices over time, segmented by property type and bedroom count, using data from `ma_lga.csv`. The stacked streamgraph renders as SVG paths generated with `d3.area()` and `d3.curveBasis`, with colors from `d3.scaleOrdinal(d3.schemeTableau10)`. Users can click side labels to hide streams, hover to display a tooltip with date and price via `d3.pointer`, and click two streams to swap their stacking order, triggering an animated re-render with `d3.flatGroup` and `d3.minIndex`.

Oct 20, 2024
Loading thumbnail…

aHomework 6

This visualization shows the median sales price of houses in Massachusetts over time, broken down by the number of bedrooms. The theme river displays the changing price levels for houses with two, three, four, and five bedrooms across quarterly data from 2007 to 2019. Using the D3.js library, the code processes the CSV data with `d3.csv` and renders the streamgraph as an SVG. The plot uses stacked, colored bands to represent each bedroom category, revealing relative price trends and fluctuations across the housing market.

Oct 15, 2024
Loading thumbnail…

Homework 4

A brushable scatter plot matrix of the Iris dataset displays pairwise relationships among sepal and petal measurements, colored by species. The code builds on D3 v7’s `d3.cross` for the grid, `d3.scaleOrdinal` with `d3.schemeTableau10` for category colors, and a custom histogram using `d3.histogram` and `flatGroup` for stacked bins. Users can click to toggle data point selection, which brightens the corresponding marks and bins across the linked views.

Oct 14, 2024
Loading thumbnail…

Correlation Matrices

A matrix of scatter plots visualizes correlations among numeric attributes of abalone shellfish, split by sex. Each cell shows a scatter plot with a background color indicating Pearson correlation, blue for positive and red for negative. Clicking a plot zooms in for detail. The code uses d3.csvParseRows to load abalone.data, d3.scaleLinear for axes, d3.interpolateRdYlBu for heat colors, and SVG rendering.

Sep 29, 2024
Loading thumbnail…

Fork of Homework 2

A fork of a course homework assignment, this visualization presents the classic Iris dataset as an interactive parallel plot. The view displays multiple polylines, each representing a single flower, with its sepal and petal measurements plotted across four parallel axes, colored by species (red, blue, purple). Users can reorder axes by dragging their titles. The implementation leverages D3 v7 for scaling, axis generation, and the drag behavior, with transitions animating the axis and line updates.

Sep 21, 2024
Loading thumbnail…

Homework 2

This visualization presents an interactive parallel coordinates plot of the classic Iris dataset, displaying four floral measurements across a shared axis layout. Each of the 150 samples appears as a colored polyline, with the color scale (red, blue, purple) mapping to the three Iris species, making clusters and dimension correlations visible. The D3.js v7 implementation uses `d3.csv` to load the data, `d3.scalePoint` for the horizontal categorical axes, `d3.scaleLinear` for vertical value scaling, and `d3.drag` to let users reposition entire axes dynamically.

Sep 21, 2024
Loading thumbnail…

Fork of Homework 2

This parallel coordinates plot visualizes the Iris dataset, showing four flower measurements—sepal length, sepal width, petal length, and petal width—as connected polylines across vertical axes. The visualization uses d3.csv to load the data, d3.scalePoint for horizontal axis positioning, d3.scaleLinear for each dimension’s vertical scale, and d3.axisLeft to render tick marks. Each line represents one sample, with scales computed from the data’s extent. The SVG output includes axis titles above each column, enabling comparison of measurement distributions across the classic botanical dataset.

Sep 18, 2024
Loading thumbnail…

Homework 1

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal dimensions for three species, with each species color-coded (purple, blue, red). It uses D3 v7 to render SVG circles with animated transitions, allowing users to dynamically select which measurement pairs appear on the x- and y-axes via dropdown menus. The chart leverages d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and d3.axisBottom/axisLeft for tick marks, with data loaded from a CSV file.

Sep 13, 2024
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and sepal width on the y-axis for three species of iris flowers. The visualization uses D3's `scaleLinear` function to map data values to pixel coordinates, with circles representing individual samples. The `xAxis` and `yAxis` functions from D3 render the axes, while custom label functions from the `@curran/axis-labels` library add axis titles. A light gray rectangle highlights the plotting area, and semi-transparent circles reveal overlapping data points. The example demonstrates a reusable plotting pattern that can be adapted to other datasets.

Sep 4, 2024
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width for three iris species. A data point in the visualization represents each flower, with the x and y positions corresponding to two selected measurements. The code imports data directly from a local CSV file using `import data from './iris.csv'` and converts the numeric string values to numbers using the unary plus operator. Using D3’s `select` and `csv` functions from the imported module, the dataset is prepared for rendering, though the scatter plot’s visual encoding is not fully implemented in the provided snippet.

Sep 4, 2024
Loading thumbnail…

Fork of Simple Scatter Plot

This fork of the classic Iris scatter plot visualizes sepal and petal measurements from the built-in iris.csv dataset, with points colored by species. It uses D3’s `csv` loader to parse the data and logs the parsed rows to the console. The rendering logic is delegated to an imported `viz` module, which builds the scatter plot from the loaded data. The example demonstrates a modular structure where data loading and visualization are separated.

Sep 4, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

A simple "Hello World" example demonstrates the hot-reloading capability of the VizHub V3 runtime environment. A text element displays "Hello World" at a fixed font size, which can be interactively adjusted by holding the Alt key and dragging on the numeric value within the code editor. The `main` function receives a `container` DIV element and directly manipulates its `innerHTML` property to render the styled text. This illustrates the streamlined entry point and real-time interactive feedback loop.

Sep 2, 2024