Skip to main content
Log in
M

moinamazon123

@moinamazon123·7 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A playful yellow circle with two black eyes and a curved mouth forms a simple face using D3.js v6 within a React framework. The SVG rendering creates a circle for the head, positioned using the SVG dimensions, and appends eye circles with fixed spacing. A path element draws the mouth using D3's `arc()` generator with specified inner and outer radii. The example demonstrates basic SVG attribute manipulation and shape composition, using plain JavaScript with d3.select and append operations.

Dec 4, 2020
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles sized by population using a square-root scale. The map renders via SVG with a natural Earth projection from d3.geoNaturalEarth1, with country boundaries, land masses, and graticules drawn using d3.geoPath. React manages the component state, fetching city data from a CSV via d3.csv and world topology from TopoJSON using d3.json, with the feature and mesh APIs extracting land and interior boundaries.

Dec 4, 2020
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, with circle size scaled proportionally to population using a square-root scale. The visualization renders geographic boundaries, graticules, and a sphere outline via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` within a React component using SVG. City population data comes from the Simplemaps World Cities Database, while country shapes derive from TopoJSON world-atlas data, processed with topojson’s `feature` and `mesh` functions.

Dec 4, 2020
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature readings over time using data from the Data Canvas Sense Your City dataset. The visualization is built with React and D3 v5, rendering through SVG. The chart employs a smooth curved line via `d3.line()` with `curveNatural`, set to render in teal with a thick stroke. Time-scaled axes are positioned using `scaleTime` and `scaleLinear`, while tick marks and labels are generated through custom React components. The visualization uses Poppins typography and muted color accents for a modern aesthetic, with the temperature y-axis labeled against a time x-axis.

Dec 4, 2020
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between acceleration and horsepower for various car models, with tooltips revealing the car's name. Built using the Vega-Lite API for programmatic chart construction, it leverages `vl.markPoint()` and encoding methods like `vl.x()`, `vl.y()`, and `vl.tooltip()` to define the visualization. The code registers Vega and Vega-Lite via `vl.register()`, loads CSV data using `d3.csv()`, and applies custom styling from a `config.js` file to enhance readability. The visualization renders as an SVG, fitted to the browser window.

Dec 4, 2020
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature readings over time from the Data Canvas Sense Your City dataset, plotting a smooth curve through daily measurements. The visualization uses React with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `line().curve(curveNatural)` for the smooth path, and `csv` for data loading. The SVG rendering features a minimalist design with muted axis labels, thin grid lines, and a thick teal stroke, while the Poppins font adds a polished, modern aesthetic.

Dec 4, 2020
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between acceleration and horsepower for various car models, with tooltips revealing the car's name. Built using the Vega-Lite API for programmatic chart construction, it leverages `vl.markPoint()` and encoding methods like `vl.x()`, `vl.y()`, and `vl.tooltip()` to define the visualization. The code registers Vega and Vega-Lite via `vl.register()`, loads CSV data using `d3.csv()`, and applies custom styling from a `config.js` file to enhance readability. The visualization renders as an SVG, fitted to the browser window.

Dec 4, 2020