T

Tajallah-maryam

@Tajallah-maryam·17 public vizzes

Loading thumbnail…

Map

This map visualizes global population data from a CSV file (accessed via `d3.csv`), with each country’s population represented by a semi-transparent circle overlaid on a geographic projection. The circles’ areas are scaled using `d3.scaleSqrt`, and the map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG. Users can pan and zoom via `d3.zoom`, and hovering over a country reveals a tooltip with its regional name and population. A size legend, built with custom `sizeLegend.js`, and a color legend (`colorLegend.js`) accompany the visualization. Interactive encoding uses the `join` pattern to update SVG elements.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with D3.js using a natural Earth projection, displaying countries as light green polygons against a blue sphere background. The visualization loads geographic boundary data from the World Atlas TopoJSON file and converts it to GeoJSON features using the topojson feature API. The map is drawn as SVG paths using d3.geoPath with the d3.geoNaturalEarth1 projection, while the spherical outline is created by passing a Sphere geometry object to the same path generator.

Loading thumbnail…

Line Chart with D3.js

This line chart visualizes the Bitcoin Price Index from December 2017 to April 2018, using historical data fetched from the CoinDesk API. The chart displays price trends over time with a red line, clearly showing fluctuations in Bitcoin’s value across the four-month period. The visualization is built with D3.js v4, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes. The data is parsed from JSON into date-value pairs, and the SVG rendering includes styled gridlines, tick labels, and an axis label for price in dollars.

Loading thumbnail…

Line Chart with D3.js

This line chart displays the historical Bitcoin Price Index from December 2017 to April 2018, fetched live from the CoinDesk API. The data is parsed into date–value pairs and rendered as an SVG path using `d3.line`, with time and linear scales for the axes. A single line with a steelblue stroke shows the price trend over time, while axis labels are generated via `d3.axisBottom` and `d3.axisLeft`. The chart is built with D3 v4 and updates dynamically when the DOM content loads.

Loading thumbnail…

Line Chart with D3.js

This line chart visualizes the daily closing price of Bitcoin from December 31, 2017, to April 1, 2018, using data fetched from the CoinDesk API. The chart is drawn as an SVG using D3.js v4, with a time-scaled x-axis and a linear y-axis representing price in dollars. The line path is generated via `d3.line()` with rounded line joins and caps, styled in steel blue, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`. The dataset, parsed into date–value pairs, is rendered without additional point marks, focusing on the trend.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature over time for a week in San Francisco, using a smooth curving line in teal against a clean, minimal grid. The visualization is built with React and D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `d3.line` with `curveNatural` for the path, and `d3.csv` to load the Data Canvas Sense Your City dataset. Rendered as SVG, it features styled tick labels and Poppins typography, with temporary loading text displayed before data arrives.

Loading thumbnail…

Bar Chart using D3.js

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses D3.js v4 to render SVG rectangles, with each bar’s height proportional to the country’s population. The code maps data values through D3’s scale functions, and a `<title>` element provides tooltips for exact values. The chart is styled with a white background via CSS.

Loading thumbnail…

Bar Chart using D3.js

This visualization presents a simple bar chart of a fixed dataset representing eight numerical values, rendered as SVG rectangles using D3.js v4. The chart does not display axes or labels, relying instead on the raw bar lengths to convey magnitude against an implicit baseline. Using the `d3.select` and `selectAll` APIs, the code generates each bar’s height proportionally to its data value and applies a translate transform to position bars side by side with a fixed padding. The underlying data appears to be an arbitrary array rather than the UN population data referenced in the README, and the chart updates only on load with no interactive elements.

Loading thumbnail…

Bar Chart using D3.js

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization uses D3.js v4 to render SVG rectangles, with `d3.csv` loading the dataset and a custom React hook managing the data state. The chart employs an ordinal y-scale for country categories and a linear x-scale for population values, with tooltips showing exact figures. The code also includes a separate D3.js example using an array of numbers, demonstrating both React-integrated and standalone D3 approaches to bar chart creation.

Loading thumbnail…

Lets make a face with D3

This example shows a friendly cartoon face built with basic D3 shapes on an orange SVG canvas. A yellow circle forms the head, two black-and-white circles create asymmetric eyes, and a path generated with the `arc()` generator draws a smiling mouth. The code uses D3 v5 utilities like `select` and `arc`, imports them from the `d3` module, and relies on React for bundling. All geometry is positioned using the SVG’s width and height attributes, with explicit pixel coordinates for each facial feature.

Loading thumbnail…

Lets make a face with D3

This example shows a friendly cartoon face built with basic D3 shapes on an orange SVG canvas. A yellow circle forms the head, two black-and-white circles create asymmetric eyes, and a path generated with the `arc()` generator draws a smiling mouth. The code uses D3 v5 utilities like `select` and `arc`, imports them from the `d3` module, and relies on React for bundling. All geometry is positioned using the SVG’s width and height attributes, with explicit pixel coordinates for each facial feature.

Loading thumbnail…

Stylized Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars, with populations formatted in billions using D3’s `format` function and a custom tick format. The React app loads CSV data from the United Nations World Population Prospects 2019 via `d3.csv`, then uses `scaleBand` and `scaleLinear` to position bars on an SVG canvas. The bars and axes are rendered as React components, with styled tick lines and a Popins font for a clean, minimalist look.

Loading thumbnail…

Lets make a face with D3

This example shows a friendly cartoon face built with basic D3 shapes on an orange SVG canvas. A yellow circle forms the head, two black-and-white circles create asymmetric eyes, and a path generated with the `arc()` generator draws a smiling mouth. The code uses D3 v5 utilities like `select` and `arc`, imports them from the `d3` module, and relies on React for bundling. All geometry is positioned using the SVG’s width and height attributes, with explicit pixel coordinates for each facial feature.

Loading thumbnail…

Lets make a face with D3

This example shows a friendly cartoon face built with basic D3 shapes on an orange SVG canvas. A yellow circle forms the head, two black-and-white circles create asymmetric eyes, and a path generated with the `arc()` generator draws a smiling mouth. The code uses D3 v5 utilities like `select` and `arc`, imports them from the `d3` module, and relies on React for bundling. All geometry is positioned using the SVG’s width and height attributes, with explicit pixel coordinates for each facial feature.

Loading thumbnail…

Lets make a face with D3

This example builds a friendly cartoon face using D3 v5 shape and selection APIs within a React framework, rendering to SVG. It shows a yellow circular head with two eyes, rectangular eyebrows, and an arc-based smile positioned around a central group, all hardcoded with fixed pixel dimensions. The code uses `d3.select`, `d3.arc` for the mouth path, and SVG `circle`, `rect`, and `path` elements appended with attribute setters. No external data is loaded; the visualization is purely programmatic, with layout derived from the SVG's width and height attributes.

Loading thumbnail…

Lets make a face with D3

This example builds a face using D3’s SVG rendering capabilities. The visualization draws a simple face directly onto an SVG canvas, with the background set to red via `svg.style('background', 'red')`. The code uses D3 v5’s selection and style methods to configure the graphic, while the HTML file loads the D3 library from a CDN and embeds the SVG element. The project runs within a React starter framework, with the main logic in `index.js` and styling in `styles.css`.

Loading thumbnail…

Lets make a face with D3

A yellow circle with black strokes forms the base of a smiling face, complete with two eyes and a curved mouth, all rendered as SVG elements. The face is centered in a 960×500 viewport using a translated group. Built with D3 v5 in React, the code uses `select`, `attr`, and `arc` to position shapes and generate the mouth path from angular coordinates.