Bjoernujjwb

@Bjoernujjwb·12 public vizzes

Fork of Victory!

A horizontal bar chart displays population figures for ten countries, from China to Mexico. The chart uses VictoryChart and VictoryBar from the Victory library, loading its data from a CSV file via d3.csv within a React application. The React component uses hooks like useState and useEffect to fetch and store the data before rendering.

May 9, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users switch which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axes generated using custom scale functions and tick components. The code includes interactive dropdown components that trigger state updates, allowing real-time switching between the dataset’s numeric attributes.

Jan 15, 2023

Loading thumbnail…

Fork of Menus with React

This example shows a React-based interactive dropdown menu for selecting a pet type from a list of options. The selected value, such as “Dog” or “Cat,” is displayed in the dropdown, and state updates on every change. The app uses React’s `useState` hook to manage the selected value, the `Dropdown` component to render the `<select>` element, and ReactDOM to mount the main `App` component. Options are hardcoded data with `value` and `label` pairs, and the selection change triggers `onSelectedValueChange` to update the state.

Jan 8, 2023

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the ten most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019. The visualization is rendered with React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The code defines reusable React components for the axes and marks, drawing SVG `<rect>` elements for each bar. Data is loaded asynchronously via D3’s `csv` function and sliced to the top ten entries.

Jan 6, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This radial burst visualization displays all CSS named colors as equal-sized slices arranged in a circle. The code loads color data from a CSV file using D3’s `csv` utility, then uses React with `useState` and `useEffect` to manage the asynchronous data fetch and rendering. D3’s `pie` and `arc` functions compute the pie geometry, while each slice is drawn as an SVG `path` with its fill color set directly from the data’s RGB hex values.

Jan 6, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot maps automotive displacement against horsepower, with tooltips revealing vehicle names on hover. Built on the Vega-Lite API, the visualization fetches the auto-mpg.csv dataset via D3’s `csv` loader and renders marks through Vega’s SVG view, customized with larger axis labels and a dark color palette. The chart resizes to fit the viewport.

Jan 2, 2023

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading CSS named colors data from a GitHub Gist using D3’s `csv` utility, with React managing the asynchronous state via `useState` and `useEffect`. While fetching, the app displays a “Loading…” message; once the data arrives, it renders a summary showing the file size in kilobytes (computed with `d3.csvFormat`), row count, and column count. The visualization is purely textual, using React’s `message` helper and a styled `<pre>` element, with no graphical charts or custom rendering involved.

Jan 2, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example visualizes the CSS Named Colors dataset by rendering each color’s name in a large, styled <pre> element. It demonstrates loading CSV data with D3 v5’s `d3.csv` and parsing the rows to extract color names and hex values. The code uses a React framework to manage the component state, while D3 handles the asynchronous data fetching. On load, the parsed entries are displayed sequentially, with the text color set to match each hexadecimal value.

Jan 2, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data from a remote URL. The code fetches a CSV file containing CSS named colors from a GitHub gist, then parses the response as text and logs it to the browser console. It uses the standard JavaScript `fetch` API with promise chaining to handle the asynchronous HTTP request. The visualization focuses solely on data acquisition, with no visible rendering or graphical output beyond the console log.

Jan 1, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source, specifically the CSS Named Colors dataset. It shows the raw text content of the CSV file logged to the browser console. The code uses the Fetch API to request the file from a GitHub gist URL, then chains a promise to extract and print the response text. No external visualization libraries are used; the focus is purely on data retrieval and inspection in a minimal HTML page.

Dec 28, 2022

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black border and a dark gray ring for a mouth form a simple face on a blank SVG canvas. The example demonstrates how React components wrap D3 shape generators, with the background circle defined as a reusable React component and the mouth created using D3's `arc` generator. The SVG is rendered directly into the DOM via ReactDOM, while D3 v7 provides the geometry for the arc path.

Dec 28, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal SVG scatterplot-style page renders a single circle without axes or labels, using raw HTML with an embedded `<svg>` element sized at 960×500 pixels. The circle is positioned with `r="100"` but lacks cx and cy attributes, defaulting to the origin (0,0), and is drawn without any JavaScript libraries. The page sets `margin: 0` and `overflow: hidden` on the body, focusing entirely on the static vector graphic as a bare-bones example of SVG markup in an HTML document. No animation or interaction is present, showcasing only the basic structure of a standalone SVG visual.

Dec 24, 2022