nicklaus-roy

@nicklaus-roy·18 public vizzes

VIP chart

A bar chart shows the number of VIPs associated with network leaders, campuses, services, or priorities, selectable via a dropdown. The chart aggregates raw JSON data from a gist, counting occurrences per category and sorting bars descending, with the top 20 shown for campus/company. React manages state and re-rendering, while D3 v6 scales (scaleBand, scaleLinear) and axis components render SVG ticks and labels. The visual uses simple rectangle marks with hover tooltips.

May 2, 2021

Loading thumbnail…

Scatter Plot 1

This scatter plot shows the number of VIPs over time, with each point representing a specific date. The visualization uses React with D3 v6 to render an SVG chart, employing `d3.scaleTime` and `d3.scaleLinear` for the axes. Data is fetched from a JSON file, and the chart includes interactive circles that trigger an alert when clicked.

Apr 28, 2021

Loading thumbnail…

Stylized Population Bar Chart Refractor

This bar chart displays the top ten countries by population for 2020, with horizontal bars sorted by country name and scaled linearly by population values. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for axes and positioning, rendered as SVG rectangles. The data originates from a UN population CSV file, formatted with `d3.format` for readable tick labels, and styled with a teal color scheme and Poppins font.

Apr 25, 2021

Loading thumbnail…

Population Bar Chart Refractore

This example displays a horizontal bar chart of population figures for the top 10 countries, sourced from a UN Population 2020 CSV file. Built with React and D3 v6, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering is composed from reusable components: `AxisBottom` generates tick lines and labels, `AxisLeft` places country names, and `Marks` draws the rectangles. Data is loaded asynchronously via `useData` and `d3.csv`.

Apr 25, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automotive data maps acceleration on the x-axis against horsepower on the y-axis, with points colored by origin and sized by weight. A tooltip reveals car names on hover. The visualization is created programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders via SVG. It loads CSV data from a remote URL using d3.csv, applies custom axis and label styling from a separate config module, and fits the chart to the viewport.

Apr 25, 2021

Loading thumbnail…

VIPs

This visualization plots religions against countries as a circular mark chart, with dot size encoding population and tooltips revealing religion names on hover. It uses the vega-lite-api to construct the specification, with vega and vega-lite rendering the visualization, and vega-tooltip for interactive labels. The data comes from a CSV file loaded via d3.csv, and custom styling in the config adjusts font sizes and removes axis domain lines for readability.

Apr 21, 2021

Loading thumbnail…

Population Bar Chart with Margin with Axes

A horizontal bar chart displays the ten most populous countries based on United Nations 2020 estimates, with population values plotted along a linear x-axis and country names along a band y-axis. The React component loads CSV data via `d3.csv`, then renders SVG rectangles and axis tick labels using `scaleLinear`, `scaleBand`, and `max` from D3 v6. The chart applies explicit margins to position axes, which are manually constructed from `xScale.ticks()` and `yScale.domain()` rather than using D3's axis generators.

Apr 12, 2021

Loading thumbnail…

Population Bar Chart with Margin

This example shows a horizontal bar chart of the ten most populous countries in 2020, using a bar’s length to encode population size. It fetches United Nations population data from a CSV file via `d3.csv`, then renders the bars as SVG `<rect>` elements within a `<g>` group translated by a fixed margin. The chart uses `d3.scaleBand` for the y-axis country categories and `d3.scaleLinear` for the x-axis population values, with React managing the component state and data loading.

Apr 12, 2021

Loading thumbnail…

Population Bar Chart

A horizontal bar chart displays the top ten countries by 2020 population from a UN dataset loaded via `d3.csv`. The chart uses React hooks (`useState`, `useEffect`) to manage data fetching and rendering, with SVG rectangles sized by `scaleLinear` for population values and positioned by `scaleBand` for country names. The visualization updates once the CSV data is parsed and sorted, presenting a clean, static comparison of population sizes without interactivity.

Apr 12, 2021

Loading thumbnail…

Pie Chart

This pie chart displays the proportional distribution of the 148 named CSS colors by mapping each color to an equal-angle slice of a circle. The visualization is built with React, using the D3.js `pie` and `arc` functions to generate the path geometry, and renders as an SVG. Each slice is filled with the corresponding hex value from a CSV dataset of named CSS colors, loaded via D3's `csv` method. The chart effectively shows all colors at once, with the full wheel centered on the canvas.

Apr 12, 2021

Loading thumbnail…

Vega-Lite API Template - Line Chart

This example uses the Vega-Lite API to render a circular scatter plot showing the population of religious groups by country. The visualization encodes country on the x-axis, religion on the y-axis, and population as circle size, with a tooltip displaying religion names. It loads data from a CSV file using D3’s `csv` method, then configures the chart with custom axis and label styling from the `config` module. The Vega-Lite API registers with Vega and Vega-Lite libraries, and the chart is rendered as an SVG with a tooltip handler.

Apr 12, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and display CSV data within a React application using D3. It shows a simple text message indicating whether the data has loaded successfully, displaying the row count once fetched. The code uses React hooks like `useState` and `useEffect` to manage state and trigger the data-loading process, while the `d3.csv` method retrieves data from a GitHub Gist URL. The visualization initially renders a static SVG smiley face in the HTML, but the React component dynamically updates the displayed message based on the asynchronous data fetch.

Apr 8, 2021

Loading thumbnail…

Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js version 6. The visualization, displayed in the browser console, shows the parsed data structure from a gist containing CSS named colors. The code uses `d3.csv` to fetch and parse the URL directly, and also shows an alternative approach using the Fetch API with `d3.csvParse` to manually parse the text response. Both methods log the resulting array of objects, with the second approach also logging the data’s size property.

Apr 8, 2021

Loading thumbnail…

Mouse Events

A React application demonstrates mouse event handling by rendering a single SVG circle that follows the cursor across the viewport. The circle's position updates in real time through the `onMouseMove` event, which captures `clientX` and `clientY` coordinates and stores them in state via the `useState` hook. The `useCallback` hook optimizes the event handler. The visualization uses React 16.9 and renders directly to SVG, with the window dimensions determining the drawing area.

Apr 7, 2021

Loading thumbnail…

Smiley Face Refractored

A grid of eighteen randomized smiley faces fills the viewport, each rendered as a yellow SVG circle with black stroke, eyes, and a mouth arc. The faces vary in stroke width, eye offset and radius, and mouth thickness due to random values generated by `d3.range` and `Math.random`. Built with React components for the face, background, eyes, mouth, and container, the visualization uses D3’s `arc()` generator to draw the smiling mouth shape, with SVG transforms positioning each face’s center.

Apr 7, 2021

Loading thumbnail…

Fork of Smiley Face Part 3 with DS3

This example shows a smiling face composed of a yellow circle, two eyes, and a mouth, all rendered in SVG. The code defines a reusable React component and uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angles. The face is centered using a group transform, with circles for the eyes and background positioned via absolute coordinates. React renders the SVG into a root div, while D3 v6 supplies the geometric calculations.

Apr 7, 2021

Loading thumbnail…

Smiley Face Part 2

Three circles on a yellow face render a classic smiley face without a mouth, using React with ReactDOM to create SVG elements. The code defines fixed dimensions for the canvas, positions the face at the center, and places two black eyes symmetrically using offset constants. It directly specifies circle properties like radius, fill color, and stroke width, demonstrating a declarative approach to static SVG rendering with React’s JSX syntax.

Apr 6, 2021

Loading thumbnail…

Untitled

This example visualizes a dynamic network of nodes and links using a force-directed layout. It shows how connected entities repel and attract each other, settling into a stable configuration over time. The visualization is built with React and uses D3's `d3.forceSimulation` to calculate physics-based positions, while rendering the graph as SVG elements. The code defines nodes and links with varying colors and sizes, and the simulation updates continuously to reflect real-time movements.

Apr 6, 2021