J

jjacobatandover

@jjacobatandover·25 public vizzes

Loading thumbnail…

Fork of Fork of Adding Dropdowns Almost there fork of working...Fork 999 of Stylized Bar Chart

This interactive bar chart shows immigration numbers for the top 10 most populous countries across selectable years from 2008 to 2019. A React dropdown menu lets users switch between annual data points, updating the bar heights accordingly. The visualization uses d3.scaleBand and d3.scaleLinear for positioning, with SVG rectangles rendered via React components. Data comes from the United Nations World Population Prospects 2019, loaded through d3.csv. Gridlines and axis labels are generated using d3 scale tick methods, while tooltips display formatted values on hover.

Loading thumbnail…

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with a dropdown to switch between years of immigration data. The bars update based on the selected year, and tooltips show exact values. Built with React and D3 v5, it uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and SVG `<rect>` elements for marks. Data comes from the United Nations World Population Prospects 2019, loaded via `csv` from a gist URL.

Loading thumbnail…

Fork of Fork of working Fork of Fork of Fork of Fork of Fork 999 of Stylized Bar Chart

This bar chart displays top countries by migrant population using the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and renders SVG rectangles via the Marks component. The chart includes rotated axis labels and a tooltip showing formatted population values through D3’s `format` function.

Loading thumbnail…

Fork of HTML Starter

This example shows a bar chart of eight categories (A-H) with values ranging from 19 to 91, where hovering over a bar turns it red and displays its amount as a text label above it. The visualization is built using HTML with inline CSS for page styling and JavaScript for console output, while the chart itself is rendered by Vega, a declarative visualization grammar, through a Vega JSON specification. The code defines scales, axes, and marks for the bars and labels, using signal-based tooltip handling to track the hovered datum and conditionally update text opacity.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using an inverted horizontal layout, with country names on the vertical axis and population values on the horizontal axis. The visualization uses React components to render SVG elements, with d3.scaleBand positioning the categorical axis and d3.scaleLinear mapping population values. The d3.csv loader fetches data from a GitHub Gist containing United Nations World Population Prospects 2019 data, while d3.format applies abbreviated tick labels that convert millions to billions. The chart includes styled tick marks, a Population axis label, and native SVG tooltips showing formatted values on hover.

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, with each bar’s length representing population size and a tooltip displaying the formatted value. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles render the bars, while custom `AxisBottom` and `AxisLeft` components generate ticks and labels. Data comes from the United Nations World Population Prospects 2019 CSV file.

Loading thumbnail…

test_data

This visualization uses a Vega-Lite API to render an interactive line chart of CO2 emissions over time, with three distinct types compared via colored lines. The chart encodes Year on the x-axis, emission amount on the y-axis, and type as color, with tooltips showing year values. Data from a CSV file is loaded via d3.csv, and the vega-lite-api library, combined with vega-tooltip for hover interactions, generates the SVG output. The visualization fills the entire browser window and uses custom axis styling.

Loading thumbnail…

Rendering Data (part 2) with React

A radial burst of CSS named colors is rendered in an SVG, with each color occupying an equal arc. The example shows how React state manages asynchronous data loading while D3 utilities process and visualize it. The code uses `d3.csv` to fetch color data, `d3.pie` to compute angles, and `d3.arc` to generate path shapes, all within a React component using hooks like `useState` and `useEffect`.

Loading thumbnail…

Rendering Data with React

A React application renders a series of colored horizontal bars, one for each CSS named color, by fetching a CSV file of color names and their HEX values with D3's `csv` utility. The `useState` hook stores this data, and after an asynchronous `useEffect` call completes, a loading message is replaced by an array of `div` elements, each styled with its corresponding HEX value as the background color. This demonstrates using React's state management to drive SVG-less HTML rendering of tabular data.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and display metadata about a CSV dataset. It uses D3’s `d3.csv` to fetch a remote file containing CSS named colors, while React manages the data through the `useState` and `useEffect` hooks. Once loaded, a custom `message` function formats and displays the file’s size in kilobytes, row count, and column count in large text. The visualization highlights a minimal integration pattern, with React controlling state and D3 handling data parsing.

Loading thumbnail…

Rain fall Lawrence, MA

This bar chart displays daily precipitation levels in Lawrence, MA, filtering the data to July only. The visualization uses the Vega-Lite API with custom configuration for styling, while loading CSV data from a GitHub-hosted weather dataset. The chart renders as an SVG with bars colored by default, and includes tooltips that show the date on hover. The code registers vega-lite and vega-tooltip for interactivity, and uses d3.csv to fetch the underlying weather data.

Loading thumbnail…

Making a Clock

This example shows a static clock face rendered with SVG. The clock includes a circular face, hour, minute, and second hands, numeric labels, and tick marks at the 12, 3, 6, and 9 positions. Built with React and JSX, the code uses CSS for page margins and the `circle`, `line`, and `text` SVG elements to construct the layout. It positions elements using a centered `<g>` transform and rotates ticks with the SVG `transform="rotate(...)"` attribute. The D3 `arc` function is imported but not used in the final output.

Loading thumbnail…

Snow Depth Data 2019-2020

A scatter plot displays daily average snow depth in Lawrence, Massachusetts, from the 2019–2020 winter season. Each point represents a date, with tooltips revealing the exact date on hover. The visualization is built with the vega-lite-api, which registers vega and vega-lite, and loads data from a CSV file using d3.csv. The chart is rendered as a full-window SVG, with custom axis and label styling configured through Vega-Lite’s config object.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis against its horsepower on the y-axis using semi-transparent, oversized circular marks. The chart is built with the Vega-Lite API, registered and rendered through Vega and Vega-Lite, with tooltips provided by Vega-Tooltip. Data is loaded asynchronously via d3.csv, and the visualization is styled with custom axis and label configurations defined in a separate config.js file, resulting in a clean, full-screen scatter plot.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying a summary of the dataset’s size, row count, and column count on the page. It uses the `d3.csv` method to fetch and parse the data, then computes the formatted CSV string’s length in kilobytes via `d3.csvFormat`. The data comes from a GitHub Gist containing CSS color names, and the resulting message is rendered into a `<pre>` element using plain DOM manipulation. A commented alternative shows manual `fetch` with `d3.csvParse`.

Loading thumbnail…

Building Interactivity with React

An interactive SVG circle follows the mouse as it moves across the screen, demonstrating how React manages state and event handling for dynamic visual updates. Built with React 17 and D3 v7, the component uses `useState` and `useCallback` to track the cursor position and update the circle's `cx` and `cy` attributes on every `mousemove`. The rendered output is a single yellow circle on a blank canvas, showcasing the integration of React's declarative JSX syntax with SVG elements inside a simple, resizable viewport.

Loading thumbnail…

rankChoiceVoting

This example simulates ranked-choice voting for four candidates across a population of 100 million fictional voters, using JavaScript to generate random preference permutations. It demonstrates the instant-runoff process by tallying first-choice votes, eliminating the lowest-scoring candidate, redistributing those ballots to their next preferred choice, and repeating until a majority winner emerges. The console output shows the round-by-round counts and declares the final winner, illustrating how the algorithm handles vote transfers and majority thresholds.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in large, centered type using CSS styling. The page also uses JavaScript to log a greeting to the browser’s developer console. Additionally, an embedded script defines an `AceStudent` function that concatenates a first and last name into a string, then logs the result for “John Nash” via `console.log`. The code relies on plain HTML, CSS, and JavaScript, with no external libraries or frameworks.

Loading thumbnail…

Suhaila's temp smiley face

This example shows a single yellow smiley face rendered as an SVG circle with a black outline, centered in a React component. The circle’s radius is calculated relative to the window’s height, and its position is derived from the viewport’s center. The code uses React 17 and ReactDOM to render the SVG, while D3 v7 is loaded but not actively used. The rendering approach relies on basic SVG circle properties, with a stroke width of 10 pixels.

Loading thumbnail…

Making a Smiley Face Tweaked

This example shows a stylized smiley face built with scalable vector graphics, featuring a yellow circle for the head, two eyes, a nose, green ears, and a curved mouth. The visualization demonstrates how to combine React with D3 to create shapes that are difficult to express in raw SVG. The code uses JSX to define the SVG structure, while the `arc()` function from the `d3` library generates the smile’s path, taking inner radius, outer radius, and start/end angles as parameters. All elements are positioned relative to a central transform, with constants controlling offsets and dimensions.

Loading thumbnail…

Making a Smiley Face with D3

This example shows how to build a smiley face using React, SVG, and D3. It renders a yellow circle for the face, two smaller circles for the eyes, and a smile created with the `d3.arc` function from the `d3-shape` module. The code uses JSX to define the SVG elements and JavaScript to compute the arc path, with D3’s arc generator handling the start and end angles for the mouth. The face is centered using a translation transform based on computed dimensions.

Loading thumbnail…

Making a Smiley Face with React

This example shows a smiley face rendered as a scalable vector graphic using React. The face consists of a yellow head and two black eyes, with geometric properties such as center coordinates, offsets, and radius defined as JavaScript constants in JSX. The code uses React 17 and ReactDOM to mount the component into the DOM, while SVG circles handle the drawing. The approach demonstrates how JSX enables dynamic math-based positioning instead of hardcoded attributes.

Loading thumbnail…

Overlapping Circles

Two overlapping yellow circles with black outlines form a simple abstract composition. The example demonstrates using React with JSX to generate SVG circles, replacing static HTML markup with dynamic JavaScript calculations for positioning and sizing. The code defines constants for dimensions, offsets, and stroke width, then renders three circles—two offset horizontally and one centered—using ReactDOM to mount the component into the DOM. This illustrates how React’s declarative approach enables reusable, parameterized SVG elements.

Loading thumbnail…

Making a Smiley Face with CSS

This example illustrates the classic "hello world" of graphics programming: a yellow circle adorned with two smaller black circles to form a smiley face, rendered as an inline SVG. The page uses plain HTML and JavaScript, with CSS setting the body margin to zero and hiding overflow. The visual is constructed entirely from three `<circle>` elements whose positions, radii, and colors are hardcoded within the SVG tags, demonstrating basic SVG markup. A console statement logs a greeting, hinting at future JavaScript interactions.

Loading thumbnail…

Fork of HTML Starter

This example displays the large, centered text “ABBY Jacob” on a plain white background, styled with inline CSS that sets the body font size to 13em and text alignment to center. The page runs a small inline JavaScript snippet that logs the string “Hello JavaScript!” to the browser’s developer console. It uses the raw HTML, CSS, and JavaScript APIs directly, without any external libraries or frameworks, and serves as a minimal demonstration of embedding scripts and styles within a single document.