D3 Examples

Specdraw interactive view mode: 2D HSQC spectra of amygdalin

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

Apples, bananas, grapes, oranges... What's your favorite?

Percent of outpatient doctor visits for influenza-like symptoms

Comparison of two-wheeled traffic counts in the East Midlands from 2007 to 2011

Data Penanganan Bencana Pemkar Jakarta per Kelurahan tahun 2013

Mouseover demonstration. Modified from the original to use the official d3.js URL.

Uranium Ores & Concentrates Production in the USA by year 2000-2010

Uranium Ores & Concentrates: production in metrics tons by country and year (2000-2010)

People at risk of poverty or social exclusion by NUTS 2 regions

התקווה

Checkbox to "criminalizate" torcriminalbrowser.com :)

Concept Map playlist visualization generated by Exaile 3.4 beta3

mfa dt bootcamp web class css positioning example 9: using positions static, relative and fixed to create a mock website layout

mfa dt bootcamp web class css positioning example 4: absolute

Router

Alpha-Shape Circular Bounded Voronoi Tessellation [UNLISTED]

D3 play

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

Global Corporate Tax Rates from 2006 to 2016: http://bl.ocks.org/violetvivirand/88867d3fb2f50d13e00a0113280848b4

Global Corporate Tax Rates in 2015: http://bl.ocks.org/violetvivirand/200f464b0403914e19b34613836f0fbe

Taiwan Map with Leaflet: http://bl.ocks.org/violetvivirand/56cc297a57b0b710263124701c153faf

Global Corporate Tax Rates Map from 2006 to 2016: http://bl.ocks.org/VioletVivirand/40dc93ec94038bf5ca3f3a88aff6f857

Kaohsiung Bicycle Routes: http://bl.ocks.org/violetvivirand/ca78fdf18a52d60bcc921fd612f38ab9

The Map of Kaohsiung, Taiwan: http://bl.ocks.org/violetvivirand/f39da85441b08e218422587d88cf86ae

Visualização dos Dados de Assassinatos de LGBT no Estado de São Paulo em 2015

aTree

Chicago

city

trees

D3 Tree

Pokemon

Canada

Bonfire

Treemap

Voronoi Diagram with Force Directed Nodes and Delaunay Links

MapTable: GDP by countries - legend, title, tooltip, scaled color for countries

rivers

Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot

Animated gradient - Minard's chart of Napoleon's Russia campaign

viSFest

D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3

dots1

Slander

Argyle

Adams

Iris

triangular tesselation of Mercator projected on a globe w/ d3.carto.map

Hexagonal Grid: how do you find which hexagon a point is in?

Barley

MapTable: Global Airport by Countries - +6000 rows, Log scale for country colors, tooltip

MapTable: Global Airport Markers with filters - +6000 rows, markers grouped by city, tooltip

MapTable: Basic with Map, Filters and Table - minimal options

Linear SVG Gradient - A hexagonal SOM heatmap with color legend

MSAN 622, Project 1 (Part 2) - 2012 U.S. Presidential Elections - Voting trends

Barley

wk7

Decay

K-Hole

Modularity and Re-use (and the always omitted, more important concept: combinatoriality)

LAP-JV

Travelling salesman with t-SNE (in 1 dimension and on a US map)

Travelling salesperson with t-SNE (in 1 dimension and on a world map)

t-SNE with Levenshtein distances, colored by K-means (work in progress)

Capacity Constrained Point Distribution on Data (line chart)

Bracket

Easing

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

slav

gaz_ukr

Sankey

Treemap

SiLK V

SiLK IV

SiLK II

SiLK I

Leaflet demo to use autocompletion with French GeoAPI and Leaflet.js library http://bl.ocks.org/ThomasG77/0b99013795f76699c5c9a0d7daf4411e

Hello

Voronoï playground : interactive weighted Voronoï study

trees

19 - Interactive text rotation with d3.jsHTML input and multiple d3.js objects

Spain

rect()

A single d3.js V4 chart with 'small multiples' along single categorical x-axis

Todos

Blobby

This example shows how to record HTML5 Video Player usage stats with Keen IO. Make sure to include your Keen IO Project ID and Write Key. If you don't have a Keen IO account, create one here for free: http://keen.io/signup

This example shows how to record VideoJS usage stats with Keen IO. Make sure to include your Keen IO Project ID and Write Key. If you don't have a Keen IO account, create one here for free: http://keen.io/signup

Multiseries Line Chart: US Unemployment by Occupation and/or Industry

A simple walk-though of building sliced concentric arcs using d3.v4.

Exported from Popcode. Click to import: https://popcode.org/?gist=e8e86b73d7a60aad41de054076460d2a

d3 yoga

Interactive contour maps of surface temperature anomalies in 2016

Visual explanation of the importance of examining your data before trying to predict / run an algorithm.

Linear SVG Gradient - Traffic accidents per Day & Hour combination

Parsing

Force-Directed Graph with Multiple Labelled Edges between Nodes

Tetrahedral Gnomonic projection, continental Earth (obsolete) [UNLISTED]

Entropy

mundo

Voronoï playground: Voronoï transitioning thanks to weighted Voronoï

MakeOver Monday, 2017, w29 - White House Salaries - iteration 2

Transcription collection from Inscription, distribution through time

Nadieh Bremer's Scatterplot with Voronoi - ported to d3.v4, and no SVG overlay

Argyle

final

HW 4

img-svg

sub2

feature

final

Buttons Controlling Color of Box: Using form elements to control DOM with D3

Buttons Controlling Color: Using form elements to control DOM, with D3

Argyle

Entropy

Loading external GeoJSON (Promise Method): Boilerplate

ThreeJS

treemap

ES2015 Voronoi Scatterplot with bootstrap-native popover tooltip

Voronoï playground : interactive Voronoï transitioning thanks to weighted Voronoï

Triangles, Hover the mouse over the canvas with animation frames

Link

Chord diagram - Switching behavior between phone brands of the Dutch

M1 - Your first Web page // source http://jsbin.com/yosoqeq

Wind barbs from a projected GeoTIFF & JavaScript libraries

Calculating the relative angle difference between two vectors

Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations

KCMOMVA

Stretched Chord - Step 1 - How to set up a Chord Diagram matrix to show Flows

Swizzle

Entropy

rCharts + factorAnalytics | french/fama & frazzini/pedersen

Bubbles

BTV 1894 tiles: Sanborn-Perris Map Co. Burlington Vermont (Chittenden County) Nov. 1894. New York: Sanborn-Perris Map Co., Ltd., 1894. Courtesy of Special Collections, University of Vermont.

ES2015 Voronoi Scatterplot with bootstrap-native popover tooltip

Clock based on the Degrees, Minutes, and Seconds where the sun is overhead.

Treemap

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

Treemap

Metis Unemployment Rate Bar Chart Nesting and Labels Example

Interactive Website: Push Menu // source http://jsbin.com/fuzekotepi

weather

sla-training_session2:async events. Actions on feature click

ColorBrewer sequential single hue scales vs. d3 interpolators.

An online tool for interactive teaching of network visualization and representation principles.

Understanding D3.js Force Layout - 3: Seeing a Layout in Action

Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3

Plasma

Bonne

MACD

badge

Entropy

Boids

hample2

vOwvpY

Loop

WRjaGw

data

Relation Between Income And Health Expectancy In Different Countries with Responding to Resize

Relation Between Income And Health Expectancy In Different Countries with highlight

Relation Between Income And Health Expectancy In Different Countries

line

face

Income Deprivation Affecting Children (IDAC) Index map, West London

Interactive Donut Charts - http://bl.ocks.org/erichoco/6694616

Weapon of Choice for Terrorist Incidents by Decade : 1970 - 2009

Distribution of earnings for City of Boston Employees in 2016

International tourist arrivals by world region since 1950 (Millions)

Run a race in every town in Connecticut: "elusive" races

GazeMap

Responding to Resize-Perception of corruption by institution, global aggregate, 2013

Summary-Percentage of electricity produced from nuclear sources per year

Percentage of electricity produced from nuclear sources per year

D3 - Bar chart, multiple datasets, using slider (Data: Number of roadside breath tests in UK per month)

D3 - Force simulation, curved weighted links (Data: Welsh Assembly Twitter Connections)

D3 - Donut chart with labels and connectors (Data: random teaching evaluation survey results)

D3 + Leaflet - Map overlaid with scaled point data (Data: Empty properties in Cardiff postcodes)

D3 forces simulation with curved weighted edges (Data: Twitter mentions Welsh Assembly Members)

D3 force simulation, curved edges and hover interaction (Data: Twitter mentions between members of the Welsh Assembly)

D3 force network with curved edges (Data: Twitter relationships in the Welsh Assembly)

D3 force simulation with hover (Data: Non-mutual Twitter connections in Welsh Assembly)

D3 force simulation with hover (Data: Twitter connections in Welsh Assembly)

Scatterplot with scales, axes and transitions (Data: randomly generated)

D3 barchart with axes, scales and transitions (Data: randomly generated)

D3 Barchart, multiple datasets, updating on select (Data: breathalyser test counts per month)

Using D3 to generate webpage content (Data: randomly generated)

Line plot with mouse-over interaction (Data: UK Unemployment Rate)

MossViz

D3.js zoomable sunburst with breadcrumb navigation and labels, alasql/JSON, end-node hyperlinks

Spin

final

An online tool for interactive teaching of network visualization and representation principles.

Jasmine - Unit Test Promises Jasmine - Unit Test Promises // source http://jsbin.com/zulazo

Jasmine - Unit Test Controller Jasmine - Unit Test Controller // source http://jsbin.com/qijeyi

Example

car

glass

sequence explorer - with events not connected to the next one

opgave

Cases

Bipartite graph of tracking traffic between 28 sites and 26 trackers

Curlies

[unlisted] Foreign born population in Canada, selected regions

Playground made to explore d3-geo's map fit and clip capabilities

Twirl

lab5

d3 fmm

Nodes

TP5

JS Bin dog clicker premium version // source https://jsbin.com/nedehut

Congressional Map with variable length candidate list (zoom/pan)

Nodes

Essay

TP3-p1

Mosaic3

Mosaic

Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations

10x

words

Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot

problem

Voronoi Diagram with Force Directed Nodes and Delaunay Links

Export a <table> to Excel - http://bl.ocks.org/insin/1031969

Avenger

Clock

Node-link polar layout with centrality (weighted eigenvector)

try1

D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3

Trends of political views by birth year in South Korea 2003 - 2016

finalV

profile

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

boxplot

Org

#MapboxGL / Symbologie deux variables (graduation et extrusion 3D)

#Leaflet / Ajouter des marqueurs (interactivité + photo)

Voronoi

tp 5

Right-angle phylograms and circular dendrograms with d3. To preview see http://bl.ocks.org/kueda/1036776

Rainbow

Melb

Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations

dsdsds

Stretched chord based on Visual cinnamon example (PHS II data)

drag

wordart

Nadieh Bremer's Scatterplot with Voronoi - ported to d3.v4, and no SVG overlay

Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations

Adjacency Matrix Layouthttp://bl.ocks.org/willzjc/ba989b33938df5268f74b24b9df53d6a/03d2b1973d14821aaf5de66273cc96219d73d3ee

d3.v4 collapsible force zoomable draggable radial tree using svg

D3 v3 cumulative time-series line chart showing gaps in data

Force Layout with Voronoi Cells and Add/Remove Node functionality

Trends of political views by birth year in South Korea 2003 - 2016

Chord I

JavaScript D3: Arc tween transitions using attrTween and attr methods

2017: Stretched Chord Diagram - Start Academiejaar ICTS Servicepunt

Experiment for flexbox table bottom of page JS Bin// source https://jsbin.com/luwodin

Risk

Artículos publicados sobre: CFK, Macri y Lavagna (fuente: GoogleNews)

Vega-lite: Stacked bar chart of US Army Infantry Casualties of Vietnam War

heatmap

Composing multiple forces and constraints with Random Vertex Sampling

Linear-time force-directed graph layouts with random vertex sampling

Sky

Sphere

small multiples plot of JGB Yields from Japanese MOF using r, clickme, and d3

initial sketch of jgb yields small multiples with yield curve

Voronoï <-> Voronoï treemap transition with flubber

Multivariate Data Exploration with Navio: US Medical Data Breaches

Voronoï playground: animating addition/removing of data

Popout

d3.json

Automatically Finding Better Force Directed Layout Parameters

Line graph over time with multiple data points using SVG and d3.js

state diagram editor example based on (https://gist.github.com/lgersman/5311083)

Data Visualization with Elasticsearch Aggregations and D3 (Tutorial)

Understanding D3.js Force Layout - 1: The Simplest Possible Graph

Sample trendline and linear, polynomial, exponential, logarithmic, and power regression analysis using regression.js

Leaflet.Spin standalone (similar to official https://github.com/makinacorpus/Leaflet.Spin but use only CDNs)

D3 Example: Processing a nested json data structure with subsections

[separate SVG boxes ] Update speed based on number of SVG elements in viewBox

Update speed based on length of an unrelated static path object

NetLogo Fast Bureaucrats model exploring self-organized-criticality (Java Applet).

showcase non-integer pixel sizes reported by FireFox (and how mootools struggles with those)

A simple excerpt filter for use with Jekyll. Perhaps there are better ways but I couldn't find anything suitable. It extracts post content in between "" and "". Change the excerpt delimiters to suit your needs.

Generate excerpt content in Jekyll for use on Gihub pages. This extracts the post content within the '' and '' comment tags.

locale semi-agnostic string to float conversion [JavaScript]

Graph of Languages Properties Relation by Implication Search on Terraling

D3 PJAX (& execute JS loaded through the d3.html() request as well)

d3.js: show tooltip in absolutely positioned DIV, which position is calculated taking screen size+scroll into consideration

svg -> foreign object -> iframe to load and render arbitrary html inside SVG (based on Matt Finkle article)

d3.layout.force3d (a quick hack to get force layout into the third dimension)

SVG browser compatibility tables, c/o Jeff Schiller, http://www.codedread.com/svg-support-table.html

State Heap Map - "markers" Mode - Using the Google GeoChart API (SVG Rendered)

Wrap an iPhone portrait screenshot in an iPhone via http://bit.ly/iphoneshot#http://i.imgur.com/MwnZF.png

Example for StackOverflow question: Map custom value field to x value when using a stacked layout.

Inertia

HTML5 Canvas path benchmark ('source-over' composition mode)

VTIrene

d3.js: axes examples (scientific, classical) with constant and adjusting subtick counts

d3.js: using tree layout for graphs which have nodes with multiple 'parents'

Driver and Pedestrian Fatalities in the US, 2010 from NHTSA. Pedestrian in blue, motorist in red.

JavaScript: a state-machine-based lexer + recursive descent (LL(k)) grammar parser + abstract syntax tree (AST) + generator

Commute progress tracker prototype - http://codepen.io/johan/pen/fujzI - This is a work in progress. Next few steps:* render time arcs of all discrete transit steps, angle by duration* render space arcs of all discrete transit steps, angle by duration, ..

This is the iPhone Messages app created in full CSS. I use this on my website www.memebro.com. To see the full features visit http://www.memebro.com

Sly

Faux-3D

Small example showing D3 data with and without a key function. D3 takes a second argument to the data() method, a function that returns a join key for each data element passed in. Without this, it assumes that the array index and not the array element are important. I had been passing in three-element arrays, and D3 assumed that I was updating array values in-place rather than attempting to introduce new ones. This example shows D3's set behavior with and without the use of a key function. The visible results are the same in both cases, but the second one (by value) adds and removes many more div elements than the first (by index). The first version might be used to update the heights of bars in a bar chart in-place, while the second might be used to animate the addition and removal of bars.

The HTML, CSS and JS from my blog entry An iOS5 Ready Native Web App Template http://www.bitwit.ca/blog/an-ios5-ready-native-web-app-template/

A CodePen by Seth Broweleit. Favorited Animation - Animation of items when favorited.

Math

Demonstration of d3.js force directed layout with fixed x-values.

improved state diagram editor based on https://gist.github.com/lgersman/5311202 featuring curvy connections with helper points

forked from Mike Bostock to begin d3 replacement for PerformanceSummary

Currencies Line Chart from R to gridster-enabled d3 using clickme

A CodePen by cemoulto. Smooth Gradient Backgrounds - Six of my favorite pure CSS smooth gradient background.

A CodePen by suffick. Tear-able Cloth - Javascript cloth simulation.

Color World: Collect data from Google Form and insert into CartoDB

BIS Derivative Data using Mike Bostock's stacked to multiple bar

attrTween in a Transition to Move an Element Using a Function

TEST4

rCharts + jQuery datatables | Infinite Scroll & Adjust Width

Does github work as a geodata server? Trying a hosted topojson called by URL to a gist. Cross-domain experimentation. UPDATE: THIS DOES NOT WORK :(

Github as a geodata server, take 4: Success with the CRUD API

BulleT: a variant based on mbostock's bullet with Miso's d3.chart.js

Likert chart: a d3.chart.js answer to Ann Emery's Dataviz Challenge #5

Voronoi-based point picker (experiment inverting the draw and clip paths)

Illustrate embedding geojson/topojson geometry into a google maps overlay using d3.geo.projection.

Testing

A simple test to check when d3 calls enter and update functions.

Circles

BabyNames NZ - Remix of http://open.mashblock.co.nz/nz-baby-names/

Voronoi

Try 3

A toy for playing with the force-directed layout algorithm's parameters.

Hexagonal cartogram of electorate results from 2011 New Zealand election.

puntos

Small test of D3 API used to map track data from a geojson.

Income per capita in poor countries, the interactive version

Javascript autolist with search - Online at [Pen](http://codepen.io/dkdndes/pen/FyqEz)

Leaflet/Mapbox.js GeoJSON with Google Static Chart API in the popup

Mapbox.js GeoJSON markers with Google Static Chart API Popups

円弧のサンプル

二次ベジェ曲線

三次ベジェ曲線

Model of Territory Forecast data flow from sql server base tables to Excel file

What per cent of people per African country use the Internet?

Clock

What per cent of people per North American country use the Internet?

CMYK

Tootals

example in response to rCharts issue #381 ; correlation plot with dimplejs

bar correlation plot example for rCharts issue 381 using dimplejs

人型グラフ

gronked

Commonwealth Stadium - Alternative Configuration, 1973 map w/ slider

How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements

Exploring Voronoi polygons, Delaunay triangles, and circumcircles

Clock

Diferencia porcentual votos positivos al FPV entre PASO 2011 y 2015 — Por provincia

I don't know how I managed to wipe out the ability to select text in this map, but I have. Try clicking a country, then highlighting the "Policies and Interventions" text. Line 130 in d3_map.js seems to be the culprit. Gold star to anyone who can help get to the bottom of this.

d3.js treemap of R htmlwidgets using d3treeR, treemap, dplyr

example for Stack Overflow post about nested d3.js json hierarchy in R

R barley dot plot example from lattice as a rcdimple htmlwidget

networkD3 experiments with reusable d3.chart hierarchical layouts

svg snippet from post http://timelyportfolio.blogspot.com/2014/10/reponsive-svg-in-your-rstudio-browser.html

Concurrent transitions: make fountain or popcorn with circles

Text on an Arc - Animal Donut Slices - Flipped & Centered Arc Labels

Wait Spinner 1a - http://bl.ocks.org/krsanford/raw/05834142b2d422ae6c5c/

d3-02

d3-01

Basic mapbox gl js map with sorta data-drive styling and interactivity

Median household income vs. overall population by Oregon county, 2013

d302

d301

d303

derby-standalone example. inserting derby templates into an otherwise native html page.

example loading multiple layers from cartodb in a leaflet map

población por provincia y departamento (Censo 2010, Google Treemap)

Cambio de posición entre Provincias (Población, Censo 2001-2010)

A long-scroller page with a map that doesn't scroll-zoom until 3 seconds after the first mouseover, at which point a focus animation indicates it will scroll-zoom.

Disable Scrollwheel zoom for map until 3 seconds after a user hovers over it (for those endless-scroller blog posts)

One-handled #d3js brush, as magnitude selector on a data distribution

hot-pie

barp

D3.js: Synchronously animating multiple paths in a multi-series line chart

y=mx+b

Voronoi

Seismic Ratings and Collapse Probabilities of California Hospitals

Stick your repo everywhere. Add the script and add you widgie

Beautiful Edge Type - Best webfonts by Adobe (free web fonts, no account) powered by Typekut (paid/ account required)

Grab a Markdown file and shove that fucker inside a styled up HTML file.

GET SOCIAL 🙌 ... all my profiles links, cos its all about me you know 😉

My read me file md to html for iOS7 CSS UI kit on Github From http://roachhd.github.io/ios7-css-ui/

slinky

bug-zap

gcd-viz

squares

Drag

Zoom

Based adaptation of Jfire.io animation, for teaching purposes: more difficult

Stripped adaptation of Jfire.io animation, for teaching purposes

PI Calculation with webworkers, and "pseudo-profiling"

都道府県別人口

Chord Gradients - Final example - Avenger Movie Collaborations

hexbin

Scatter Plot and Animated Transition (Visual Implementation 3)

test

D3 test

VI3

VI2

VI1

wk4

VI3

VI2

Circle

Clock

sequences sunburst with alternate data and adaptive breadcrumb and legend

Chord Gradients - Final example - Avenger Movie Collaborations

VI2

Share of minutes played broken down by nationality, across Premier League clubs

Share of minutes played broken down by nationality, across Premier League seasons

dance

Visualisering af statistisk usikkerhed i Megafon-måling 27/11-14

Sales of Alcohol and Tobacco vs. pharmaceutical, medical and toiletry products (1989 - 2014)

test

VI2

VI3

VI4

wk5

scale

VI4

Transitioning a line chart, but with data bound to the path element

Variable width bar chart with matching, data driven, variable width wordwrap

wk6

Using the elbow method to determine the optimal number of clusters for k-means clustering

Halos

Top 50 Hollywood films released from 2007-2011, budget($m) vs. audience ratings(%)

Scatterplot showing relationship of unemployment rate to non contributive pensions in Catalonia for the period 2000 to 2012.

Scatterplot of registered unemployment to non contributive pensions with labels

Proporcio de pensions no contributives entre persones amb 65 anys o mes a les Comarques de Catalunya.

Top Organizational Donors to US Campaigns, 2014 Election Cycle

Registered crime cases in Belarus vs. population by region (2013)

LOCALE

UK Immigration: Daily Mail Headlines (KnightD32015 Module 6) v1

Doctor Who Earth Time Travel Journeys: Plotting Negative Values (PRE-SORTED)

MODULE3 Exercise: Water Consumption In The New York City / Data Bars

Ontario College Total Operating Grants by Full Time Student Population

Line Chart: Ontario Student Repayable Debt by Institution, 2004 - 2013

Cologne Pics - Takes names of city quarters and displays recently posted instagram pics tagged with city quaters name.

Life expectancy at birth - Module 6 exercise [multi-linechart]

Drawing markers from an array/json and attaching infowindows to them

Difference between D3 and Google Data layer for geoJSON projection

Percentage of people using the internet in the Americas 2004 - 2013

Knight Datavis Class Assignment 5 - data file has added column from wikipedia, 2 columns have been slightly transformed to be numbers

United States Meat and Fish/Shellfish Imports(Module 6 Exercise)

Test 7

U.S. Food Import Growth Rates Scatter plot Test (Module 5 exercise)

Dumping ground: Latin Modern subsetted to just 0-9 digits, see https://github.com/cben/mathdown/issues/95

Availability of your favorite fruits over the years (US, 1970-2012)

Rwanda and Democratic Republic of the Congo life expectancy at birth life expectancy at birth, 1960-2013

Module 3: Proportion of seats held by women in national parliaments

Module 6 - Circles, Lines, Areas, Transformations, Scale changes, and User date range

d3 pareto histogram example with cumulative percentage line (e.g. replica of Excel histogram with pareto and cumulative percentage line options via the data analysis toolpak addon)

Histogram Overlaid with CDF line to replicate Excel functionality

NUMBER OF RUSSIAN "SAT" SUBJECT TESTS PARTICIPANTS IN 2013

Percentage of perfect students at Russian "SAT" subjects test in 2013

Hover over data points for tooltip built with transition and div

a1 test

US chocolate imports (and why must this title text be so bloody big?)

Nombre de femmes élues à l'Assemblée nationale

Syria

Linear representation of the women seats in parliament in Cuba and in the USA

Scatterplot of the gender balance in parliaments and of the expected years of school attended by girls.

Barchart- Gender balance in the parliaments of the world in 2013

modul5

modul4

example

Worldwide Measels Immunization Coverage among 1 year olds Scatterplot

A horizontal bar chart showing 2010-2012 median incomes for over 173 college majors in the United States, in USD.

Employment / Salary Data by College Major. Currently sorted by unemployment rate - descending order.

Diferencia porcentual votos positivos al FPV entre PASO 2011 y 2015 — Por provincia

Bicycle and car traffic in the East Midlands in 2007 and 2011

Comparison of two-wheeled traffic counts in the East Midlands from 2007 to 2011 with scaled colours

waves

Multiline graph of uranium & ore concentrate production in metric tons: yrs 2000-2010.

Comparison of Uranium ore/concentrate production: a look at years 2000 and 2010

hcc horiz 16 | Adjust left side padding, widen the SVG, change rect hover color to blue

Global Hepatitis B immunization coverage among 1-year-olds(%)

Module 5: Tree rings and climate change (southern hemisphere)

Robot

VA_Test

DVD3 Module 6 Assignment. Comparing more than one set of data on the Y-axis

DVD3 Module 4 Assignment. Revised Bar Graph, styled and axied.

DVD3 Module 5 Assignment. Adding second data domain and refiguring Bar Graph as a Scatter Plot.

Module 5 exercise: Free lunch and non-white population in Palm Beach County Schools

Module 6 exercise: Free lunch and non-white population in Palm Beach County Schools

Women education and women representation in parliament worldwide

CO2 emissions visualisation for one year (Horizontal bar graph with vertical axis labeling)

Chihuahua population of the four counties with most inhabitants

homework 2 - stacked area charts - points per game 5 players

D3JS Course Week 2 - Stripped Down (Fewer Rows) Data File this time

Fairfax County Hispanic pop by origin, ACS 2009-13, improved

#KnightD3 - Exercise Module 5: Scatterplot, transitions and delays

How many businesses and employees per sector in San Francisco?

Scatterplot of drug prison sentences vs. all prison sentences

Aggregate information about homelessness in the USA by state over time + random gray dots.

D3 Trail Layout animated map with icon and using coordinates

The Trees in Champaign by Number of Specimens (y axis) and Average Diameter (x axis)

Module 5: Homeownership Rates vs. Median Income in Large US Metro Areas, 2013

test

Bar graph : The number of CCTV cameras by region in Seoul, Korea

Animated Stacked Bar Chart - Accident Statistics in India (2009 - 2012)

U.S. Suicides by State for 15-24 year-olds, Time Series with highlights

Mod4 #3

Mod4 #2

ex 5 - lobbying costs and number of people lobbying - with transitions

Test

Module 4 Exercise: Corruption Perception Index Scores by Region

Module 6 - Time series chart of per-capita greenhouse gas emissions

Woods and trees and all that. My final submission for Exercise 5

Animate path (with pollution values) on Leaflet map using D3

Example of Google Places Library (get place details if you have place ID)

cartodb js > cartocss bug? This file will display the cartodb layer without labels. Uncomment lines 71-72 and comment out line 73 to see that the layer no longer draws. This cartocss is the same that I used in the CartoDB Dashboard.

mfa dt bootcamp web class: Floats 3; clearing with a subsequent element or clearfix

mfa dt bootcamp web class: Floats 2, child inheritance and clearing

mfa dt bootcamp web class css positioning example 8: position fixed

mfa dt bootcamp web class css positioning example 5: absolute with Children

mfa dt bootcamp web class css positioning example 6: stretching block elements using position absolute & offset

mfa dt bootcamp web class css positioning example 3: relative with child

mfa dt bootcamp web class css positioning example 2: relative

mfa dt bootcamp web class css positioning example 7: using absolute positioning to make a two column layout

Opportunity History Graph // source http://jsbin.com/bopewi

Opportunity Amount graph // source http://jsbin.com/tarujivagusu

network

maniac

Sky

Just to be clear, the 0.33 is part of the 0.4, which is part of the 1.2, which is part of the 25.

Clock

Emoji Timeline for Cultural References in Murakami v4 update

Nadieh Bremer's Scatterplot with Voronoi - ported to d3.v4, and no SVG overlay

mtDNA

Force-Directed Graph (modificación de datos, español)

d3intro

sliders

How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements

Tarea3

house

Tarea3

testing on jsbin [mocha template] // source http://jsbin.com/kifeki

birds

myHouse

example loading multiple layers from cartodb in a leaflet map

Moon

CanvasGrid V2 - Dynamic Data - 1000000 Rows & 100 Columns

Tarea3

Chord Gradients - Final example - Avenger Movie Collaborations

Adams

train

D3 drag and drop: manually reorder rows and columns of a matrix

Tarea4

Japan

Voronoi

Bonus

JS Bin Card group with vertical alignment // source https://jsbin.com/powosu

JS Bin Site header using flexbox // source https://jsbin.com/rekilad

Heatmap

venn

Transititioning Sunburst for Visualizing Sequences (In Progress)

ringforce, circumscribing rings in a voronoi triangles diagram of heavy seeds moving in a contained field area

ringforce i, circumscribing rings in a voronoi triangles diagram of heavy seeds moving in a contained field area

the big listener, irritating game but needed template to probe #d3js transitions coordinating through unwired #redux store

d3lanes

X-Ray

A single selection from http://a.singlediv.com/ by Lynn Fisher

geosnap

D3 drag and drop: manually reorder rows and columns of a matrix

knn

HighChart - line chart of the tweet sentiment score time series

NVD3

VI8

VI9

D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3

Poulp

Dots for rats in 2016 on a leaflet map, with generated bios and pics from flickr

A rudimentary GeoJSON to SVG converter (with doohickeys to play with projections)

JS Bin polar rose curves // source http://jsbin.com/jivufu

ytdn

states

Table2

VI8 P3a

arc

Jamey McCabe - Udacity Nanodegree Data Visualization Problem Set 2 - Improve a Data Visualization

Tooltip

Test of a browser's ability to display the Terminus font

VI9

VI8

Clock

Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap

spheres

proj2

Demo1

Demo2

Treemap

Como votaran los municipios de acuerdo al grado de afectacion

Quienes votaron por el SI por el NO y quienes se abstuvieron

MPDH

Versor Dragging - d3 & three.js running in sync / moving the camera [UNLISTED]

Mapbox GL in a Tableau Dashboard// source http://jsbin.com/zoqosac

Voronoï playground : interactive weighted Voronoï study III (Multiple sites)

Voronoï playground : interactive weighted Voronoï study II

Voronoï playground : interactive weighted Voronoï study

china

ATO3

ATO2

ATO

ATO2

words

gaz_map

words2

level

My CV

A single d3.js V4 chart with 'small multiples' along single categorical x-axis

Crossfilter Examples Jazoon Crossfilter example 3: Custom reduce functions // source http://jsbin.com/pubaz

Crossfilter Examples Jazoon Crossfilter example 1: Dimensions // source http://jsbin.com/biruro

Palabras con más frecuencia en los titulares de los diarios de Argentina (implementado con D3plus, treemap)

reloj

Gauge

galaxy

Blinken

Bonus

balde

Splitting nodes - force directed graph custom forces example

Boxes

Clock

Counter

Pizza

Modifying a Force Layout with Voronoi Polygons for Dragging and Mouseover of Grouped Elements

This example shows how to record Youtube iFrame Player usage stats with Keen IO. Make sure to include your Keen IO Project ID and Write Key. If you don't have a Keen IO account, create one here for free: http://keen.io/signup

Exported from Popcode. Click to import: https://popcode.org/?gist=dd64201ea3fcffbd56be4cc71bd9a0cc

d3.tsv

It's been a good 17 years for Californians who kind-of-don't-really care about sports

HexCut

test

Test 4

Test 3

New

test1

LAP-JV

visualizing map distortion d3v4 (with Bertin and a forked d3-geo for inverse) [UNLISTED]

for hw3

mundo

marnoba

BIS Derivative Data using Mike Bostock's stacked to multiple bar

May 18

May 6

May 5

sliders

Calculating the relative angle difference between two vectors

Radar

Anscombe's Quartet with simple-statistics and d3js v4 -

Lol

genes

stack

House

How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements

OLS

Test

D3.js

lawfare

idGAF

Class13

Class10

Class 3

1/31/17

Regression Line for education levels correlation between women and men (18+ years old)

PCA

map USA

Global Corporate Tax Rates from 2006 to 2016: http://bl.ocks.org/violetvivirand/88867d3fb2f50d13e00a0113280848b4

Tarea3

skully

Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap

ch1ex4b

ch1ex3

ch1ex2

ch1ex4a

test

Japan

Sankey

LAP-JV

[1st Iteration] Bar Chart: Top 100 : Best Performing O'level Schools in Uganda

[COMPLETE] Immunization Coverage in Uganda 2016 (Using D3.js)

fresh

Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

mypie

final

radar

Franco's military court proceedings victims in Catalonia

Population density in Equatorial Guinea, using geoMercatorEquatorialGuinea projection

Canvas & svg-path-properties Point-Along-Path Interpolation

enter

Projet

TP5

2012 Presidential Election: Percentage Democratic and Polling Places by County

2016 Presidential Election: Percentage Democratic and Polling Places by County

2016 Presidential Election: Highest Number of Polling Center Closures by County

Exploring Common Data Sets in v4: Iris Scatterplot (my take on a mbostock example)

Dynamic Labels: Add and Remove Data in v4 (sample dataset from Scott Murray's excellent book Interactive Data Visualization for the Web)

Completely CSS: Custom checkboxes, radio buttons and select boxes

kEsJe

animacy

Sheet1

heatmap

Makeover Monday - YouTube ratings - scatter with convex hull (linear scale)

Shaker

PI Calculation with webworkers, and "pseudo-profiling"

house

Easing

zoomable tile map with multiple paths and points (Iditarod routes)

谷歌形式的克隆

CRUD

Dance

Untitled benchmark (http://jsbench.github.io/#99df5b03760cc6886a09) #jsbench #jsperf

Make a Word Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/ // source http://jsbin.com/zamugul

doqywd

PPNXBG

cached array length (http://jsbench.github.io/#584b5d37f7fcf8a14b1102b6ed5610cc) #jsbench #jsperf

Instagram Gallery: A demo app build with Storify API and Node.js http://storify.com/storifydev/instagram-gallery/

<card-swiper> custom element - demonstrates the usage of the v1 polyfills.

basic webpack angularjs example, based on phonecatApp tutorial (phonecat)

rOdYKX

D3 Zoom

An example of drawing intersections of a cubic bezier curve and an elliptic arc

An example for drawing an arrowhead at the intersection of a bezier curve and a circle using d3.js

SVG path getTotalLength() in Firefox returns 0 or a wrong large value for some cubic bezier segments. try http://bl.ocks.org/hnakamur/f203e1cb6adedb56eca8

Errors

Do robots dream of electric sheep? // source http://jsbin.com/kohojemawa

Exported from Popcode. Click to import: https://popcode.org/?gist=0dc4428b629c9725a7318e054ff60a32

#CSS - The Great Tree of HTML// source http://jsbin.com/nehat/1

Perímetros de Contención UrbanaContención CONAVI// source http://jsbin.com/jegafe

Aggregated content from clustered features II - Average Population

A visualization to explore timeseries of MIT wifi network data.

PreAmp

qEaKpa

RSI

Volume

OHLC

Furuti cubic projection #1 (Reichard) with d3-geo/clip [UNLISTED]

stream

hample2

hample1

bo2017

BarChart with draggable bars to input/adjust data values (Horizontal + Vertical)

d3v4: Auswertung der Bundestagswahl 2017 für Bonn (Parteivergleich)

CELSA

Celsa

COPAIBA

VLLdWK

pie

tstat2

Tstat

oranges

pie

Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap

d3.v4 collapsible force zoomable draggable radial tree using svg

test

Number of People in major countries and regions employed in agriculture in 2007

Popout

History's largest empires by maximum land area (millions km2)

人型グラフ

Early Warning Project, Risk Assessment Visualization, July 25 2017

动态交互柱状图

Discrete vs continuous diverging scales with d3-scale-chromatic

Sankey

dash1

GazeMap

Perception of corruption by institution, global aggregate, 2013

fem

Animating with d3.timer - multiple circles, simple collision detection

D3 - Line chart, slider to choose year (Data: UK Unemployment rate)

smile

Wheel

Trend

Secreto

Separability and Interference: Encoding Using Both Size and Hue

CVCM

Tester

SVG browser compatibility tables, c/o Jeff Schiller, http://www.codedread.com/svg-support-table.html

Buttons Controlling Color of Box: Using form elements to control DOM with D3

NG - 1.2 model test NG - 1.2 model test // source http://jsbin.com/quzah

HTML - input type checkbox disabled HTML - input type checkbox disabled // source http://jsbin.com/boqeko/2

test

tets

test

物流漏斗图

frappe!

StackOverflow Help Request: Heatmap with Lasso and Dendogram

U.S. Airline Quality Scores (2016) U.S. Airline Quality Scores (2016) // source http://jsbin.com/lajovir

Discrete vs continuous sequential scales with d3-scale-chromatic

Discrete vs continuous diverging scales with d3-scale-chromatic

rYNRqm

anicube

Planets

donut

Peaks

rotate

Layout

1 try

TP4

Force Layout with Voronoi Cells and Add/Remove Node functionality

UI_01

Testing

Time Variation of Main Contributing Factors in the NYPD Vehicle Collisions Dataset

Run a race in every town in Connecticut: "elusive" races

Number of People in major countries and regions employed in agriculture in 2007

pie

d3 yoga

overlay

test

Make a Word Make-a-Word challenge for the Learners Guild Enrollment Game: https://learnathon.learnersguild.org/ // source http://jsbin.com/cebico

files

Tulp

.block

Outline for <text> and various experiments with it [II]

hw9_1

Flags

TP4

TP_4

CM4

Failure

Q4 2017

project

PROJECT

project

PROJECT

nut

Renju

GOMOKU

Renju

NYPD

iterate

Example

heeeyyy

Testing

closer

flags

ship2

ship

tp55

stream

tp3

Mega3

Mega2

Thing

Test

raPEmL

denise

Text on an Arc - Animal Donut Slices - Flipped & Centered Arc Labels

pyNXrp

MybMMz

Marvel

test

Tableau

Table

Clock

index

Variable width bar chart with matching, data driven, variable width wordwrap

script insertion and stack traces. jQuery’s magic is bad for debugging

Component with the SuitCSS conventions demo of a component using conventions of SuitCSS for component-based dev // source http://jsbin.com/lumeqa

map 3d

initial

ScriptEd Unit 5 Project: Calculator // source http://jsbin.com/kagexa

HW-9

(Solution) D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

Clock

owGqPv

vZRdgX

Drawing SVG Shapes with D3 Drawing Shapes w/ D3 - // source http://jsbin.com/kamik

Learn 1

D3_4_DS

JS Bin [Line Charts with SVG and D3add your bin description] // source http://jsbin.com/mekeki

test

BasicSM

boxplot

globe

city

Angular

Sandbox

Uncaught TypeError: Cannot read property 'length' of undefined

Canadian Inmate versus Ontario Minimum Wage changes over time

Org

Planets

Bubbles

treemap

Japan

Vzzdxa

chart 1

cluster

pieSum

basic_2

Cases

basic

Connect two elements / draw a path between two elements with SVG path (using jQuery)

Donut

test

I ♡ D3

Dot Map

voronoi regions limited with circle regions (with position transitions)

Grid

legend