D3 Workshop: Part 3 - Conference Data

100%

D3 Workshop: Part 3 - Conference Data

✓ Published0🌍 Public

Last edited Mar 24, 2018

Created on Mar 24, 2018

This example visualizes conference registration data, showing the school affiliation and year of study for each order. It uses a simple SVG scatterplot, with one circle per order positioned by its area code. The visualization is built with D3 v4, using `d3.select` to target the SVG and a data array bound to circles. The code demonstrates basic data binding and SVG element creation without scales or axes, serving as a workshop exercise for rendering tabular data.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/ideaOwl/'>ideaOwl</a>'s block: <a href='http://bl.ocks.org/ideaOwl/a55a1409454043bb5b777776d5684e26'>D3 Workshop: Part 3 - Conference Data</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

CChrisChrisLoLo

100% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This example demonstrates the distribution of conference registration data, showing the affiliation of attendees by school and their year of study. It uses D3 v4 to render a static SVG visualization, with each data point representing an individual order. The code selects the SVG element and binds the array of objects, which contain fields like "School Affiliation" and "Year of Study". It employs D3’s data join to append circles, though the visual encoding beyond that is not implemented in the provided snippet, as the script is incomplete and no scales or axes are defined.

CCirieneve

92% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This example visualizes a workshop’s conference registration data, showing the distribution of attendees by their school affiliation and year of study. The visualization uses D3 v4 to render SVG circles, with each data point representing an individual order. The code leverages `d3.select` to bind the embedded dataset and positions circles based on categorical groupings, while animation via D3’s transition methods highlights the points upon load. The raw data, including order timestamps and area codes, is hardcoded in the script, and the rendering focuses on the static SVG container.

FFordMcLeod

92% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This example visualizes conference registration data, mapping each attendee’s order details, school affiliation, and year of study. It shows a static SVG bar chart or scatterplot-like layout, though the code primarily loads the dataset and prepares it for D3 v4 rendering. The visualization uses D3 v4’s `d3.select` to target the SVG container and binds the array of objects, which include fields like “Area Code” and “Paid at” timestamps. While no axes or scales are defined, the example demonstrates how raw tabular data can be structured for future graphical encoding, with the source data embedded directly in the script.

AAndrewMcKernan

91% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This visualization displays conference registration data, showing individual attendees as circles positioned on an SVG canvas. Each data point includes school affiliation, year of study, area code, and payment timestamp. The code uses D3 v4 to bind the JSON dataset and append circle elements to the SVG, with animations likely triggered through D3 transitions. The example serves as an educational workshop demonstrating basic data binding and SVG rendering techniques with d3.select and d3.append.

DDeveloperJeffb

91% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

An interactive D3.js v4 workshop demonstrates SVG shape manipulation and data-driven transitions. A button triggers D3 code that animates rectangles, changing their positions and colors based on a small inline array of color objects. The visualization uses raw SVG elements—a blue rect, pink-stroked circle, and yellow square—alongside D3-generated rectangles that employ `transition()` with a 1000-millisecond duration to animate `x` and `y` attributes and fill colors. The code also exercises selection, appending, and entering data rectangles through `svg.selectAll()` and `.enter()`.

CChrisChrisLoLo

76% match

Loading thumbnail…

d3js workshop - circles

This example demonstrates how to animate three circles on an SVG canvas using D3.js version 3, showing how data binds to elements and transitions update their appearance. It creates an SVG of 720 by 120 pixels, binds a simple array of three numbers to circle elements, and positions them horizontally based on their data values. The visualization uses chained `transition()` methods with configurable `duration()` and `delay()` to animate the circles’ fill color to red, and also applies radius and vertical position changes. The code relies on D3’s data-join pattern (`selectAll`, `data`, `enter`) and shows how multiple transitions can be sequenced with per-element delays.

BBillyBHWong

75% match

Loading thumbnail…

d3js workshop - circles

Three circles are rendered in an SVG, with a red fill and a staggered transition that delays each circle’s color change and radius increase by one second per circle. The example demonstrates D3’s data join, binding an array of numbers to circle positions, and uses `transition().delay()` and `transition().duration()` to animate style and attribute changes over two seconds. The code explicitly appends an SVG element, selects circles via `d3.select`, and applies transitions to fill, radius, and vertical position, showing basic animation and data-driven updates with D3 v3.

AAlbertFranco

73% match