kezianathania021@gmail.com

@Kezia-Nathania·11 public vizzes

HW2

An interactive scatter plot of the classic Iris dataset, colored by species, displays measurements of sepal and petal dimensions. Two dropdown menus let users choose which measurement appears on each axis, and the plot updates instantly. The code uses D3 v7’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to render SVG circles, with data loaded from a local CSV file via `d3.csv`.

Sep 17, 2024

Loading thumbnail…

HW1

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses D3.js (v7) to render circles colored by species (Iris-setosa, Iris-versicolor, and Iris-virginica) on an SVG canvas. Users can dynamically change the X and Y axes via Bootstrap dropdown menus, which trigger a re-render of the scatter plot. The code uses D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to handle scaling, axes, and color encoding, with CSV data loaded from `iris.csv`.

Sep 10, 2024

Loading thumbnail…

Fork of HW1

An interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width across three iris species. Users select which measurement appears on each axis through Bootstrap dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 to color points by species, and d3.axisBottom and d3.axisLeft for tick marks, all rendered as SVG elements with a transparent circle effect.

Sep 10, 2024

Loading thumbnail…

Fork of Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements through changeable X and Y axes. A color legend distinguishes the three flower species, and hovering over a species name highlights those data points while dimming others. Built with React, the visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and color mapping, with custom React components rendering SVG axes, marks, and legends. Data loads via d3.csv, and the ReactDropdown component manages axis selection.

Sep 8, 2024

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a collection of cars, with each point representing a single vehicle. The chart uses red, semi-transparent circles to reveal overlapping data density, and displays axis labels and a title against a clean white background. The visualization is built with D3 v7, leveraging `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load the auto-mpg dataset, scale the axes, and render the SVG output. Axes are customized with tick lines, and the data points are positioned using the linear scales.

Sep 8, 2024

Loading thumbnail…

Scatter Plot

A scatter plot displays the populations of the top 10 most populous countries, with circles positioned along a linear x-axis for population counts and a point scale y-axis for country names. The code uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG visualization. Population values from the CSV data are multiplied by 1000, and the x-axis tick labels are formatted with `format('.3s')` to display values in billions. Grid lines extend across the chart via tick sizing, and the circle radius is fixed at 18 pixels.

Sep 8, 2024

Loading thumbnail…

Customize Axes

This example visualizes the populations of the top 10 most populous countries as horizontal bars, showing each country's total population. The chart uses a linear scale for the population axis and a band scale for country names, with customized tick formatting that abbreviates numbers (converting gigabyte notation to billions). The code leverages d3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes, while `format('.3s')` handles number formatting. Data is loaded from a CSV file, with population values multiplied by 1000 during preprocessing.

Sep 8, 2024

Loading thumbnail…

Intro to D3

A cheerful yellow face built from SVG shapes demonstrates the basics of D3.js v7. The code uses d3.select to append circles for eyes and an arc-generated path for the mouth, with the face centered via an SVG transform. Eyebrow rectangles animate through d3.transition, moving up and down over two-second intervals. The example relies on d3.arc and d3.select, rendering in SVG with a yellow background circle.

Sep 8, 2024

Loading thumbnail…

Bar Chart with D3 and SVG

This bar chart displays population data for ten countries, using horizontal bars to show relative population sizes. The visualization uses D3 v7 with SVG rendering, and loads data from a CSV file. The code constructs linear and band scales using d3.scaleLinear and d3.scaleBand, and adds axes with d3.axisLeft and d3.axisBottom. Each rectangle's width is set proportionally to the population value, with country names positioned along the y-axis.

Sep 8, 2024

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays car data from the UCI Auto MPG dataset, letting users choose which columns map to the X and Y axes via two dropdown menus. Built with D3 v5, it renders SVG circles with animated transitions, scaling each axis using d3.scaleLinear and d3.extent. The dropdown menu component uses D3 selections to bind options and handle change events, while axis labels update dynamically as the user selects different attributes.

Sep 5, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 runtime environment, which supports continuous hot reloading and interactive widgets, using a blank slate “Hello World” starting point. The `main` function from `index.js` takes a `container` DIV element and renders a fixed `fontSize` of 217 pixels directly into its inner HTML, with no external data source. It shows how Alt-dragging a number in the editor can adjust properties like font size in real-time, highlighting the simplified entry point that replaces the traditional `index.html` file.

Sep 5, 2024