Skip to main content
Log in
A

alexis

@alexiskat·16 public vizzes

Loading thumbnail…

Exercise v3

A reproduction of a Sol LeWitt art piece shows a black background with five colored circles that animate into place. Using D3.js, the code binds an array of circle objects to SVG elements, entering circles with a slow transition that delays each one and expands its radius from zero. Updates apply a fast linear transition to reposition existing circles, while exits shrink back to zero before removal. The rendering uses D3 transitions with `easeLinear` and explicit key functions for stable data binding.

Aug 14, 2024
Loading thumbnail…

Fork of Line Chart

This fork by alexiskat presents US auto sales from 2005 to 2022 as a single red line chart. It plots annual sales figures against a time axis, using D3 v5's `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` functions to generate the SVG. The data is loaded from a remote CSV file and rendered with a grid and axis labels.

Aug 14, 2024
Loading thumbnail…

Fork of d3 line chart

This line chart displays population growth rates for the United States, Canada, and Mexico from 1890 to 2010, using data from the CORGIS Global Development dataset. The visualization plots three colored lines, each representing a country, with gray markers for individual data points. Built with d3.v7, the chart uses d3.line to generate the paths, d3.scaleLinear for the x and y axes, and d3.axisBottom and d3.axisLeft to render the axes. An interactive tooltip appears on mouseover, showing the country, year, and exact growth value.

Aug 14, 2024
Loading thumbnail…

Fork of reflectivity - condurs - 3

This visualization displays the trajectory of points with varying phi and theta angles, mapped to x and y coordinates, with a density contour overlay that animates in progressively. The color of the contours reflects the selected slowness value (p, s, or t) chosen via a dropdown menu. The visualization uses D3.js libraries including `contourDensity`, `geoPath`, `scaleLog`, and `transition` to render the SVG paths and smoothly animate their appearance. The data comes from a precomputed `data_xy` array, and the square plotting area is bounded between -1.5 and 1.5 on both axes.

Aug 10, 2024
Loading thumbnail…

reflectivity - condurs -2

This visualization displays the positions of data points on a scatterplot, overlaid with a density contour map that uses logarithmic color scaling to represent varying levels of point concentration. The underlying data is rendered as SVG, with axes labeled "X Axis Label" and "Y Axis Label". The code relies on d3's `scaleLinear`, `contourDensity`, `geoPath`, `scaleLog`, and `axisLeft`/`axisBottom` to generate the contours and axes, while a `ResizeObserver` ensures the visualization remains responsive to container resizing.

Aug 8, 2024
Loading thumbnail…

reflectivity - condurs

A scatterplot of seismic reflectivity data maps x/y sample positions, with each point colored by its P-wave slowness value. A 30-level density contour overlay, computed via `d3.contourDensity` and rendered as SVG paths with `d3.geoPath`, highlights clusters in the point distribution. The visualization uses `d3.scaleLinear` for axes, `d3.scaleSequential` with `interpolateReds` for color encoding, and `d3.axisBottom`/`axisLeft` for ticks. The background rectangle and circles are drawn with D3 joins.

Aug 8, 2024
Loading thumbnail…

Contour Plot with CSV Data

This example shows a contour plot of three-dimensional data loaded from a CSV file, with labeled contour lines and a rainbow color scale. The visualization maps the `xi`, `yi`, and `zi` columns from the data file to x, y, and z coordinates, using Plotly’s `newPlot` function to render the plot. The code calculates the maximum x and y values from the data to set axis ranges, and configures the plot with smooth contouring, visible labels, and white font for the contour annotations. The layout includes custom margins and a title, with the chart rendered inside a div element in the HTML page.

Aug 7, 2024
Loading thumbnail…

reflectivity - condurs

This scatterplot visualization displays seismic wave slowness data, mapping the x and y coordinates of each sample point with the p-slowness value encoded through a continuous color scale. The plot is rendered as SVG, with a gray inner rectangle framing circular points that vary in color from the turbo interpolator. Density contours are overlaid using d3.contourDensity and d3.geoPath, providing a visual summary of point concentration. A color legend with discretized value ranges is generated, drawing on d3.scaleSequential and d3.extent, while the data originates from a static array of geophysical measurements.

Aug 7, 2024
Loading thumbnail…

reflectivity - colors

This visualization depicts a scatter plot of data points positioned by x and y coordinates, colored by a p_slowness value using a sequential color scale with the `d3.interpolateTurbo` interpolator. The plot includes x and y axes with labels, a color legend, and density contours computed via the `d3.contourDensity` API, rendered as stroked paths using `d3.geoPath`. It is built with the D3 library version 7.9.0, using an SVG rendering approach with a responsive resize observer.

Aug 7, 2024
Loading thumbnail…

advance-setup-2

This example reproduces a Sol LeWitt art piece as an interactive SVG scatterplot. Points with x and y coordinates are plotted on light blue and gray axes, each point rendered with a fixed radius and opacity. The visualization uses d3.scaleLinear for scaling and d3.axisBottom and d3.axisLeft for axis generation, with data from a static JavaScript array. The container is responsive via a ResizeObserver that updates plot dimensions.

Aug 6, 2024
Loading thumbnail…

advance-setup-1

This example shows a scatter plot reproduction of a Sol LeWitt art piece, with blue data points on a gray inner rectangular area surrounded by a light blue background. The visualization includes labeled X and Y axes with titles, using a fixed data array from `data.js`. The code builds an SVG container with D3 v7, using `scaleLinear` for coordinate mapping, `axisBottom`, `axisLeft`, and modular functions for axis labels. The plot is rendered through a setup that manages margins, dimensions, and joins for SVG elements.

Aug 5, 2024
Loading thumbnail…

basic-setup

This example reproduces a Sol LeWitt-inspired drawing using D3.js. It renders a series of blue circles on a cyan background, plotting each point according to x and y coordinates from a static data array. The code uses the `select` function to manage SVG elements and binds circle positions with chained `.attr` calls to set `cx`, `cy`, `r`, and `fill` properties. The opacity is fixed at 0.7 to show overlapping points. The dataset includes both scaled coordinate pairs and precomputed pixel values.

Aug 5, 2024
Loading thumbnail…

heatmap

This animated visualization shows five circles of varying sizes and colors moving across a black canvas, each expanding from a point of zero radius to its full size before settling into its final position. The circles are drawn with distinct neon hues, including blue and magenta, and are positioned at different coordinates throughout the frame. The animation is implemented using the D3.js library, specifically leveraging the `select`, `transition`, and `easeLinear` APIs to manage the enter, update, and exit states of each circle as the data changes. The data is hardcoded in the script, and the circles transition over a two-second duration with a delayed stagger effect.

Aug 5, 2024
Loading thumbnail…

Exercise v2

This example animates five circles on a black background, each starting at radius 0 and expanding to its target size while updating its position. The circles use distinct colors and opacity, with staggered entrance delays and a faster linear transition for position updates. Built with D3 v7, it employs `transition`, `easeLinear`, and data joins via `selection.join()` to handle enter, update, and exit states. The visualization is a reproduction of a Sol LeWitt art piece, with the code defining explicit x, y, and radius values for each circle and rendering them as an animated SVG.

Jul 3, 2024
Loading thumbnail…

Exercise v1

This visualization reproduces a Sol LeWitt art piece by rendering four semi-transparent circles of varying radii and colors onto an SVG canvas. Built with D3.js, the code uses the `select` and `join` APIs to manage the SVG container and circle elements, positioning them via `cx`, `cy`, and `r` attributes. The circles overlap with a fixed opacity value, creating layered intersections that mimic the geometric style of the original artwork. The composition is static, with no interaction or animation, and the data is hardcoded in an array of objects within the `index.js` file.

Jul 3, 2024
Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered message reading “Hello HTML!” on a plain white background. The page is styled using CSS to set the font size and text alignment, demonstrating the fundamentals of customizing HTML elements. The code uses custom JavaScript to embed an empty SVG canvas with a width of 960 pixels and a height of 500 pixels, though no shapes are drawn. This bare-bones template serves as a minimal starting point for web-based projects, showing how to structure an HTML document with embedded styles and scripts.

Jul 3, 2024