OValdivia110

@OValdivia110·8 public vizzes

d3js workshop - animated bar charts

This interactive bar chart visualizes the English Premier League standings as of February 21, 2015, showing each team's points and win totals. The visualization uses a horizontal bar chart where bar lengths represent points, while bar colors encode win counts on a blue-to-red scale. Users can click either the bars or the circular markers above to toggle the displayed metric between points and wins, with smooth animated transitions updating the bar widths. The code uses D3 v3 with SVG rendering, employing linear scales, CSV data loading via `d3.csv`, and click-event handlers to drive the dynamic updates.

Oct 19, 2017

Loading thumbnail…

d3js workshop - bar chart

This bar chart displays the total points earned by Premier League teams as of February 21, 2015, using horizontal rectangles whose widths are scaled by the d3.scale.linear function. The chart is rendered as an SVG, with each bar grouped into a <g> element that also contains a text label showing the point value. Built with D3 v3, the code loads data from a CSV file, coerces the PTS column to numbers, and sets the x-domain to the maximum points value. The bars are positioned using d3.selectAll("g") with transform translations, and the height remains fixed per record.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles 2

Three circles animate their vertical position and size, turning red before a mouseover returns them to their original state. Built with D3 v3, the example uses an SVG canvas and a simple data array to drive circle coordinates. It demonstrates `selectAll`, chained `.enter()`, and the `transition()` API with `delay` and `duration` for animation, alongside event handling via `.on("mouseover")`. The code is a workshop exercise derived from an interactive circles block.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles 2

An interactive D3.js visualization displays three circles that initialize in a horizontal row, then transition to a larger red size with a staggered delay before resetting on mouseover. The example demonstrates basic SVG circle creation using data binding with an array of values, where circle x-coordinates derive from the data. It applies transitions with staged timing and duration, then adds mouseover events to change circle fill color and dimensions, returning them to their original state. The code uses d3.select, selection.data, enter, append, transition, and event handling.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles

Three circles appear in a horizontal row on an SVG canvas, then animate their fill color, radius, and vertical position. The example demonstrates basic D3.js data binding and transitions using `d3.selectAll`, `.data()`, `.enter()`, and `.append()`, with a data array of `[10, 20, 30]` determining circle indices. It uses `transition().duration()` and `transition().delay()` to stagger color changes to red over two seconds while also shifting the circles downward. The code is a workshop exercise built with D3 v3, rendering via SVG elements in the browser.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how to bind an array of names to a set of HTML `div` elements using D3.js v3. The visualization shows a simple list where each name is displayed with its corresponding index number, illustrating the fundamental data-binding workflow. The code selects all `div` elements, binds the data array including 'ben', 'elcin', 'ana', 'jonatan', and 'byron' to the selection, then uses the `.enter()` method to append a new `div` for each data item. A text function with parameters `d` and `i` formats the output as the index plus one followed by the name. This example serves as an educational workshop on binding data to elements with D3's selection and iteration APIs.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3.js binds data by showing two HTML divs and a newly appended element. The code uses `d3.select` and `d3.selectAll` with CSS selectors to target elements by type, ID, or class, though only the `body` selection is active. It appends a new `div` via `d3.append` and sets its text with `.text()`. The visualization relies on static HTML content and D3's DOM manipulation capabilities, with no external data source; the three.js-like syntax is actually D3 v3’s API for selecting and modifying elements.

Oct 19, 2017

Loading thumbnail…

fresh block

This example presents a simple HTML page with large, styled text and a single SVG circle. It demonstrates fundamental CSS styling, using an ID selector for the first paragraph and a class selector to apply red coloring. The visualization itself is a static SVG circle with a teal stroke and dark blue fill, created using basic SVG markup within the page's HTML structure. The code uses no JavaScript libraries, relying solely on inline SVG and CSS for its visual output. The source is a gist built with blockbuilder.org, rendered as an SVG.

Oct 19, 2017