Fande Workspace

@fandeworkspace·4 public vizzes

Bar Chart

This bar chart displays the sepal length, sepal width, petal length, and petal width values from the Iris dataset, with each bar's length proportional to the numeric value in the "value" column. The visualization uses React for component structure and state management, while D3 v5 functions `csv`, `scaleLinear`, and `max` handle data loading and scaling. Bars are rendered as SVG rectangles with a smooth width transition, colored consistently in blue, and positioned along a linear scale that maps data values to pixel widths within a 600x400 canvas.

Mar 29, 2023

Loading thumbnail…

Bar Chart

A bar chart visualizes the average petal length for each iris variety (Setosa, Versicolor, and Virginica) from the classic Iris dataset. The code constructs the chart using D3.js v7 and React, loading data from a CSV file. Specifically, it uses `d3.scaleBand()` for the categorical x-axis and `d3.scaleLinear()` for the numeric y-axis, rendering the bars as SVG rectangles. The visualization also incorporates axes via `d3.axisBottom()` and `d3.axisLeft()`, with colors assigned from a predefined palette.

Mar 29, 2023

Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, plotting sepal length against petal length for each flower variety. The chart uses D3.js v7 with SVG rendering to display circles representing individual data points, with axes scaled linearly from zero to the maximum attribute values. The implementation defines a reusable `scatterplot()` function that accepts a selector, data, and two attribute names, enabling the same visualization logic to be applied to different data fields. The JavaScript code leverages `d3.csv()` for data loading, `d3.scaleLinear()` for coordinate mapping, and D3 axis generators to create the chart.

Mar 28, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a single HTML page that displays a large, centered text message reading “Hello HTML!”. It serves as a minimal demonstration of combining CSS for styling and JavaScript for potential interactivity, though the visible behavior is purely static. The page is built using plain HTML with a `<style>` block that sets the font size and alignment, and the `<body>` contains a `<div>` with the text. No external libraries or frameworks are loaded; it relies solely on native browser rendering. The CSS class `.message` applies a 13em font size and centered alignment to the text.

Mar 28, 2023