Avonlea Fisher

@AvonleaFisher·11 public vizzes

Fork of Stylized Bar Chart

This example shows New York unemployment rates by year as a vertical bar chart, with navy styling for axis title and labels. It uses Vega-Lite’s `markBar` encoding with a quantitative y-axis and nominal x-axis, configured via the vega-lite-api. Data loads from a CSV via `d3.csv` in `getData.js`, and the chart renders in React with a fit autosize, a black tick color, and a tooltip exposing the rate value.

Feb 19, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the average unemployment rate for the top 10 most populous countries, rendered as a horizontal stylized bar chart with an SVG output using React. The chart uses d3.scaleBand and d3.scaleLinear to map countries and values, while d3.format formats tick labels. Data comes from the United Nations World Population Prospects 2019. Blue bars include a native SVG `<title>` element for tooltips, and loading states show "Loading..." via React hooks and the `useData` custom hook.

Feb 19, 2021

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from Data Canvas – Sense Your City. Each smoothed line, rendered with d3.line and curveBasis, represents a city’s temperature over time, colored using d3.scaleOrdinal with schemeCategory10. The chart includes axes with grid lines, a title, and a custom color legend. The code uses d3.csv for data loading, d3.nest for grouping by city, and d3.scaleTime for the time axis, rendering in SVG.

Feb 19, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes New York state unemployment rates from 1976 to 2020 using a line chart, with the data sourced from a CSV file linked in the code. It builds the visualization with the Vega-Lite API, registering Vega, Vega-Lite, and the tooltip handler in `index.js`. The `viz.js` file defines the line mark, encoding year on the x-axis and New York unemployment on the y-axis, while `config.js` customizes axis and label styling. Data is loaded via `d3.csv` in `getData.js`, and the chart is rendered as an SVG fitted to the window size.

Feb 19, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the ten most populous countries as a set of horizontal bars with no axes, labels, or other chart furniture. The bars are rendered as SVG rectangles using React, with their widths scaled linearly by each country’s 2020 population estimate from the United Nations World Population Prospects dataset. The code uses d3.csv to load the data, d3.scaleBand for the vertical positioning of each country, and d3.scaleLinear for mapping population to bar width. The chart updates once the data arrives, showing a "Loading..." state initially.

Feb 19, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a brief text summary of the US Police Shootings dataset, showing its size in kilobytes, row count, and column count. It loads the data from a CSV file using the `csv` function from D3 v5, and React state management handles the asynchronous fetch and rendering. The component uses `useEffect` to trigger the load and `useState` to store the resulting table, while the `message` function formats the statistics via `d3.csvFormat`.

Feb 18, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

A React component renders a yellow smiley face as SVG, with a filled circle for the head, two smaller circles for eyes, and a curved path for the mouth. The visualization uses D3's `arc` generator to compute the mouth’s path, while React manages the SVG elements and props. The code imports `arc` from `d3` and defines geometric constants for positioning. The face is centered within a 960 by 500 viewport, with the background circle’s radius and stroke width calculated to fit the frame. No external data is loaded; all shapes are defined programmatically.

Feb 17, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face rendered in SVG fills the browser window, with a yellow circle for the head, two black eyes, and a curved mouth. The React component uses D3's `arc` generator to create the mouth path, computing its inner and outer radii and start and end angles. Positioning and layout are driven by `window.innerWidth` and `window.innerHeight`. The SVG shapes are drawn inside a centered `<g>` transform, with hardcoded offsets for eyes and stroke width defining the face's proportions.

Feb 17, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js

A D3.js face is drawn with SVG shapes, featuring black circular eyes, a red mouth created with an arc generator, and eyebrows rendered as rectangles. The animated eyebrows shift downward and return via chained `transition()...duration()` calls, demonstrating movement within the SVG canvas. Built with D3 v6 selections, the code uses `d3.arc()` for the mouth path and manipulates SVG attributes like `cx`, `r`, and `transform` to position elements relative to the viewport center.

Feb 17, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot of the Iris dataset allows users to select which flower measurements to display on the x and y axes via two dropdown menus. Built with React and D3 v5, it renders SVG circles and axes, using `scaleLinear` for coordinate mapping and custom components for axes, marks, and menus. The visualization updates dynamically when the user changes the selected attributes.

Feb 11, 2021

Loading thumbnail…

Fork of Menus with React

This example demonstrates an interactive dropdown menu built with React. It shows a pet selector where users can choose from six options (Dog, Cat, Hamster, Parrot, Spider, Goldfish), and the selected value is logged to the console. The interface uses a `Dropdown` component that leverages React's `useState` hook to manage the selection state, rendering a `<select>` element with the `react-dom` library and the `Dropdown` callback `onSelectedValueChange`. The list of options is hardcoded in the `index.js` file as the data source.

Feb 11, 2021