Jesper Martinsson

@sweawesome·7 public vizzes

chartTest

This visualization displays multiple lines as a radial chart, using test data arrays to demonstrate the capabilities of D3.js. The chart employs `d3.lineRadial()` with cardinal curves to render the data, with each line represented in a different color from the `d3.schemeCategory10` palette. The visualization is rendered as an SVG element, created with D3's selection and append methods. The example includes code variants showing additional D3 features, such as time-scaled data, radial axes, grid lines, and axis labels, all within a React framework context.

Mar 3, 2023

Loading thumbnail…

Fork of Scatter Plot Save

This visualization displays the classic Iris Dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis, with each of the 150 flowers represented as a circle. The code uses D3 v7’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions to position points and render labeled axes. Data is loaded from an external CSV file and parsed with `csvParse`, then rendered using D3’s data join pattern with circles.

Mar 2, 2023

Loading thumbnail…

first iteration on site

This example presents a multi-line chart built with React and SVG, rendering data through the D3.js library (version 7.8.2). It visualizes multiple series over time, using D3's scales, axes, and line interpolation to map values. The chart supports interactive hover effects, including a tooltip and a Voronoi overlay. The code imports specific functions from D3, such as `select`, `range`, and `curveLinear`, to construct the visualization.

Feb 25, 2023

Loading thumbnail…

Fork of first iteration on site

This example displays a row of twenty circles that bob vertically in a continuous sine-wave pattern across the browser window. The animation is driven by a timer that updates the circle positions every 10 milliseconds, using D3’s `select`, `range`, and `.join()` API to bind data to SVG circle elements and update their `cx` and `cy` attributes. The visualization is rendered as an SVG, sized to the full window dimensions.

Feb 25, 2023

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

Feb 23, 2023

Loading thumbnail…

Testing Jagascript Arrays

A minimal web page demonstrates the contrast between static HTML content and a placeholder for dynamic JavaScript-driven visualization. The example relies on plain HTML structure with a single message element and no external libraries. It does not include any data processing, rendering, or interaction. The page serves as a basic template, showing how a document can embed text while leaving space for future JavaScript enhancements, such as those using D3 or Canvas APIs. Currently, the visualization logic is absent, making it a starting point for building more complex array-based visual experiments.

Feb 16, 2023

Loading thumbnail…

d3 tutorial 4

This example uses D3 to render a full-window SVG image. It draws 100 horizontal bars, each with a height of 10 pixels and stacked vertically, to create a striped pattern across the canvas. A clipping mask, defined with the `<mask>` element, applies a white star-shaped path over the stripes, so only the area inside the star remains visible against a black background. The code uses D3's `select`, `range`, `symbol`, and `symbols` APIs to generate the star path and SVG elements.

Feb 15, 2023