RobFaj

@RobFaj·26 public vizzes

RobFaj Social_Network_graph_ICE-8

A force-directed network diagram visualizes nine people, shown as blue circles with labels, connected by weighted black links. It uses the older `d3.layout.force` API from d3.v2/v4 to position nodes through simulated gravity, charge, and distance forces, while supporting node dragging. Link widths are scaled by the `weight` attribute from the JSON data, and node circle and text styling are defined in CSS.

Apr 13, 2023

Loading thumbnail…

RobFaj MyTree ICE-8

A family tree chart built with D3.js (v3.5.17) displays hierarchical data in a static, animated SVG layout using `d3.layout.tree` and `d3.svg.diagonal` for curved links. Nodes are colored circles with labels, color-coded by parent and leaf status, and respond to clicks for interactivity. The visualization uses an HTML page with embedded CSS and JavaScript, rendering from hardcoded JSON family data.

Apr 13, 2023

Loading thumbnail…

Untitled

This visualization displays a single country, Germany, extracted from a world GeoJSON dataset and rendered in red on a blank SVG canvas. The map uses the Mercator projection, specifically centered on GPS coordinates [2, 47] with a scale factor of 980, via the `d3.geoMercator` projection. The code loads world boundaries from a remote GitHub repository using `d3.json`, filters the features to only include Germany, and draws the path with `d3.geoPath` and the `.projection()` method. The result is a simple, static choropleth-style map focusing solely on that nation.

Apr 13, 2023

Loading thumbnail…

RobFaj World_Map_ICE_8

This interactive world map uses a Natural Earth projection to visualize country boundaries and landmasses, rendered as bright green filled regions with blue graticules and black interior borders against a blue sphere. The D3 v5 library handles geographic projections and path generation via `geoNaturalEarth1` and `geoPath`, while React components manage the SVG rendering. TopoJSON data from the world-atlas package is loaded with `d3.json` and processed using `feature` and `mesh` to extract land polygons and country borders.

Apr 13, 2023

Loading thumbnail…

Inflation Rates _ Project Inc1

This visualization displays the 5-year inflation rate (T5YIE) over time as a smooth, curving line with colored dots marking each data point. The line uses a gradient stroke, while the circles are colored from blue to orange to red based on their position within the value range, with tooltips showing the date and rounded rate. Built with React and D3 v7, the code loads CSV data, applies time and linear scales, and renders the chart as SVG with custom axis components.

Apr 4, 2023

Loading thumbnail…

Laid_off_counts

This visualization displays the monthly count of laid-off tech employees over time, with each data point represented by a colored circle. The circles are positioned along a time-based x-axis and a linear y-axis, and their fill colors transition from blue through orange to red based on the layoff count magnitude. A smooth line connects the data points, and hovering reveals the exact date and count. The visualization uses D3 v7's `scaleTime`, `scaleLinear`, and `line` functions within a React framework, rendering as SVG, with data loaded from a CSV file via `d3.csv`.

Apr 4, 2023

Loading thumbnail…

Fajardo_ICE_6_Scatter

This scatter plot shows the relationship between the number of companies and total employed individuals across quarters, with points colored by quarter using red, blue, or black markers. The visualization uses d3.csv to load employment data from a GitHub gist, d3.scaleLinear and d3.extent for scaling axes, and d3.axisLeft and d3.axisBottom for rendering the SVG chart. The code applies d3.selectAll and join to create circles, with axis labels rotated and styled via CSS.

Apr 3, 2023

Loading thumbnail…

Fork of D3 course - working with time series

This visualization shows the daily Federal Funds borrowing rates over time, displayed as a smooth curved line chart with data points colored on a gradient from blue to red based on their value. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and rates to SVG coordinates, with custom axis components and a line path generated via `d3.line` with cardinal tension. The data is fetched from a CSV file containing historical rate values, and the chart includes interactive tooltips showing the exact date and rate for each point.

Apr 3, 2023

Loading thumbnail…

Untitled

This example displays the U.S. Federal Funds borrowing rate over time as a single steelblue line chart, with a focus on user interaction. Hovering the mouse over the plot reveals a small black circle and a text label that track the nearest data point, showing its date and rate value. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for axes, and d3.line for the path. It also employs a d3.bisector to locate the closest data point, with SVG elements for rendering.

Apr 3, 2023

Loading thumbnail…

Untitled

This example shows a time-series line chart of cumulative road-building progress, with circles marking each data point. Hovering over a circle reveals a tooltip with the total kilometers built and displays dashed guide lines that extend to the axes. The visualization uses D3.js v3 APIs such as `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis`, with data parsed from a CSV file via `d3.csv` and `d3.time.format`. The SVG is rendered in React, and interactivity relies on `mouseover` events and D3 transitions for the tooltip.

Apr 3, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A Buddha silhouette, rendered from SVG path data, appears repeatedly in overlapping, scaled layers on a pink background with a photorealistic elephant image. The example uses React and ReactDOM to manage the SVG elements, defining a hexagon pattern with the SVG `<pattern>` and `<polygon>` elements to fill the background. The overlapping Buddha paths are generated from a data array using JavaScript logic, creating a dense, colorful composition.

Mar 30, 2023

Loading thumbnail…

ICE-7_STEM Employment by 2022 Quarters_Area Chart

This area chart displays STEM employment figures across the four quarters of 2022, using a smooth, curved line and filled region to emphasize changes in workforce levels over time. The visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for the smooth path, and SVG rendering. Data is loaded from an external CSV file, with quarter values parsed as numbers and employment as integers.

Mar 30, 2023

Loading thumbnail…

ICE 7 Employment of STEM workers by Quarter_RobFaj

This line chart visualizes quarterly STEM employment data from a CSV file, plotting the number of employees against quarters in 2022. An orange smoothed line shows the trend, with labeled axes for both dimensions. The code uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `line`, `curveBasis`, `axisLeft`, and `axisBottom` to generate an SVG chart. Data is loaded asynchronously via `csv()` from a GitHub gist, and the chart includes gridlines, axis labels, and a title.

Mar 30, 2023

Loading thumbnail…

ICE-7_Pie_Fajardo

This pie chart visualizes STEM employment counts by sector, displaying the top 10 sectors with the highest employment numbers. Each sector is represented as a colored slice with a corresponding legend that lists the sector label and its employment value. The visualization uses D3 v5 within a React framework, employing d3.pie, d3.arc, and d3.scaleOrdinal APIs to generate the SVG chart. Data is loaded from a CSV file hosted on GitHub Gist, and mouseovers log sector employment values to the console.

Mar 30, 2023

Loading thumbnail…

Fork of ICE-7_Pie_Fajardo

This pie chart visualizes the basic cost of Netflix subscriptions across the top ten countries, sorted in descending order. Each slice is colored using `d3.scaleOrdinal` with `schemeCategory10`, and labels are generated via `d3.pie` and `d3.arc` before being rendered as SVG paths. A legend with country names and dollar amounts accompanies the chart, built with SVG `rect` and `text` elements. Data is loaded asynchronously from a CSV file using `d3.csv`.

Mar 30, 2023

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through four different feature pairs on the x-axis every few seconds. The plot uses D3.js v6 within a React framework, rendering SVG shapes for data points, axes, and a color-coded legend for species. The code implements a reusable scatterPlot function with scaleLinear scales and axis generators, while also appending custom text labels and legend markers directly to the SVG.

Mar 30, 2023

Loading thumbnail…

Reusable Scatterplot Example

A reusable scatterplot visualizes the Iris dataset, encoding sepal and petal lengths along the X and Y axes, with point size representing sepal width and color encoding species. Built with React and D3, the example uses `VizContainer` to abstract SVG groups and margin conventions, while a standalone `ScatterPlot` function configures scales, axes, and labels. D3's `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` handle data loading and rendering. The visualization demonstrates a modular pattern where React manages layout and D3 handles chart internals, showing margins via an optional prop.

Mar 24, 2023

Loading thumbnail…

ICE-6_Fajardo_Bars

This bar chart displays the number of employed STEM workers in the U.S. per quarter during 2022, using horizontally oriented bars. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for the axes and bar widths. It loads CSV data from a GitHub gist, truncates it to 12 rows, and renders SVG rectangles alongside custom tick marks. Red vertical gridlines and axis labels are drawn manually, with the chart embedded in a fixed 960×500 SVG canvas.

Mar 23, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using 2018 population estimates from the United Nations World Population Prospects. The chart customizes D3 axes by removing domain lines, adding tick marks, and formatting population values with the `format('.3s')` function, which converts large numbers into abbreviated labels like “B.” The visualization is built with D3 v5, loading data from a CSV file via `d3.csv`, and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, labels, and a title.

Mar 23, 2023

Loading thumbnail…

Fork of D3 Scatter Plot_faj

A D3.js scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as separate circles. The chart uses SVG rendering with `d3.scaleLinear` for both axes, `d3.extent` to compute domains, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded asynchronously from a CSV file via `d3.csv`, with petal width parsed as a numeric value. The visualization fills the browser window and sets a fixed circle radius of 5 pixels.

Mar 22, 2023

Loading thumbnail…

Fajardo ICE-5: The Shapes of Data

This visualization presents a grid of geometric shapes rising from a curved line, set against a dark starfield background. The composition experiments with form and symmetry to suggest the structure inherent in datasets. Built with D3 v5 and SVG, the page loads an embedded starfield image as a pattern fill for the background. React serves as the framework, while the rendering relies on standard SVG elements and D3’s data-join capabilities to draw the shapes.

Mar 9, 2023

Loading thumbnail…

ICE 5

This example reads a CSV file from a GitHub gist and displays summary statistics about its size and structure. The visualization first fetches the data using the D3 CSV parser, then calculates the total data size in kilobytes by formatting the content, and finally reports the row and column counts. The output is rendered as plain text within a black-styled HTML `<pre>` element. D3 v7 is used solely for CSV loading and formatting, while the page layout relies on basic HTML and CSS styling.

Mar 8, 2023

Loading thumbnail…

Fork of Fork of Fork of Buddha Mask

A generative Buddha mask emerges from a dense field of randomly positioned SVG lines, clipped to the mask's silhouette via a `clipPath` and overlaid with a radial gradient. The React component maps over arrays of coordinates to render hundreds of colored lines, whose positions and RGB values are determined by `Math.random()`. The visualization is built with React and D3 v5, using the `d3.line` generator and SVG elements, set against a green linear-gradient background.

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A network of concentric, semi-transparent golden Buddha silhouettes overlaps in a dense, mandala-like composition on a black field. The work layers a large, fixed path with scattered, randomized circles, using React to render the SVG elements. The circles receive arbitrary coordinates and RGB color values via the `Math.random()` API, while the Buddha path is drawn using a static `d` string.

Feb 27, 2023

Loading thumbnail…

My first Face Viz - ICE 4

This animated smiley face demonstrates fundamental DOM manipulation with D3.js v5. A yellow circle serves as the face, with eyes, eyebrows, and a mouth created using SVG shapes and the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition().attr()` calls, moving the entire eyebrow group via transform attributes. The SVG background is set to red through direct style manipulation.

Feb 27, 2023

Loading thumbnail…

F"Let's make a face"

A single yellow circle with a black outline fills the center of an SVG canvas, creating a simple facial base. The example demonstrates fundamental SVG shapes and D3 selections, using `d3.select` to append a circle element to the SVG and translate it to the center via a group transform. The circle’s radius is set relative to the SVG's height, and its fill and stroke are styled directly. Rendered entirely with D3 v7 and SVG, this minimal face serves as a basic introduction to shape construction and attribute manipulation.

Feb 25, 2023