M

Marta

@martavj·21 public vizzes

Loading thumbnail…

Fork of Making a Bar Chart with React & D3 P2

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered with React components inside an SVG. The code loads CSV data from a GitHub gist using D3’s `csv` utility, then uses React hooks (`useState`, `useEffect`) to manage the data lifecycle. D3’s `scaleBand` positions the country labels on the y-axis, while `scaleLinear` maps population values to bar widths, with axis ticks and gridlines drawn manually. The visualization updates dynamically as the data is fetched and processed.

Loading thumbnail…

Making a Bar Chart with React & D3 P1

This example shows a horizontal bar chart of the top ten countries by population in 2020, rendered as an SVG via React. It loads CSV data from a GitHub gist using D3’s `csv` utility, then maps the data to `rect` elements inside a `<g>` group. The scales—`scaleBand` for countries and `scaleLinear` for population—are created with D3 v5, while React’s `useState` and `useEffect` manage the asynchronous data fetch and re-render. The chart displays no axes or labels, focusing solely on the bars’ lengths.

Loading thumbnail…

Pathetic Bar Chart

This example presents the top 10 most populous countries as a bare bar chart with no axes or labels, rendering each bar as a simple visual proportion. It loads data from a CSV file of the United Nations World Population Prospects 2019 via `d3.csv`, extracts the 2020 population values, and slices the first 10 rows for display. Built with React and D3 v5, the chart uses `d3.csv` and React state management to fetch and store the data, while the lack of axes emphasizes the raw magnitude of population differences.

Loading thumbnail…

Rendering Data with React & D3 - Colors

A React application renders a colorful pie chart from a CSV dataset of CSS named colors. The visualization uses SVG paths generated with React components, while D3 utilities load the data via `d3.csv` and compute the circular layout with the `d3.pie` and `d3.arc` APIs. Each slice represents one color name, filled with its corresponding RGB hex value, creating a full spectrum ring. The example demonstrates the integration of React state management with D3's layout and shape generation functions.

Loading thumbnail…

Vega-Lite API Religions by Country

This visualization shows the population of each country, broken down by religion, using a stacked bar chart. Each bar represents a country, sorted by total population, with colored segments for different religions and tooltips revealing exact population values. It is built using the Vega-Lite API, where the chart specification is defined programmatically via `vl.markBar()` and encoding methods. The underlying data is fetched as CSV using `d3.csv` from a remote gist, and the final visualization is rendered as an SVG canvas using the `vega` renderer.

Loading thumbnail…

Vega-Lite API Countries

This visualization displays population by country as a horizontal bar chart, with countries sorted by population. Built with Vega-Lite’s API and rendered via D3, it loads data from a CSV of 2015 population figures. The chart uses a dark theme, custom axis styling, and tooltips showing exact values. The code registers Vega-Lite with a tooltip handler and fits the chart to the window size using an autosize configuration. The design improves readability with larger fonts and muted colors, while the interactive tooltip provides detailed population numbers on hover.

Loading thumbnail…

Vega-Lite API Temperature

This example visualizes a week of San Francisco temperature readings as a smooth line chart, with a tooltip that reveals the exact temperature at each point. The visualization is constructed programmatically using the Vega-Lite API, with vega, vega-lite, and vega-tooltip handling rendering and interaction. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart fills the browser window, and its axes and labels are customized through a configuration object to improve readability against a dark color scheme.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon, horsepower, weight, and country of origin. It uses the Vega-Lite API to build the visualization declaratively, with the `vl.markCircle` and `vl.encode` methods specifying the visual encodings. The data is loaded from a CSV file via `d3.csv`, and the plot is rendered to an SVG canvas using the Vega rendering engine. The template also configures chart styling through a custom `config` object and enables interactive tooltips with the Vega Tooltip handler.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load CSV data from a remote URL using D3’s `csv` utility within a React component. The React `useState` hook stores the fetched data, while `useEffect` triggers the asynchronous loading. The app displays a text summary of the dataset, including its size in kilobytes, row count, and column count, calculated with `d3.csvFormat`. The visible output is a simple `<pre>` element that shows either "Loading..." or the computed statistics, with styling from the linked CSS.

Loading thumbnail…

Loading Data with React & D3 Best option

This example demonstrates how to load a CSV dataset of CSS named colors using D3 utilities and manage the resulting data with React state. The React component displays a summary message showing the dataset’s size in kilobytes, row count, and column count. The code uses React hooks (useState and useEffect) with the csv function from d3.v5, and the message module formats the information using d3.csvFormat. The data is fetched from a GitHub Gist URL and rendered as formatted text within a pre element.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading a CSV file and parsing it into a tabular data structure, displaying summary statistics about the dataset. It fetches a CSV of CSS named colors from a GitHub gist, then uses `d3.csvParse` to convert the raw text into an array of objects. The code highlights the use of the Fetch API with `async` and `await` to retrieve the text, and shows the resulting file size in kilobytes, row count, and column count in large, readable text.

Loading thumbnail…

Loading data

This example demonstrates the initial stage of building a data visualization: loading a remote CSV file containing CSS named colors. The page uses JavaScript's built-in `fetch` API along with `async`/`await` to retrieve the text data from a GitHub gist, though the fetched content is not yet processed or displayed. The code includes commented-out alternative syntax using promise chains, illustrating both approaches for asynchronous HTTP requests in the browser.

Loading thumbnail…

Mouse Follower

A circular SVG marker tracks the cursor's position in real time across a full-browser canvas. The visualization uses React's `useState` and `useCallback` hooks to manage mouse coordinates, with an `onMouseMove` event handler updating a circle element centered at the pointer. Built with React 16.9 and rendered as SVG, the example demonstrates a minimal interactive pattern where the circle's `cx` and `cy` attributes are bound to the current mouse position, creating a responsive follower effect without additional data sources or complex D3 logic.

Loading thumbnail…

Loading and Parsing CSV Data

This visualization demonstrates the process of loading and parsing CSV data from a remote URL. It displays a text summary of the dataset’s size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch and parse the file, then `d3.csvFormat` to measure its length, with data sourced from the CSS Named Colors gist. An alternative approach using the Fetch API and `d3.csvParse` is also present, though commented out.

Loading thumbnail…

Smiley Faces Final

A mosaic of randomly varied smiley faces, each with a yellow circular head, black stroke, eyes, and a D3 arc-based mouth, rendered in an SVG grid using React components. The display generates 18 distinct faces, each with randomized dimensions for stroke width, eye offset, eye radius, and mouth properties. The implementation leverages D3’s `arc` for mouth paths and `range` for the array, while React handles component composition and rendering.

Loading thumbnail…

D3 Course: Face Part with React

This example shows a cartoon face built from separate React components for the background circle, eyes, and mouth. The face is rendered as an SVG, with the mouth drawn using D3’s `arc` generator to create a semi-circular path. The React components receive numeric parameters for size and position, and the `FaceContainer` centers the drawing within the SVG canvas. The code uses React 16.9, D3 v5, and is part of a video course demonstrating component-based visualization.

Loading thumbnail…

Fork of D3 Course: Face Part 4

A simple SVG face is rendered in yellow with a black outline, two eyes, and a curved mouth, centered in a 960×500 viewport. The example demonstrates integrating D3's `arc` generator with React by creating the mouth path from inner and outer radii and fixed start and end angles. React elements produce the circles and `<path>`, while a D3 selection is not used; instead, the `arc()` function generates the `d` attribute directly. The face’s parts are positioned via SVG transforms, with stroke and radius values hardcoded as constants.

Loading thumbnail…

D3 Course: Face Part 3

This example shows a stylized face built from SVG shapes using React and D3.js. It renders a yellow circle for the head, two black circles for eyes, and a curved path for a mouth, all positioned relative to a central point. The code uses ReactDOM to render the SVG element and the D3 `arc` function to generate the mouth’s path geometry with specified radii and angles. The face composition relies on fixed pixel coordinates and stroke widths, demonstrating a simple, programmatic illustration technique.

Loading thumbnail…

Smiley Face Part III

This example shows a smiley face rendered across the full browser window using React components for each SVG circle. The face consists of a yellow head, two black eyes, and a mouth, with all geometry computed from the window dimensions so the graphic scales responsively. The code uses React 16.9 and ReactDOM to render an SVG element, with inline style properties for sizing and positioning. No external data source is used; the visualization is purely procedural, drawing shapes based on hardcoded offsets and radius values.

Loading thumbnail…

D3 Course: Face Part 2

This example shows a yellow cartoon face made of three SVG circles—one for the head and two for the eyes—rendered inside a React application. The head’s position and radius are calculated from the viewport dimensions, with the eye offset and radius defined as constants. The code uses React and ReactDOM to render the SVG elements, which are drawn using standard SVG circle tags, not D3 APIs. The face is centered on a 960 by 500 pixel canvas, with the stroke width subtracted from the radius to keep the outline visible.

Loading thumbnail…

D3 Course: Face Part 1

This example demonstrates the first step of building a face using basic SVG shapes with D3.js. It displays a yellow circle as the head, two smaller black circles as eyes, and a thick black outline. The rendering uses static SVG elements within an HTML page, with dimensions hard-coded in the markup rather than computed in JavaScript. The code relies on standard SVG circle elements and CSS styling to define the visual appearance, serving as the foundation for a D3-based drawing course.