guitmonk-1290

@guitmonk-1290·11 public vizzes

pie chart (pestel classification)

This pie chart visualizes the distribution of PESTEL classifications (Economic, Environmental, Healthcare, Industries, Political, Social, Technological) for articles related to the topic "oil," using data from a GitHub Gist JSON file. The visualization uses d3.js v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the chart segments and legend within an SVG element. It counts occurrences of each PESTEL category in the loaded data and renders interactive segments with hover effects that log the associated value to the console.

May 10, 2023

Loading thumbnail…

fefef

A scatterplot shows the distribution of intensity values across different sectors, with each sector positioned along the x-axis and intensity along the y-axis, both with zero disabled. The visualization uses large, semi-transparent circular marks to reveal overlapping density. Built on the Vega-Lite API with vega-lite-api, the chart loads JSON data from a remote gist and renders interactive tooltips through the Vega-Tooltip handler.

May 10, 2023

Loading thumbnail…

topic vs relevance

This chart displays the top 10 most populous topics ranked by relevance, rendered as horizontal bars using React and SVG. The visualization uses d3.scaleBand and d3.scaleLinear to map topics and relevance values, with data loaded via d3.json from a UN World Population Prospects dataset. The code builds custom axes using React components, and the marks are SVG rectangles that include a title tooltip. The chart is styled with a Poppins font and teal-colored bars.

May 10, 2023

Loading thumbnail…

demo pie

This demo shows the basic cost of Netflix subscriptions across ten countries, displaying each country's price as a segment in a pie chart with corresponding color-coded legends. The data is loaded from a CSV file hosted on GitHub Gist and sorted in descending order. Using d3.pie and d3.arc, the chart renders as SVG with d3.scaleOrdinal and schemeCategory10 for colors, while d3.select appends legend rectangles and text for each country and its price in dollars.

May 10, 2023

Loading thumbnail…

intensity vs likelihood

A D3.js scatter plot visualizes topic intensity against relevance, with points positioned by ordinal topic categories on the x-axis and a linear relevance scale on the y-axis. The plot uses SVG circles with a fixed radius and 0.4 opacity, sourced from JSON data loaded via `d3.json`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with scales defined by `d3.scaleOrdinal` and `d3.scaleLinear`. The visualization adapts to the window dimensions and uses a fluid layout with minimal margins.

May 10, 2023

Loading thumbnail…

pestle vs relevance

This scatterplot shows the relevance of each article across different PESTLE categories, with each point representing an article and its y-axis position indicating relevance score. The visualization uses a Vega-Lite API specification to render an SVG chart with semi-transparent circular marks, allowing overlapping points to display density. Data is loaded asynchronously via D3’s `json` method from a GitHub-hosted JSON file, and the chart is styled with custom axis and label configuration to enhance readability.

May 10, 2023

Loading thumbnail…

intensity vs sector

This visualization displays a bar chart comparing intensity values across different sectors. The chart uses a dark-themed SVG canvas with a clean, minimal design. The data is loaded from a JSON file, and the chart is built using the D3.js version 5 library, specifically utilizing `d3.json`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` and `d3.axisLeft` for the axes. Each bar's height corresponds to the intensity metric for its respective sector, with axes labeled using D3's tick text styling.

May 10, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors, loaded from a CSV of color data via D3’s `csv` utility, is rendered as an SVG arc for each color using React components. The code uses `d3.arc` and `d3.pie` to compute the arc paths, with each `path` filled by the color’s hex value from the dataset. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and rendering, displaying a loading message until the data arrives.

May 9, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of population by country using a scatter plot, with points colored by percentage and positioned along a categorical country axis and quantitative population axis. It loads data from the UCI Auto MPG dataset via a Gist, though the code references CSS named colors and population fields. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, configures an SVG renderer with tooltips, and applies a custom dark theme for improved readability. The chart uses a point mark with reduced opacity and a zero-less scale to highlight population differences.

May 9, 2023

Loading thumbnail…

csv parse

This example demonstrates the basic workflow of loading and parsing a CSV file with D3 version 7 in a React application. It fetches a remote dataset of CSS named colors, then displays a text summary showing the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to retrieve and parse the data, `d3.csvFormat` to measure its size, and React hooks like `useState` and `useEffect` to manage the asynchronous loading process.

May 8, 2023

Loading thumbnail…

Mouse Buddy

A single gray circle tracks the mouse cursor in real time within an SVG canvas. The visualization shows how React state updates can drive direct SVG element positioning. The `App` component captures mouse coordinates via the SVG `onMouseMove` handler, stores them with `useState`, and re-renders the circle’s `cx` and `cy` attributes on every movement. Built with React 18 and D3 v7, the example renders purely through SVG elements without additional data sources or animation logic.

May 7, 2023