IV4

100%

✓ Published0🌍 Public

Last edited Feb 17, 2016

Created on Feb 15, 2016

This block, forked from ChristosT’s VI3 example, presents two side-by-side D3.js visualizations: an animated scatterplot of gold prices (2005–2011) and a static stacked bar chart of U.S. wireless carrier market share. The scatterplot encodes time on the x-axis and price on the y-axis, with circles transitioning from the bottom to their mapped positions to emphasize the rising trend. The stacked bar chart uses area and color hue to represent the proportional shares of five carriers. Both are rendered with SVG and animation in d3.v3, with data from public sources and original code adapted from referenced examples.

AI-generated description

Christos Tsolakis

The scatterplot uses the y-coordinate as a position on a common scale to express magnitude(price) and the x-coordinate as spatial region channel to express identity (year). The difference of the proce throughout the years os cleary seen and thus discriminability is preserved.
- based on scatterplot d3 code from : http://bl.ocks.org/weiglemc/6185069
- dataset source http://www.nma.org/pdf/gold/his_gold_prices.pdf
The stacked barchart expresses the magnitude as area of each box and the identity as color hue. Discriminability is retained since the relative sizes betwwen the shares is effectively represented and easily distiguished.
- based on stack barchart from http://codepen.io/benlister/pen/bNeLQy
- data source http://www.statista.com/statistics/199359/market-share-of-wireless-carriers-in-the-us-by-subscriptions/

Live at http://bl.ocks.org/ChristosT/77ddbd1e08c11e18a0f7

R Language - Recreation

#Scatterplot
Time <-seq(2005,2011,1)
Price <-c(444.74,603.46,695.39,871.96,972.35,1224.53,1571.52)
plot(Time,Price,ylab="Price $/troy ounce",main="Price of Gold",pch=19,col="blue")

Scatterplot

#Stacked Barchart
A <- c(33,34,1,16,16)
L <- c("Verizon","AT&T","US Cellular","Sprint","T-Mobile")
title <- "Market share of wireless subscriptions in the U.S. for Q3 2015"
barplot(as.matrix(A),legend=L,width=0.7,xlim=c(0,1.5),col=c("blue","lightblue","orange","yellow","green"),main=title)

BarChart

forked from <a href='http://bl.ocks.org/ChristosT/'>ChristosT</a>'s block: <a href='http://bl.ocks.org/ChristosT/f73384946e17e4b1b46a'> CS 725 Information Visualization - VI3</a>

Similar vizzes

Loading thumbnail…

Fork of Responsive Scatter Plot

This example displays a scatter plot of annual gold prices, charting Date on the x-axis against USD on the y-axis. It uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render the axes. The SVG circles are appended using a data join with attributes for position and fill. The chart is styled with a custom background color and large tick labels via CSS.

Ttejasviteegala@my.unt.edu

73% match

Loading thumbnail…

fresh block

Four distinct D3.js v3 bar and scatter chart examples demonstrate incremental visualization techniques, from simple HTML div bars to an SVG scatterplot with axes. The code builds random datasets and renders rectangles, circles, and text labels with linear scales. A final interactive example uses click-triggered updates and animated transitions to modify chart values dynamically.

NN0taN3rd

72% match

Loading thumbnail…

scatterplot2

This animated scatter plot displays phone data, alternating the x-axis between Price and SalesVolume every two seconds to reveal different relationships in the dataset. Built with D3.js v7, it uses SVG circles with a fixed radius and steelblue fill, positioned via linear scales derived from the CSV data. The chart is constructed through a custom `createScatterPlot` function that leverages D3's `selectAll` and `join` for efficient DOM updates, while `setInterval` drives the periodic column switching animation.

Ppilliprathimarani@my.unt.edu

72% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes a scatter plot of gold-price data from a CSV file, animating between engine power and miles-per-gallon columns on a fixed axis. The visualization uses D3’s `csv` loader and a custom `scatterPlot` module, rendering SVG circles with a 5-pixel radius. A `setInterval` timer cycles the x-axis mapping every second, updating the chart via the plot function. The code demonstrates dynamic axis updates by re-invoking the plot with new accessors, while the y-value remains static, and the viewport dimensions are set to the window size.

NNanditha Reddy

71% match

Loading thumbnail…

http://stackoverflow.com/questions/32057842/d3-js-highlighting-stacked-bar-and-getting-selected-values/32079517#32079517

This example shows a stacked bar chart of sales data for PC, SmartPhone, and Software product categories across five years, where users can interactively change the stacking offset method (wiggle, zero, expand, silhouette) and the layer ordering (inside-out, default, reverse) via dropdown menus. Built with D3.js (version 3.5.6), the visualization uses the `d3.layout.stack` API to compute stacked values and dynamically updates the y-axis scale and grid lines when selections change. The chart is rendered as SVG with animated transitions for the axis rescaling, and the code leverages custom helper libraries from a gist, including `d3.ui.select` for the controls and `d3.cbPlot` for axis creation.

TThanaporn-sk

71% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru

71% match

Loading thumbnail…

TP3_Correction

This example presents a sequence of animated stock-price charts for Microsoft, Amazon, and IBM, cycling between area, multi-line, stacked, and streamgraph views. Built with D3 v4, it loads monthly price data from a CSV and uses `d3.nest()` to group values by company symbol, with `d3.area()` and `d3.line()` for the drawn shapes. An SVG canvas renders all charts, with timed transitions (`transition.duration`) and color-coded series via `d3.scaleOrdinal`. The animation loops automatically, highlighting how the same data can be reshaped dynamically across different visual encodings.

BBarbierJeremy

71% match

Loading thumbnail…

D3 Show Reel

This example animates ten years of monthly stock closing prices for four tech companies, seamlessly transitioning through a series of chart types—lines, horizons, areas, stacked areas, streamgraphs, overlapping areas, grouped bars, stacked bars, bars, and a donut. It uses D3 v3 with SVG and custom transitions, driven by `d3.svg.line`, `d3.svg.area`, and `d3.timer`. The data comes from a CSV file, and the visualization demonstrates D3’s ability to morph between representations without axes, prioritizing motion over information.

AAjayyy

71% match