johnmurphyLC

@johnmurphyLC·12 public vizzes

React CSS Colors Pie Chart

A React and D3 pie chart displays every named CSS color as an equal-width slice, filled with its corresponding RGB hex value from a remote CSV. The `App` component loads the data via `d3.csv` and uses the `useEffect` hook. It computes the pie layout with `d3.pie` and renders each slice as an SVG `path` using `d3.arc`, all within a single SVG element.

May 28, 2023

Loading thumbnail…

Loading Data with React / Pie Chart

This example demonstrates loading data asynchronously in a React application using D3’s `csv` function, which fetches a remote dataset of CSS named colors and their RGB hex values. Once loaded, the data is displayed as a series of horizontal color swatches stacked vertically, with each row’s background color set to its corresponding hex value from the dataset. The app manages loading state with React’s `useState` and `useEffect` hooks, showing a simple “Loading…” message until the data arrives, and renders the final result as a block of SVG-ready DOM elements rather than an actual pie chart.

May 28, 2023

Loading thumbnail…

Fork of regression

A scatter plot compares GDP to health expenditures across countries, with a regression line showing their correlation. A checkbox toggles a logarithmic scale for the x-axis, which compresses the skewed GDP distribution. Point radius encodes each country’s World Happiness Score. The chart uses D3 v3/v4 with `d3.svg.axis`, `d3.scale.linear`, and a custom least-squares function for the regression. Data comes from the World Happiness Report, loaded via `d3.csv`.

May 28, 2023

Loading thumbnail…

Price vs Square Feet for Project X

This visualization, built with the vega-lite-api, plots the relationship between Price and Square Feet for real estate properties from Project X. Each circle represents a property, with position encoding both axes and color encoding the property’s Status, while hovering reveals its Address. A text label displays the R² value from a regression transform fitting Square Feet on Price. The chart uses D3 v5 to fetch CSV data via `d3.csv` from a GitHub Gist, and configures axes and tooltips through the vega-lite API’s `config` and `tooltip` features.

May 28, 2023

Loading thumbnail…

Largest Countries Bar Chart

A ranked bar chart displays the world’s most populous countries in 2015, using population data loaded via `d3.csv` from a Gist. The visualization is built with the vega-lite-api, which registers Vega-Lite and Vega, and renders to SVG. Bars are sorted by population, and tooltips show each country’s exact count. The chart uses custom axis and label styling from a configuration object to improve readability.

May 28, 2023

Loading thumbnail…

Temperature Line Chart

This line chart displays weekly temperature readings from San Francisco, sourced from the UCI Machine Learning Repository via a raw CSV file. The visualization uses vega-lite-api to generate a single semi-transparent line, with the x-axis mapped to timestamp and the y-axis to temperature, both with scales that omit zero. The code calls vl.markLine() and vl.encode() to build the chart, while d3.csv fetches the data. Custom axis styling and a 30px title font improve readability.

May 28, 2023

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Auto MPG dataset, loaded via d3.csv. A circle mark encodes origin on the x-axis, horsepower on the y-axis, weight as color, and mpg as size, with tooltips showing car names. The visualization leverages vega-lite-api’s fluent interface, registered with vega and vega-lite, and includes vega-tooltip for interactivity. A custom config adjusts axis, label, and title styling for readability, while the chart fits the window using autosize and SVG rendering.

May 28, 2023

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data and display its metadata using React and D3. It shows a simple text summary of a CSV file containing named CSS colors, reporting the file size, row count, and column count. The React component uses a `useEffect` hook to invoke D3’s `csv` function, which fetches and parses the remote dataset, then stores it in state. Once loaded, a custom `message` function formats the summary, which is rendered as SVG text.

May 28, 2023

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor inside an SVG canvas. The visualization shows the cursor's position in real time, updating the circle's center coordinates as the mouse moves. The React application uses the `useState` hook to store mouse coordinates and the `useCallback` hook to handle the `onMouseMove` event on the SVG element. The circle is rendered with SVG, and ReactDOM renders the component into the HTML root element.

May 28, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a straightforward way to load and parse CSV data using the D3.js library, version 7. It fetches a remote file containing CSS named colors and then displays three summary statistics: the formatted data size in kilobytes, the total row count, and the number of columns. The visualization uses `d3.csv()` to asynchronously fetch and parse the data, then computes the output by calling `d3.csvFormat()` to measure the data’s serialized length. Results are rendered as plain text inside an HTML `<pre>` element, with the font size significantly enlarged for readability.

May 27, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a classic smiley face rendered as a scalable SVG graphic using React components for structure and D3’s `arc()` generator to create the mouth path. The face is drawn with three circles for the head and eyes, plus a curved mouth arc, all centered within a 960×500 viewport. The code imports React, ReactDOM, and the `arc` function from D3 v5, then defines constants for layout dimensions and styling. A React component builds the SVG elements, while D3 computes the mouth’s path geometry based on specified radii and angles.

May 27, 2023

Loading thumbnail…

Smiley Face 1

A grid of eighteen smiley faces displays randomly varied facial features. Each face shows a yellow circle, two black eyes, and a curved mouth, with stroke width, eye offset, eye radius, and mouth dimensions changing per instance. The React components compose faces from SVG circles and an arc path, using d3.arc for the mouth. Data derives from d3.range and Math.random, rendered via ReactDOM.

May 27, 2023