HoosierExperienceDesigner

@HoosierExperienceDesigner·10 public vizzes

Fork of Vega-Lite API Template

This example presents a scatter plot of auto MPG data, showing displacement on the x-axis and horsepower on the y-axis, with semi-transparent point markers to reveal data density. The visualization is built using the Vega-Lite API, which generates a Vega specification rendered as SVG via D3 v5. Data is loaded from a CSV file fetched from the UCI Machine Learning Repository. The code includes custom styling for axes and tooltips, and uses vega-tooltip for interactive hover details.

Jul 28, 2021

Loading thumbnail…

Stylized Refactored Bar Chart

This bar chart visualizes the top 10 most populous countries using 2019 United Nations World Population Prospects data. It displays horizontal bars colored teal against a clean white background, with population values formatted in billions along the x-axis and country names on the y-axis. Built with React and D3 v5, the visualization uses scaleBand and scaleLinear for axes, while the Marks component renders SVG rect elements with built-in tooltips. The chart omits traditional gridlines and labels, instead employing a minimalist, stylized aesthetic with Poppins typography.

Jul 26, 2021

Loading thumbnail…

Refactored Bar Chart Code

This horizontal bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The code separates axis rendering and bar marks into distinct React components, using D3 v5 scaleBand and scaleLinear for mapping data to SVG coordinates. The implementation uses d3.csv for data loading and React's useEffect hook for asynchronous data fetching, with axes drawn manually through SVG line and text elements.

Jul 26, 2021

Loading thumbnail…

Loading Data in React & D3

This example demonstrates how to load and display CSV data in a React application using D3 utilities. The app fetches a CSS named colors dataset via `d3.csv` and manages the loaded data with React state, displaying a text summary of the data’s size, row count, and column count. The view updates from a “loading” message to the dataset statistics once the asynchronous data fetch completes, showing the integration of D3’s data-loading methods with React’s component lifecycle.

Jul 22, 2021

Loading thumbnail…

Fork For Parsing CSV

This example demonstrates a simple text-based visualization of CSV parsing. It fetches a remote CSV file containing CSS named colors and uses `d3.csvParse` to convert the raw text into structured data. The display shows three metrics: the file size in kilobytes, the number of rows, and the number of columns. The code uses the Fetch API via `fetchText` to retrieve the data and renders the results in a large `<pre>` element.

Jul 22, 2021

Loading thumbnail…

Fork for Cursor Following

A circle follows the cursor across a full-screen SVG canvas, continuously updating its position as the mouse moves. The React app uses the `useState` hook to store mouse coordinates and the `useCallback` hook to handle `onMouseMove` events, with `clientX` and `clientY` from the event object. The SVG circle’s `cx` and `cy` attributes are re-rendered with each move, and the viewport size is determined by `window.innerWidth` and `window.innerHeight`.

Jul 22, 2021

Loading thumbnail…

Forked Face

Ten randomly generated faces appear in an SVG canvas, each composed of a pink circular background, two eyes, a d3 arc-based mouth, and a black rectangular hat. The React components BackgroundCircle, Eyes, Mouth, Hat, and FaceContainer assemble the visual, while the App component maps over a d3.range array to render multiple variations. Each face’s stroke width, eye radius, and mouth width are randomized on render, producing a grid of subtly different expressions. The code relies on React for component structure and d3.v7 for the arc generator.

Jul 22, 2021

Loading thumbnail…

Fork of React Starter

This example demonstrates the minimal setup required to render a React component in a web page. It displays the text “Hello Reaction !” as large, centered content within a styled div. The code uses `React` and `ReactDOM` from the React 16.13.1 UMD builds, with `ReactDOM.render()` attaching the `App` component to the `#root` element defined in the HTML. Styling is applied via inline CSS in the `<style>` block, targeting the `.message` class. The bundled output runs from `bundle.js`.

Jul 21, 2021

Loading thumbnail…

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page using a simple DOM-based visualization. It loads D3 v5 from a CDN and uses the `select` function to target the `#message` div, setting its content with a local ES6 module import. The code demonstrates modular JavaScript with `myMessage.js`, while `styles.css` controls the font size and alignment. No external dataset is involved; the visualization is purely a static text rendering.

Jul 21, 2021

Loading thumbnail…

HXD Fork of HTML Starter

This example displays the text “Hello HTML” in the center of the page at an extremely large font size, using plain HTML and CSS. It demonstrates the fundamental structure of an HTML document, with a styled `<body>` and an embedded `<script>` tag. The JavaScript logs “Hello JavaScript!” to the browser’s console, showcasing basic scripting. The code uses no external libraries or frameworks, relying only on native HTML, CSS, and JavaScript.

Jul 21, 2021