ktshim@snu.ac.kr

@ktshim·17 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size, row count, and column count. The code uses d3.csv with a promise to fetch and parse the CSS Named Colors dataset, then formats the statistics with template strings. An alternative approach using the Fetch API with async/await and d3.csvParse is included but commented out, alongside a commented nested-promise example. The result appears as large text in a pre element.

Jan 5, 2024

Loading thumbnail…

reusable d3 scatterplot with symbols

This is a reusable D3.js scatterplot component built with React, rendered as an SVG with animation. It displays the classic Iris dataset, mapping petal length to the x-axis, sepal length to the y-axis, and using different symbols (such as circles, squares, and triangles) from `d3.symbols` to represent each species. The component uses a fluent API to configure scaling via `scaleLinear` and `scaleOrdinal`, axes via `axisLeft` and `axisBottom`, and applies a 2-second update interval to re-render the plot.

Nov 12, 2022

Loading thumbnail…

12. Scatterplot with Species

This interactive scatterplot displays the classic Iris flower dataset, encoding measurements like petal and sepal dimensions as points. Using React and SVG, the visualization allows users to dynamically select which quantitative or categorical columns map to the X and Y axes via dropdown menus built with a custom `menu` function. Data is loaded from a remote CSV using `d3.csv`. When axes change, the scatter plot updates smoothly, leveraging D3’s `transition` API to animate circles to new positions over one second. Axis labels and tick marks transition accordingly, with `d3.scaleLinear` and `d3.scalePoint` handling numeric and categorical scales.

Nov 9, 2022

Loading thumbnail…

11. Animated scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to select which quantitative attribute maps to the x- and y-axes via dropdown menus. Points smoothly animate to new positions with a staggered delay using D3 transitions when axes change. Built with D3 v7 and React, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the custom `scatterPlot` and `menu` modules handle SVG rendering and event-driven updates.

Nov 8, 2022

Loading thumbnail…

10. Animated reusable d3 scatterplot

This example shows an animated, reusable D3.js scatterplot built with React and rendered as SVG. It cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—every three seconds, transitioning point positions and axis scales smoothly over one second. D3 v7 APIs such as `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` handle the updates, while the chart is configured through a custom `scatterPlot()` function that accepts setters for data, dimensions, and margin. Data comes from a CSV loaded via `d3.csv`.

Nov 7, 2022

Loading thumbnail…

10. Dynamic Charts

This example shows an interactive scatter plot of the Iris dataset, where the x-axis attribute cycles through petal width, sepal width, petal length, and sepal length every two seconds. The visualization updates dynamically as the plot re-scales both axes to accommodate each new variable, while the y-axis remains fixed on sepal length. Built with React and D3 v7, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for the chart, with `setInterval` driving the periodic data changes. The scatter plot is rendered as SVG circles and animated in the browser window.

Nov 7, 2022

Loading thumbnail…

10. dynamic

This dynamic scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis variable every two seconds. Built with React and D3, it uses `scaleLinear`, `scaleOrdinal`, and `symbol()` to render SVG symbols colored by species, with axes redrawn on each update via `axisLeft` and `axisBottom`. The data comes from a remote CSV loaded with `d3.csv`.

Nov 7, 2022

Loading thumbnail…

reusable d3 scatterplot

This example shows a reusable D3 scatterplot of Iris flower measurements, plotting petal length against sepal length as circles with ordinal axes. The visualization is implemented as a custom D3 module using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv` from a GitHub gist. The chart’s dimensions, margins, and radius are configurable through chained setter functions, and it renders in an SVG with a React starter template. The code demonstrates a modular, data-joins approach where circles are appended to the selection.

Nov 5, 2022

Loading thumbnail…

d3 scatterplot

This example visualizes the classic Iris dataset as a scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. It renders individual data points as SVG circles, with axes positioned along the left and bottom edges. The code uses d3.csv to load and parse the data, d3.scaleLinear for both scales, and d3.extent to compute the domains from the raw values. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart fills the entire browser window by setting the SVG dimensions to the inner width and height.

Nov 4, 2022

Loading thumbnail…

Fork of Fork of D3 Selection Exploration

This example demonstrates a dynamic visualization of a set of circles whose positions and radii oscillate over time, creating a flowing, wave-like pattern. The animation updates every frame at 60 frames per second, with the number of circles varying between 5 and 15. It uses the D3.js library (version 6.6.2) and its `select`, `range`, and `.join` APIs to efficiently bind and update SVG circle elements. The data is procedurally generated using a sine function, and the rendering is handled via SVG with animated attribute changes.

Oct 25, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

A dynamic scatter plot animates a set of circles whose positions and radii oscillate sinusoidally over time. The visualization uses D3 v6's `select` and `range` functions, along with the `data` join and `join('circle')` method to update SVG elements each frame. Data is generated procedurally by `makeData`, which computes x, y, and radius values based on a continuously incrementing time variable, with animation driven by a 60 FPS `setInterval`.

Oct 25, 2022

Loading thumbnail…

D3 Selection Exploration

A dynamic SVG animation demonstrates D3's data join pattern with shifting circle counts. The visualization uses `d3.select`, `d3.range`, and the `selection.join()` method to bind an array of computed data points to circle elements, updating their `cx` and `cy` attributes with sine-based positions. Circles appear and disappear as the data length varies, driven by a `setInterval` callback that increments a time variable at 60 frames per second. The example renders directly into the browser using D3 v6, with no external data source beyond the generated numeric values.

Oct 25, 2022

Loading thumbnail…

javascript arrays

This example demonstrates core JavaScript array manipulation techniques using D3 v6’s ascending helper for sorting. The code defines a custom range function to generate numeric arrays, then explores iteration with forEach and for loops, filtering, sorting with custom comparators, mapping to transformed values, and reducing to cumulative sums. It also sorts an array of objects by a key property using d3.ascending, and includes commented examples of reduce-based object conversion. No visualization is rendered; the example focuses purely on console-based array operations.

Oct 25, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example uses D3.js to recreate a Sol LeWitt-inspired drawing with horizontal and vertical striped bands. It renders 100 horizontal rectangles and a secondary set of vertical bars clipped by two circle masks, creating an intersecting geometric pattern. The SVG masks reveal only the areas inside the circular regions, with the second mask inverting the visibility. The code uses D3 selections and the `range()` function to generate the marks, with the primary source being the LeWitt reproduction referenced in the README.

Oct 17, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML!” in large, centered type via CSS. It also includes a JavaScript file that logs messages to the console and demonstrates basic variable assignments and data types, including `var`, `let`, and `const`. The page uses no external libraries, relying solely on plain HTML, CSS, and JavaScript to illustrate fundamental web development concepts.

Oct 16, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This generative art piece reproduces a Sol LeWitt wall drawing using pure JavaScript and the SVG API. It displays a grid of alternating horizontal and vertical stripes that intersect within central circular masks, creating a layered geometric pattern. The code constructs an SVG canvas with two circle masks—one revealing horizontal bars, the other vertical bars—overlaid to produce the final composition. No external libraries are used; all elements are created dynamically via `document.createElementNS` and styled with inline attributes.

Oct 16, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes, including a circle, rectangle, line, and path, as rendered directly in an inline `<svg>` element. It shows how each shape’s attributes—such as `cx`, `cy`, `r` for the circle, and `x`, `y`, `width`, `height`, `fill`, `stroke`, and `stroke-width` for the rectangle—control its geometry and styling. The code uses raw SVG APIs without any JavaScript libraries, with styles applied via presentation attributes. The path element draws a polyline using the `d` attribute’s `M` and `L` commands, illustrating coordinate-based drawing.

Oct 11, 2022