d3.unconf 2016, v10

100%

d3.unconf 2016, v10

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

A hexagonal tile map visualizes survey responses from d3.unconf 2016 attendees, encoding each person’s first d3 project type, favorite d3 API, and the d3 version they started with. Hovering a tile reveals attendee details. The SVG animation uses d3.v4 with scales from `d3.scaleLinear` and `d3.scaleOrdinal`, color generation via chroma.js cubehelix, and interactive transitions. Data comes from a CSV file containing names, ticket types, and qualitative answers.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/c6cb4328d14498e152a761ff134ac18a'>d3.unconf 2016, v6</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/809fac1dd2c44a8cf43cf6f47c0126da'>d3.unconf 2016, v7</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/966edcfe36246008a2b7207fdb9b1036'>d3.unconf 2016, v8</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/4892f8fa5555a453058e964ddbcff065'>d3.unconf 2016, v9</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/82144236b9a920f77e3af1776d265c57'>d3.unconf 2016, v10</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive D3 v4 heatmap displays a two-dimensional histogram of date and value buckets, with tile colors encoding count data. Users select from a menu of sequential color interpolators, including Viridis, Inferno, and colorbrewer schemes, to recolor the visualization. The chart updates dynamically using `d3.scaleSequential`, and an animation cycles through interpolators every second until manual selection. The SVG rendering includes axes, a color legend, and labels for the count, date, and value dimensions.

TThanaporn-sk

70% 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

70% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatterplot displays survey data as hexagonal polygons positioned by x and y values, with color encoding categorical attributes. Users toggle between two color schemes via buttons representing 2009 and 2014 data. Built with React and D3 v7, it uses `scaleLinear` and `scaleOrdinal` for scales, `extent` for domains, and renders SVG polygons with rotation, scaling, and stroke styling. Data loads asynchronously from a CSV via `d3.csv`.

Pppal41366@gmail.com

69% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This visualization presents a scatterplot of conference registration data, mapping each attendee by their area code and order ID. The plot uses SVG elements within a 700x300 pixel canvas, built with D3.js v4. The code is forked from ideaOwl’s block and uses `d3.select` to target the SVG element. Each data point represents a paid order, with attributes like school affiliation and year of study, though the current rendering appears static without interactive features or animations.

MMandyMeindersma

69% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

MMandyMeindersma

69% match

Loading thumbnail…

Untitled

This interactive scrollytelling visualization tells the story of a 2017 San Diego Data Visualization meetup, summarizing attendance, device types, and age ranges. As the user scrolls, animated SVG grids and bar charts transition with elastic easing, using D3.js v3 for data joins and transitions, while Waypoints triggers each scene. The data is generated with `d3.range` and random age values, rendered as colored rectangles and text labels.

TThandolwethu Shakes Dlamini

69% match

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This interactive workshop example plots conference registration records as circles on an SVG, with each data point encoding order details such as school affiliation, year of study, and payment timestamp. Built with D3 v4, it uses data binding to append SVG elements and animate their positions. The visualization demonstrates how raw CSV-style data can be mapped into a static scatterplot, with no axes or scales defined, relying on a simple selection and enter-update pattern to display the dataset in a fixed 700x300 viewport.

MMara2020

69% match

Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc

69% match