Mrajyalakshmi

@Mrajyalakshmi·17 public vizzes

Week 10 - In Class Assignment

This interactive scatterplot displays college football quarterback statistics from the 2014 season. Using two dropdown menus, users can select which offensive attribute is plotted on the x and y axes, including passing yards, rushing touchdowns, and completion percentage. The visualization employs the D3.js version 3 library to render SVG elements, animating transitions between selections. Dots are color-coded by conference group (Big Five, Group of Five, or Independent), with mouseover tooltips revealing player names. The data originates from a CSV file loaded with `d3.csv`.

Mar 30, 2016

Loading thumbnail…

QB's - No Restriction

This visualization displays the relationship between rushing and passing touchdowns for college quarterbacks, with each dot colored by conference group (Big Five, Group of Five, or Independent). Using D3 v3, it plots data from a CSV file on a scatterplot with axes labeled "Rushing TDs" and "Passing TDs". The code uses `d3.csv` to load data, `d3.scale.linear` for axes, and `d3.svg.axis` for chart elements. A tooltip appears on mouseover, showing player details via `d3.select` and `.html` updates. The legend is generated with `colorbrewer.Set1[3]`, and the rendering is static SVG with animation-enabled transitions on hover.

Mar 24, 2016

Loading thumbnail…

Matrix View

This matrix view shows the adjacency relationships among U.S. states, with rows and columns representing individual states and colored cells indicating shared borders. The visualization supports reordering the matrix by state name, by connection count, or by geographic region, with animated transitions between these orderings. Hovering over a cell highlights the corresponding row and column labels. The code uses D3.js v2 with an ordinal scale for positioning, a linear scale for opacity, and SVG transitions to animate the reordering.

Mar 16, 2016

Loading thumbnail…

VI 7 Node Link

A force-directed node-link diagram displays the 48 contiguous U.S. states and the District of Columbia, with nodes colored by census region and links connecting states within the same region. Hovering over a node reveals its full name, while highlight interactions emphasize regional groupings. The visualization uses d3.layout.force, d3.scale.category10 for color encoding, and SVG rendering, with node and link elements positioned via tick event updates.

Mar 16, 2016

Loading thumbnail…

Visualization Implementation 5 (VI 5)

This example demonstrates the "get it right in black and white" rule of thumb using paired donut charts of mobile sales data for five companies. It first presents a color-coded chart where each company remains distinguishable when converted to grayscale, then shows a second chart with different colors that become indistinguishable in black-and-white. The visualizations are generated with R's `googleVis` package, specifically `gvisPieChart`, which creates interactive pie charts with a configurable `pieHole` for the donut effect, along with explicit color and slice offset options.

Feb 24, 2016

Loading thumbnail…

Scatter Plot

This scatter plot visualizes movie success by plotting gross collections against budgets, with each point’s size encoding gross revenue and its color representing MPAA rating (PG, PG-13, R). The chart uses D3 v3 with SVG rendering, including linear scales for axes, a sqrt scale for point radii, and a category10 color scale for categorical ratings. Hovering a point reveals a tooltip built with d3.tip showing the movie title and gross earnings. Data is loaded from a local TSV file using d3.tsv.

Feb 17, 2016

Loading thumbnail…

Scatter Plot

A scatter plot displays movie gross collections against budgets, with each point colored by MPAA rating and sized proportionally to gross earnings. The visualization uses D3 v3 with SVG rendering, including d3.svg.axis for axes, d3.scale.sqrt for point sizing, and d3.scale.category10 for color encoding. A d3-tip tooltip reveals movie title and gross on hover. Data originates from a tab-separated file listing movie attributes.

Feb 17, 2016

Loading thumbnail…

VI 4

This gallery example presents two distinct D3.js visualizations. The first is a stacked bar graph of women’s labor force participation by age group, using position on the X and Y axes for year and percentage, with color hue differentiating age categories and data sourced from the U.S. Department of Labor. The second is a scatter plot of movie success rates and MPAA ratings, where color hue encodes the rating and point size encodes gross collection, built with D3’s `d3.scale` and `d3.axis` APIs. Both charts are implemented using the `d3` library, with SVG rendering for marks like rects and circles.

Feb 17, 2016

Loading thumbnail…

fresh block

This stacked bar chart shows the percentage of women employed in the labor force, broken down by age group across three census years (1970, 1990, 2012). Each bar segment represents an age cohort, with color distinguishing between groups and magnitudes encoded through the vertical position and area of the rectangles. The visualization uses D3.js version 3.5.5 to create an SVG, employing `d3.scale.ordinal` for the x-axis years, `d3.scale.linear` for the y-axis percentages, and `d3.scale.category10` for color encoding. Data is loaded from a CSV file and rendered with axes and a legend.

Feb 17, 2016

Loading thumbnail…

fresh block

This bubble chart visualizes the relationship between a movie’s budget and its gross earnings, with point size encoding gross revenue in millions and color hue representing the MPAA rating (e.g., R, PG-13). The D3.js v3 code loads data from a TSV file, uses linear scales for both axes, and applies a square-root scale to map gross to radius. Interactive tooltips, provided by the d3-tip library, display the movie title and gross value on hover, while a categorical color scale distinguishes ratings in the SVG canvas.

Feb 17, 2016

Loading thumbnail…

fresh block

This visualization shows the changing percentage of women in the labor force across six age groups for three census years (1970, 1990, 2012). Each year is represented by a stacked horizontal bar, with color-coded segments for each age bracket. The chart uses D3’s ordinal and linear scales with `d3.svg.axis` for axes, and `d3.scale.category10()` for its color scheme. Data is loaded from a CSV file via `d3.csv`, and the SVG output is generated from a Blockbuilder.org template.

Feb 17, 2016

Loading thumbnail…

fresh block

A scatterplot shows movie budget versus gross earnings, with each circle’s size scaled to gross and color-coded by MPAA rating. The chart uses D3 v3 with SVG rendering, a categorical color scale for ratings, and a square-root size scale for gross. Hovering reveals a tooltip via d3-tip, while axes and legends are drawn with d3.svg.axis. Data is loaded from a TSV file containing movie titles, ratings, budgets, and grosses.

Feb 17, 2016

Loading thumbnail…

fresh block

A stacked bar chart displays the percentage of women in the US labor force across six age groups for the years 1970, 1990, and 2012. The chart uses a categorical color scale for age cohorts and a linear y-axis with percentage ticks. Built with D3 v3, the visualization loads data from a CSV file and renders as SVG, using ordinal and linear scales, axes, and series of rectangles grouped by year. A legend maps colors to age ranges.

Feb 17, 2016

Loading thumbnail…

Scatterplot

A scatterplot displays 50 randomly generated data points, mapping each point’s x- and y-coordinates against linear scales with axis tick marks. The SVG rendering, created with D3.js, uses a linear scale for both axes and a third linear scale to map y-values to circle radius (ranging from 2 to 5 pixels). The visualization is animated, as the dataset is regenerated with new random values each time the page loads, and the circles are drawn without transitions between states. The code explicitly uses D3’s `d3.scale.linear` and `d3.svg.axis` APIs to construct the plot.

Feb 10, 2016

Loading thumbnail…

Bar chart with value labels

This example shows a bar chart of 20 numeric values, with each bar colored on a green scale and its value labeled directly on top. The data is a fixed array of numbers embedded in the code. Using D3.js version 3, the chart is rendered as an SVG, with `d3.select` to append the SVG element and chained `.enter()` calls to create `rect` and `text` elements. Bar heights and colors derive from each value, while labels are centered using the `text-anchor` attribute.

Feb 3, 2016

Loading thumbnail…

In Class Work 2

This example explores football statistics through three visualizations created in R. It first presents a scatterplot matrix examining correlations between passing yards, passing touchdowns, passer rating, rushing yards, and rushing touchdowns, highlighting the minimal correlation between passing and rushing yards. A horizontal bar chart then displays passing yards per player, using the ggplot2 library’s `geom_bar` function with player conference encoded as fill color. Finally, it shows average interceptions per conference using `stat_summary` with the mean function, revealing differences in interception rates across groups. The data originates from a CSV file loaded via `read.csv`.

Feb 3, 2016

Loading thumbnail…

D3 Bar chart for random values

This example presents two bar charts of the same 25 random values. An R-generated image uses `barplot` with a cyan fill to display the dataset, while a D3.js version in `index.html` creates a dynamic bar chart by generating random numbers in a loop, binding them with `d3.selectAll("div").data()`, and styling each bar’s height with a custom scale. The D3 chart uses div elements with a teal background and inline height adjustments, while the R chart relies on the base graphics function. Both visualizations share the same data range but differ in implementation languages and rendering approaches.

Jan 31, 2016