J

janneprice

@janneprice·18 public vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, drawn as colored curved paths on a grid with axes and a color legend. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line`, `curveBasis`, `axisBottom`, and `axisLeft` to parse CSV data from Data Canvas - Sense Your City and render as SVG. A custom color legend module positions circles and labels, while mix-blend-mode multiplies overlapping strokes.

Loading thumbnail…

Scatterplot with Color Legend

An interactive scatterplot of the Iris dataset maps petal length against sepal width, with points colored by species through a categorical legend. Dropdown menus allow re-selecting X and Y axes from four floral measurements. Built with React and D3 v5, it renders an SVG using `scaleLinear` for axes, `scaleOrdinal` for color encoding, and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` components for tick marks and circles. Tooltips display formatted values on hover.

Loading thumbnail…

Scatterplot with Color

This interactive scatterplot displays the Iris Dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus select which measurement appears on the x- and y-axes, while color encodes the iris species. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and renders SVG circles via reusable components. Hovering over a point reveals its value in a native `<title>` tooltip. The data loads asynchronously from a CSV using D3’s `csv` function.

Loading thumbnail…

Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset, built with React and D3, allows users to dynamically select which flower measurements (sepal length/width or petal length/width) appear on the X and Y axes via dropdown menus. The visualization renders as an SVG, using `d3.scaleLinear` for both axes and `d3.extent` to compute domains, with tick marks styled via `d3.axis`-like custom components. Circles are positioned using the selected X and Y values, and hovering reveals native tooltips. Data loads asynchronously from a CSV using `d3.csv` within a custom `useData` hook.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. The visualization uses React hooks (useState, useEffect) to manage state and data loading, while D3 v5 (scaleLinear, extent, max, csv) handles scales, axes, and CSV parsing. Rendered as an SVG, each data point appears as a circle with a tooltip showing its value. The menus update the axes and labels dynamically, using d3.format for tick labels and React components for modular rendering.

Loading thumbnail…

Menus

This example shows a simple pet-selection menu in React. The interface displays a label and a dropdown menu; when a user picks a new option, the selection updates in real time. The code uses the React `useState` hook to manage the selected value and a custom `Dropdown` component that renders a native HTML `<select>` element. It leverages the `onChange` event handler to trigger state updates, with options defined as an array of value-label pairs.

Loading thumbnail…

Time Series

This time series visualization plots temperature against time using a smooth, curved path generated with d3.line and curveNatural. The chart loads CSV data from a GitHub gist, mapping timestamps to a time scale and temperatures to a linear scale. React manages the component state, while custom AxisBottom and AxisLeft components render tick marks and labels. The SVG rendering highlights the natural curve of daily temperature fluctuations, with a restrained aesthetic using muted axis text and a teal stroke.

Loading thumbnail…

World Map

A world map renders landmasses in teal with white graticules and country borders. The visualization loads TopoJSON data from the world-atlas package, converting it to GeoJSON features via topojson.feature and mesh. D3’s geoNaturalEarth1 projection and geoPath draw the sphere, graticule, land polygons, and interior boundaries within a React component using SVG.

Loading thumbnail…

Iris Scatterplot

This visualization displays the classic Iris dataset as a scatterplot, plotting sepal width against petal length for each flower specimen using an SVG renderer. Built with React and D3 v5, it uses `d3.scaleLinear` functions with `.nice()` to handle axis scaling, while custom `AxisBottom` and `AxisLeft` components generate ticks and gridlines. The `Marks` component renders circles with native SVG tooltips via `<title>`, and data is loaded asynchronously through the `useData` hook using D3's `csv` utility. The visualization also includes formatted axis labels using `d3.format` with abbreviated values.

Loading thumbnail…

Refactored Bar Chart

This bar chart displays the top ten countries by population in 2020, with horizontal bars showing population values. The visualization is built using React components that render SVG elements, with D3 v5 utilities handling data loading via `d3.csv`, scale construction through `scaleBand` and `scaleLinear`, and number formatting. Each bar is a `<rect>` element, and tick marks are generated by `xScale.ticks()` in the `AxisBottom` component.

Loading thumbnail…

Bar Chart with Axis

This example displays a horizontal bar chart showing population data for 15 countries, with a categorical y-axis for country names and a linear x-axis for population values. The chart is built with React state management, using the `useState` and `useEffect` hooks to asynchronously load CSV data via `d3.csv`. D3 scales (`scaleBand` and `scaleLinear`) map data to SVG coordinates, while custom text and line elements render the tick marks and gridlines. The SVG rendering approach is chosen over Canvas, with margins and inner dimensions calculated manually.

Loading thumbnail…

Pathetic Bar Chart

This example visualizes the ten most populous countries in 2020 as a horizontal bar chart, using bars that stretch across the screen without axes or labels. The chart loads UN population data from a CSV file via `d3.csv`, then processes each row to extract the 2020 population as a number. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and component state, while D3’s `scaleBand` and `scaleLinear` position the bars along the y-axis and scale their widths. The bars are rendered as SVG `<rect>` elements using React’s declarative JSX syntax.

Loading thumbnail…

Visualizing Data with React & D3

The example shows a pie chart of CSS named colors, with each slice sized equally and filled using its RGB hex value. It loads data from a CSV file via `d3.csv` and stores it in React state using the `useState` and `useEffect` hooks. The visualization is rendered as SVG paths generated with `d3.arc` and `d3.pie`, while React handles the component lifecycle and conditional loading display.

Loading thumbnail…

Viz Tutorial

This example shows a grid of 18 emoji faces, each with randomly sized eyes, rendered as SVG within a React application. The code demonstrates component composition, with separate React components for the head, face, eyes, and mouth. The mouth shape is generated using the `d3.arc()` API, while random eye sizes come from `Math.random()`. The visualization relies on React's `ReactDOM.render` to display the array of emoji components.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a Vega-Lite API template that renders an interactive bubble chart showing the population of religious groups by country. The visualization uses circular marks whose size encodes population values, with country on the x-axis and religion on the y-axis, and displays tooltips when hovering over marks. The code loads CSV data from a GitHub gist, applies custom axis and label styling through a config object, and renders the chart using the Vega-Lite API integrated with Vea, Vega-Lite, and the Vega Tooltip handler. The chart automatically fits to the browser window dimensions.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to integrate D3’s data-loading utilities with React state management. The application fetches a CSV file of CSS named colors from a GitHub gist using `d3.csv`, stores the parsed dataset in React’s `useState` hook, and displays a summary message generated by a helper function. While loading, it shows “Loading…” text, then presents the file size in kilobytes, row count, and column count via `d3.csvFormat` and the array’s `length` and `columns` properties. The code uses React hooks (`useEffect`, `useState`) and D3 v7.

Loading thumbnail…

Loading/Parsing CSV

This example demonstrates how to load and parse a CSV file using D3 v7. It fetches a remote dataset of CSS named colors and displays the file size in kilobytes, row count, and column count in a plain text container. The primary approach uses the `d3.csv` method, which returns a promise and automatically parses the data into objects. The commented-out code illustrates alternative methods using `fetch`, `async/await`, and `d3.csvParse` for manual text parsing.

Loading thumbnail…

Mouse Follower

A green circle tracks the cursor’s movement across an SVG canvas. The visualization uses React’s `useState` and `useCallback` to update the circle’s `cx` and `cy` attributes from the `onMouseMove` event’s `clientX` and `clientY` coordinates. The 960×500 SVG viewport is rendered via ReactDOM, with the circle starting at the canvas center.