Vyrwn

@Vyrwn·12 public vizzes

Solar Path

This animated visualization displays the Sun’s path across the sky for the current day, based on the viewer’s geolocation. Using a stereographic projection with the horizon as the outer circle, concentric rings mark elevation angles while radiating graticule lines indicate azimuth. A red dot marks the Sun’s current position, updated every second, with labels for its azimuth and elevation. The solar path is drawn as a red line, and its intersection with the horizon indicates sunrise and sunset. Geolocation is requested on load, and the visualization uses NOAA-based solar calculations rendered in SVG with D3.v3.

Oct 28, 2017

Loading thumbnail…

d3js workshop - bar chart

This example displays a horizontal bar chart of English Premier League standings, with each bar’s length representing a team’s total points and its color encoding the number of wins. The visualization uses d3.csv to load the league table, d3.scale.linear for both the x-axis width and the color gradient from blue to red, and SVG groups with appended rect and text elements. Bar heights are fixed, while the title element provides hover tooltips with team names.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles 2

Three circles animate from the top of an SVG canvas to a lower position, changing color from black to red and growing in radius, before a mouseover returns them to their original size and a click shrinks them to nothing. The visualization demonstrates basic D3 data binding and transitions, using `d3.select` to append SVG circles, `selection.data` to bind an array of radius values, and `transition.delay` and `transition.duration` to control the animation timing. Event handlers attached with `selection.on` trigger the mouseover and click responses.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles

Three circles render in an SVG across a 720-by-120 canvas, each initially positioned along the x-axis with a fixed radius and vertical center. The example demonstrates D3’s data-join pattern, binding an array of tuples to circle elements and setting their `cx` attributes based on index. A chained transition then animates each circle sequentially, with a one-second delay between starts, over two seconds changing the fill color to the tuple’s second value, increasing the radius to 17, and shifting the y-coordinate to 80. The code uses d3.v3 selection, `.data()`, `.enter()`, `.append()`, and `.transition()` with `.delay()` and `.duration()`.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by selecting and manipulating HTML elements. It shows how `d3.select` and `d3.selectAll` target elements by tag, class, or ID, and how chained methods like `.append` and `.text` modify the document. The active code selects the `body` element, appends a new `div`, and sets its text content to "I'm the new div added by d3! Yo!"—illustrating the resulting order of appended elements. Other selection strategies are commented out, revealing alternative approaches for updating existing text. The example uses D3 v3 from the d3js.org CDN.

Oct 19, 2017

Loading thumbnail…

d3js workshop - animated bar charts

The visualization displays the 2015 English Premier League standings as an animated bar chart, with each team’s points and wins encoded by bar width and a blue-to-red color scale. The code uses d3.v3 with SVG and linear scales, reading data from a CSV file. Clicking a team’s bar or matching circle triggers an update function that transitions the rectangle’s width and text, animating between the points and wins metrics. Tooltips show team names via native SVG title elements.

Oct 19, 2017

Loading thumbnail…

d3js workshop - animated bar charts

The visualization displays the English Premier League table as an animated horizontal bar chart, with each bar representing a team’s points total and colored by number of wins. Circles above the chart encode the same data redundantly and, like the bars, respond to clicks. Built with d3.v3, the example uses d3.csv to load the league data, d3.scale.linear for both x-position and color mapping, and SVG groups with appended rects, text, and titles. Clicking a bar or circle triggers an update function, though the full behavior is not shown.

Oct 19, 2017

Loading thumbnail…

d3js workshop - bar chart

This example displays a horizontal bar chart of English Premier League statistics from a CSV file. Each bar’s length encodes the team’s total points, while its color encodes the team’s number of wins, using a blue-to-red linear scale. Built with the d3.v3 library, the visualization renders as SVG rectangles and text, using `d3.csv`, `d3.scale.linear`, and `d3.select` to generate the chart. Hovering over a bar reveals the team name via a `<title>` element.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles

Three circles animate sequentially, expanding, turning red, and shifting downward when the page loads. Hovering turns a circle black, while clicking shrinks it to nothing and changes its fill to grey. The example uses D3 v3 with SVG rendering, binding an array of three numbers to circle elements via `data()` and `enter()`. Transitions apply staggered delays and durations through `transition().delay()` and `transition().duration()`, and mouse events trigger additional animated style and attribute changes.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles

Three circles, bound to an array of three values, appear in an SVG canvas and animate sequentially: each circle grows, shifts downward, and turns red over two seconds. The code builds the SVG with `d3.select` and `append`, then uses the data-join pattern with `selectAll('circle')`, `data`, and `enter` to create the circles. Mouseover triggers a two-second transition that fills a circle black, while a click transitions it to grey and shrinks its radius to zero, both via `transition.attr` and `style`. The initial animation uses `transition.delay` based on array index.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by pairing an empty selection of `div` elements with an array of four names. The code uses `d3.selectAll('div')` and `.data([...])` to join the data, then `.enter()` to create placeholder selections for each data point without appending elements. The visualization intentionally leaves the append and text-filling steps commented out, showing the intermediate state of the binding process. It relies on D3 v3’s core selection and data-join API, with the data sourced from a hardcoded array of names.

Oct 19, 2017

Loading thumbnail…

AEC_htlm_Workshop

This example demonstrates a minimal HTML page with styled text and a single SVG circle, rendered directly in the browser. It shows how CSS classes and inline styles control typography, while an SVG element draws a red circle with a black stroke. The page uses plain HTML, CSS, and SVG markup—no external libraries—with a 300x300 viewBox for the circle. The code includes a header, paragraphs, and comments, but no interactive behavior or data-driven visualization is present.

Oct 19, 2017