NohaS

@NohaS·13 public vizzes

Bowl of Fruits-General Update Pattern

This visualization demonstrates the general update pattern for D3.js data manipulation. It shows a bowl of fruits whose contents change over time—initially displaying five apples, then removing one apple, replacing another with a lemon, and finally removing a second apple. The example uses D3 v5’s `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` methods to handle DOM updates, with the `fruitBowl` function managing the SVG circle and text elements. The `scaleOrdinal` color and radius scales map fruit types to visual properties.

Sep 11, 2023

Loading thumbnail…

World Population Area Chart

This example displays the growth of world population over time using an area chart. The visualization renders an SVG with a maroon filled area, based on data from a CSV file containing population figures by year. The code constructs the chart using D3's `scaleTime` and `scaleLinear` for the axes, and the `area` generator with a `curveBasis` to create the smoothed shape. Axis labels and ticks are styled using CSS.

Sep 8, 2023

Loading thumbnail…

area Chart

This area chart displays temperature trends in San Francisco over time, using a smooth basis curve to fill the region beneath the line with a maroon color. The visualization employs d3.scaleTime and d3.scaleLinear for axes, with d3.area and d3.curveBasis generating the filled path. Data is loaded from a CSV file using d3.csv. SVG rendering includes labeled axes and a title.

Sep 8, 2023

Loading thumbnail…

Temperature in San Francisco Line Chart

This chart displays temperatures recorded in San Francisco over time. The line chart uses a time-scaled x-axis and a linear y-axis for temperature values. The code utilizes the D3.js v7 library, importing functions such as `scaleTime`, `scaleLinear`, `axisBottom`, and `line` to construct the visualization. A smooth basis curve is applied to the path. The data is loaded from a CSV file, parsed with timestamps converted to Date objects, and rendered as an SVG with custom styling for the line, axes, and labels.

Sep 8, 2023

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg CSV file. Each red semi-transparent circle represents a car, positioned using d3.scaleLinear scales for both axes with padded tick marks and labeled axis titles. The chart is rendered as SVG using D3 v7, with axes created via d3.axisBottom and d3.axisLeft, and includes a title indicating the comparison. Data values are parsed to numbers before being plotted.

Sep 6, 2023

Loading thumbnail…

Scatter plot

This scatter plot displays the ten most populous countries, with population size on the x-axis and country names on the y-axis, using circular markers. The visualization loads data from a CSV file and renders it as SVG, employing d3.scaleLinear for the population scale and d3.scalePoint for country positioning. Axes are generated with d3.axisLeft and d3.axisBottom, while tick formatting converts numbers to abbreviated units. The chart includes gridlines and styled tick labels from CSS.

Sep 6, 2023

Loading thumbnail…

customizing Axes

This bar chart displays the top ten most populous countries using data from a CSV file, with population values formatted in billions. The visualization customizes both axes: the y-axis removes domain lines while the x-axis applies a tick formatter that converts abbreviations like "G" to "B". D3 v7's scaleBand and scaleLinear handle the layout, while axisBottom and axisLeft generate the ticks. Gridlines extend across the chart via negative tick sizes, and the svg rendering includes custom axis labels and a title.

Sep 6, 2023

Loading thumbnail…

Making Bar chart

This bar chart visualizes the population of ten countries, using horizontal bars scaled linearly along the x-axis and sorted categorically along the y-axis. Each bar’s length encodes the population value, with data loaded from a CSV file via `d3.csv` and scaled using `scaleLinear` and `scaleBand`. The chart renders in SVG, with axes generated by `axisLeft` and `axisBottom`, and bars styled with a steelblue fill. Population values are multiplied by 1,000 during data preprocessing to reflect actual counts.

Sep 1, 2023

Loading thumbnail…

let's make a face with D3.js

A smiling face is drawn on the canvas using D3 primitives, with a large yellow circle for the head, black circles for eyes, and an arc path for the mouth. Animated eyebrows move up and down on a two-second loop using the `transition().duration()` API. The underlying code manipulates SVG elements directly through `d3.select` and `svg.append`, and the mouth arc is generated by `d3.arc`, all within a React-rendered SVG.

Sep 1, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, a line, and a path—arranged on a 960×860 canvas using static markup in an HTML page. It demonstrates how CSS affects styling, as seen with a `fill` attribute and stroke properties applied directly to elements and groups, while an empty `.highlited` class hint at potential styling hooks. Rendering uses raw SVG within the DOM, with `transform` on a `<g>` element to offset shapes. The code relies on native HTML, CSS, and SVG APIs without external libraries like D3 or React, despite the README referencing a React starter.

Aug 31, 2023

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML report listing five used cars with their model years, makes, and prices. It shows how basic styling and highlighting can draw attention to specific list items, such as the red-colored duplicate entry for the 2000 Honda Accord. The visualization uses plain HTML with an unordered list, CSS for font sizing and the `.highlited` class, and no JavaScript frameworks or data libraries. The page structure and presentation are defined entirely through static markup and stylesheet rules.

Aug 31, 2023

Loading thumbnail…

SVG Fundamental

This example shows a simple text report generated from an in-memory JSON dataset of cars, filtered by price. The `generateReport` function imports the `cars` array and the `formatCar` helper, using JavaScript's `filter` and `map` methods to construct a multiline string of car details under a given price threshold. The result is displayed in an HTML `<pre>` element by directly setting its `textContent` via `document.getElementById`. The visualization relies on static HTML and JavaScript without any external libraries.

Aug 30, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3 and ES6 modules can be used to build a simple VizHub visualization. It loads D3 v5 from a CDN and uses `import { select } from 'd3'` to select the `#message` div and set its text. A separate local module, `myMessage.js`, exports the string 'Hello VizHub!' via `export const message`, which is then displayed. The page also includes a CSS file for styling the large centered text.

Aug 30, 2023