Jerfaas

@Jerfaas·12 public vizzes

Massachusetts Retention w/ Menu and Interactive Color Legend

A scatter plot of Massachusetts school district retention data shows relationships between attendance metrics, where dropdown menus select the X, Y, and circle-size attributes, and an interactive color legend filters data by year. The visualization uses React with D3 v5 scales to map data to SVG circles, which include tooltips displaying X values. Hovering over the color legend dims unrelated years while highlighting the selected one, revealing how retention rates correlate across different school districts and time periods.

Apr 2, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This streamgraph shows the total number of persons of concern to UNHCR over time, grouped by country of origin, with each colored band representing a country. Using D3.js v4, it employs `d3.stack` with `d3.stackOffsetWiggle` and `d3.stackOrderInsideOut` to create the layered layout, and `d3.area` with `d3.curveBasis` for smoothed curves. Data from the UNHCR Population Statistics API is loaded via `d3.json`, and labels are positioned using the `d3-area-label` library. The visualization filters to countries with over one million total persons of concern and renders as an SVG.

Apr 2, 2020

Loading thumbnail…

Treemap from bl.ocks.org

A hierarchical treemap displays the flare dataset, showing nested file sizes and counts as colored, labeled rectangles. The visualization uses `d3.treemap` with the `d3.treemapResquarify` tile method, rendering SVG rectangles and text with mouse-over titles. Radio buttons switch between summing by file size and by node count, triggering a 750ms `transition` that animates rectangle positions and dimensions. D3 v4 and `d3.scaleOrdinal` with `d3.schemeCategory20` color the cells.

Apr 2, 2020

Loading thumbnail…

Scatter Plot with Color Menu

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which columns to map to the x-axis, y-axis, and color encoding through three dropdown menus built with a reusable D3 component. The scatter plot is rendered as SVG using D3 scales, axes, and animated transitions that grow circles from the center. A color legend, generated via a custom component, displays the categorical color scale. The visualization demonstrates dynamic data binding and reusable chart modules in D3 v5.

Apr 2, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, a classic dataset of flower measurements. Users can explore relationships between different attributes by using dropdown menus to select which variables appear on the x- and y-axes. The visualization is built with React and D3, using D3's `scaleLinear` for axis scaling and `extent` for domain calculation. Each data point is rendered as an SVG circle, with tooltips providing formatted values, and customizable axis labels update dynamically based on menu selections.

Apr 2, 2020

Loading thumbnail…

Firefly Earthquakes

Firefly Earthquakes plots global earthquake epicenters as glowing, firefly-like halos on a dark, inverted OpenLayers basemap. Each point is a sprite generated with canvas radial gradients and a cubehelix color scheme, rendered via an OpenLayers vector layer with icon styles. The map view and layers are managed through React hooks, while earthquake coordinates load from a CSV via d3.csv.

Apr 2, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare data set, using nested arcs to represent parent-child relationships and their relative sizes. Built with D3 v5, it renders the hierarchy as an interactive ring layout where users can click any arc to zoom into that subtree, with smooth animated transitions between views. The visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, while `transition.attrTween` and `transition.tween` handle the interpolated animation of arc paths and labels during zoom operations.

Apr 2, 2020

Loading thumbnail…

MRI and Alzheimers Data

This visualization explores the OASIS MRI dataset across four linked scatter plots, revealing relationships between brain volume, dementia severity (CDR), age, education, and gender. It shows that dementia correlates with smaller normalized brain volume, occurs primarily in older patients, and that eTIV and ASF exhibit a nonlinear inverse relationship, while gender shows clear separation in eTIV. Built with the vega-lite-api library and rendered via Vega-Lite, the plots use circle marks with color, size, and tooltip channels, pulling data from a CSV file and displaying charts in a 2x2 grid.

Apr 2, 2020

Loading thumbnail…

Old Faithful HeatMap

This example visualizes the Old Faithful eruption dataset as a binned 2D heatmap, showing the joint distribution of eruption durations and waiting times through a green color scale. The visualization updates dynamically as the mouse moves across the page, adjusting the number of histogram bins along the x-axis based on the cursor’s horizontal position. Built with Vega-Lite and embedded via vegaEmbed, the chart renders as SVG, while d3.tsv fetches the raw data from a GitHub gist and d3.select listens for mousemove events to re-render the specification.

Apr 2, 2020

Loading thumbnail…

Table

This interactive table displays 2018-2019 NBA team statistics, including win/loss records, percentages, and scoring differentials, sorted by wins. Users can filter the data by league conference using the Eastern and Western buttons. The visualization combines a jQuery DataTable with SVG foreignObject rendering to embed an HTML table within a D3 graphic, loading its data from a CSV file and updating the table contents dynamically upon button selection.

Apr 2, 2020

Loading thumbnail…

Table

This gallery shows a table of tabular data, rendering each record as a row with cells for every column. The data is added to the page via an HTML table, with a header row containing the column names. It uses D3.js to bind the data and create the table structure. The example is connected to a dashboard through the `Table` function in `table.js`, pulling from a CSV file of periodic table elements.

Apr 2, 2020

Loading thumbnail…

Mobility Rate Bubble Chart

This bubble chart shows the mobility rate of California universities, plotting median parent household income against the percentage of students who move from the bottom to the top income quintile. Circle size encodes average cohort size, while color shows the trend of parents in the bottom income bracket. The visualization uses D3.js v5 scales and joins to render SVG circles, with d3-legend for color and size legends, and includes labeled averages and annotations. Data comes from Opportunity Insights' Mobility Report Cards dataset.

Apr 2, 2020