Tell us what works and what could be better. We read every submission.
@aduo122·13 public vizzes
A horizontal bar chart displays the English Premier League standings as of February 21, 2015, with each team’s points encoded as bar length and labeled directly on the bars. The SVG visualization uses d3.v3 with `d3.csv` to load the team data, `d3.scale.linear` to map points to pixel widths, and data-bound `<g>` groups containing `<rect>` and `<text>` elements. Each bar includes a `<title>` tooltip showing the team name. The chart is built with D3’s selection and enter/append pattern, using a fixed bar height and padding.
Three circles animate downward, change color, and grow before returning to their original positions on click. The visualization demonstrates basic D3 v3 data binding, transitions, and event handling. It creates an SVG canvas, binds an array of three values to circle elements, and uses `transition().delay()` and `transition().duration()` for sequential animation. Clicking a circle triggers a two-second transition that shrinks it to zero radius and turns it black, while mouseover behavior remains commented out in the code.
A horizontally aligned bar chart ranks ten English Premier League teams by total points, with each bar’s fill color mapping to the team’s win count on a blue-to-red linear scale. Clicking a bar or a corresponding circle above the chart triggers an update function that animates the bar’s width to reflect wins instead of points. The visualization uses d3.v3 with SVG elements, `d3.scale.linear` for axes and color encoding, and data from the included CSV file.
A horizontal bar chart displays English Premier League soccer teams and their total points as of February 2015, using data from a CSV file. The bar lengths are scaled proportionally to points, while bar colors encode the number of wins, ranging from blue to red. Built with D3 v3, the example appends SVG rectangles and text labels, using `d3.scale.linear` for both position and color mapping, plus `d3.csv` for data loading.
A horizontal bar chart displays English Premier League standings as of February 2015, with each team’s total points encoded as bar length. The visualization reads team data from a CSV file and renders it as SVG rectangles using d3.csv, d3.scale.linear, and selection.append. Bar heights are fixed, while point values appear as labels at each bar’s end. The code sets the x-scale domain to the maximum points and positions each bar group via transform translations.
Three circles animate downward and expand while their fill color transitions to red, using D3's data join to bind an array of three numbers to SVG circle elements. The circles respond to mouseover by turning black and to clicks by shrinking to zero radius and fading to grey, with each transition lasting two seconds. The code uses D3 v3's `selectAll`, `data`, `enter`, and `transition` APIs with `duration` and `delay` methods. The initial positions derive from the data values multiplied by four for the x-coordinates.
Three circles, bound to an array of data values, are rendered as SVG elements and animated with a sequence of D3 transitions. The circles initially grow and change fill color, then respond to mouseover events by shrinking and repositioning upward. The example uses D3 v3’s `selectAll`, `data`, `enter`, and `transition` APIs to demonstrate basic data joins, event handling, and chained animations.
Three SVG circles sit in a row inside an 720x120 canvas, built with D3 v3’s selection and data-join pattern. The code defines a static dataset `[10, 20, 30]` and uses `append`, `attr`, and `style` to set each circle’s radius, vertical position, and horizontal offset based on its data value. A commented sequence demonstrates animated transitions: first changing fill color to red with a 2-second duration, then adding per-element delays, and finally combining color, radius, and vertical movement in one transition. All animation code remains inactive, showing only the initial static circles.
This example demonstrates D3.js data binding by associating an array of names with div elements. The code uses `d3.selectAll('div')` to create an empty selection, `.data(['ben', 'elcin', 'ana', 'jonatan'])` to bind the data, and `.enter()` to create placeholder elements for each data point. Although the `.append('div')` and `.text()` calls are commented out, the uncommented lines show the core binding pattern that would later fill each element with its corresponding name. The visualization illustrates the fundamental concept of joining data to DOM elements in D3 v3.
This example demonstrates D3.js data binding and selection techniques through commented code examples. It uses d3.selectAll and d3.select to target HTML div elements by element type, class, and id, showing how to update text content or append new elements. The visible page contains two static divs with distinct classes and ids, while the script section illustrates various selection patterns—including appending a new div to the body—though all interactive commands remain commented out. The code relies on D3 v3’s core selection API, with no external data sources or rendering beyond basic DOM manipulation.
This example demonstrates a simple HTML page styled with CSS and enhanced with a static SVG circle, serving as an introductory tutorial. It shows how to apply inline styles, ID selectors, and class-based styling to text elements, while embedding an SVG shape directly in the markup. The code uses no JavaScript or D3.js APIs, relying solely on raw SVG elements and CSS for rendering. A red circle with a custom stroke is drawn inside an SVG container, while the page displays styled paragraphs and a header, illustrating basic web visualization and styling techniques.
This example demonstrates a minimal D3.js tutorial page that mixes styled HTML text with a basic SVG graphic. It shows a large orange number inside a red-styled paragraph, a second paragraph labeling “d3 tutorial,” and a red circle drawn with SVG attributes for position, radius, stroke, and fill. The page uses plain CSS for typography and class-based styling, while the circle is created directly in markup rather than through D3 selections. The code relies on standard SVG elements and CSS, with no data binding or interactive behavior beyond static rendering.
This example displays a single static SVG canvas with the text “Edit the code below to change me!” positioned at a fixed coordinate. The visualization uses d3.v4 to select the body element, append an SVG container sized 960 by 500 pixels, and render the text with a monospace font at 36 pixels. The code demonstrates basic D3 selection and attribute manipulation for SVG text placement, with no dynamic data or interaction.