nouralkhoury

Bar Chart with Highlighting

This bar chart displays 2018 population data for the ten most populous countries, with each bar color-coded by population size threshold. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scaleBand` for axes. Bars change opacity on mouseover and show a tooltip with country and population values via D3 event handlers. Data loads from a CSV file using `d3.csv`, and population values are multiplied by 1000 to convert from thousands.

Dec 1, 2020

Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over a week, with timestamps on the x-axis and temperature on the y-axis. The chart includes a red smoothed line (using `curveBasis`) overlaid on orange semi-transparent circles, though the circles are not explicitly rendered in the visible code. The visualization uses D3 v6 with `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line`, rendering SVG elements. Data is loaded from a CSV file on `vizhub.com` and parsed with timestamps as `Date` objects and temperatures as numbers. Styled axes, grid lines, and titles are configured via CSS classes.

Nov 30, 2020

Temperature in San Fransisco Scatter Plot

This scatter plot visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents an individual measurement, and hovering over a circle highlights it in yellow. The chart uses d3.scaleTime and d3.scaleLinear to map data to positions, and d3.axisBottom and d3.axisLeft to render the axes. It loads data from a CSV file, converts timestamps to Date objects, and draws the plot as SVG circles.

Line Chart

A line chart displays temperature over time, using a time-scaled x-axis and linear y-axis. The data comes from a CSV file and is rendered as SVG circles and paths using React and D3 v6. The chart includes styled axes, tick marks, and a temperature label, with a tooltip showing the day of the week for each point.

Let's make a map with D3.js!

This example uses D3.js to build an interactive orthographic map of the world, rendered as SVG paths. It loads GeoJSON country boundaries from a TopoJSON dataset via `topojson.feature`, then draws the globe with `d3.geoOrthographic` and `d3.geoPath`. Hovering highlights countries in red, while the `d3.zoom` behavior enables pan and zoom transformations on the entire map group.

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Globe Zoom - Animate

An interactive orthographic globe visualizes country-level data, allowing users to zoom and rotate the projection. A choropleth map colors each country according to a numeric value, with a search feature that highlights a selected country and a rate filter for subsetting. Built with React and D3 v3, the visualization uses `d3.geo.orthographic` for the globe, `d3.geo.path` for rendering, and TopoJSON for world geography. The data is loaded from a local CSV file.

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Choropleth Map

This choropleth map visualizes a socioeconomic metric across countries, using a spectral color scale to encode each nation's value from the provided CSV dataset. The map employs D3's `geoPath` and `geoNaturalEarth1` projection to render world country boundaries from the world-atlas TopoJSON, with a custom `colorLegend` showing the scale. Hovering highlights a country in red, and the visualization supports zooming via `d3.zoom`.

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Choroplath Map with Interactive Filtering

This choropleth map displays country-level data values using an orthographic projection rendered as SVG. Users can filter the map by clicking color legend items, which dims non-selected countries and highlights matching ones. The visualization uses d3.geoOrthographic, d3.geoPath, and d3.zoom for panning and rotating, with d3.scaleOrdinal mapping values to color classes. Data comes from a CSV file joined to TopoJSON world geometry, with tooltips showing country names and values.

Making a map

This example displays a world map rendered as black-background SVG paths, using geographic data from the World Atlas TopoJSON file. It transforms the data with `topojson.feature` and projects it using `d3.geoMercator` before drawing each country through `d3.geoPath` in a D3 v5 selection.

Colorpleth Map

This colorpleth map visualizes a global economic dataset, showing each country colored according to its value on a spectral scale. The map uses D3 v5 and the `geoNaturalEarth1` projection to render geographic boundaries, with an ordinal color scale and an interactive legend built through `scaleOrdinal` and custom SVG elements. The choropleth overlays data from the World Atlas TopoJSON and TSV files onto a natural Earth sphere, with zoom functionality and hover effects highlighting individual countries.

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Choroplath Map with Interactive Filtering

This choropleth map colors countries by economic category and supports interactive filtering through a clickable legend. Selecting a legend category highlights matching countries while dimming others, and clicking again clears the selection. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while d3.zoom enables panning and zooming. Color categories are assigned via d3.scaleOrdinal with CSS classes, and the legend’s click handler toggles the filter. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG paths with tooltips showing country names and values.

Let's make a map with D3.js!

This example uses D3.js and TopoJSON to generate an orthographic projection map of the world. It loads world country boundaries from a JSON file hosted on unpkg, converts the TopoJSON data into geographic features, and renders each country as a green SVG path with a subtle black stroke. The visualization employs `d3.geoOrthographic` and `d3.geoPath` to create the projection, with the dark blue background and minimal styling coming from the linked CSS.

Colorpleth Map with interactive filtering

This interactive choropleth map visualizes economic data across countries using a color scale, with a legend allowing users to filter countries by clicking on specific values. The map renders in SVG using d3.geoOrthographic projection and d3.geoPath, while the accompanying color legend enables selection that highlights matching countries and dims others. Data comes from a CSV file merged with world atlas TopoJSON via d3.csv and topojson.feature. Users can also zoom and pan the map using d3.zoom.

Rotating Globe

A rotating orthographic globe displays country-level data values, with landmasses rendered in sky blue and hover states highlighted in dark blue. Using D3 v5 with `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via `d3.timer`, while a graticule overlays the sphere. The visualization loads world topology from TopoJSON and country names from a CSV file, with zoom support via `d3.zoom`.

Globe Zoom - Animate

Nov 25, 2020

Trying to make a map!

This example attempts to create a choropleth map showing country-level data values. It loads geographic boundaries from a TopoJSON world file and joins them with a CSV dataset containing numeric values per country. The visualization uses D3 v6’s `geoPath` and `geoMercator` to project and render the SVG paths, with fill colors representing the data values from `cars.js`. The map’s incomplete styling and visible base color suggest a work-in-progress, as many countries remain in the default color while others are tinted.

Nov 24, 2020

My Map!

This interactive SVG world map visualizes country-level data from a CSV file, using a color scale from light blue to red to represent the "value" field for each country. Built with D3 v5 and the `d3.geo.orthographic` projection, it loads country geometries from a TopoJSON file and colors them via `d3.scale.linear`. Users can click on any country to explore its associated information, though the detailed interaction logic is not fully implemented in the provided code. The map renders geographic paths with `d3.geo.path` and includes a legend for the color scale.

Nov 24, 2020

D3 Course 7: World Map - Rotating Globe

This example shows a rotating orthographic globe, with land masses rendered in light green against a black background. Country names appear as hover tooltips. The globe rotates continuously based on an elapsed time timer, with the projection's rotation updated accordingly. D3's `geoOrthographic` projection, `geoPath`, and `geoGraticule` are used to define the map, while land data comes from the `world-atlas` package. The visualization uses SVG rendering and a zoom interaction, and displays a graticule overlay.

Nov 22, 2020

IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes a sample of 200 defensive asylum cases, plotting wait times in days against the date cases entered the system. A dropdown menu filters data by year, and hovering over the color legend highlights points by decision code. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and coloring. The SVG visualization includes custom React components for axes, marks, and an interactive color legend that adjusts opacity on hover.

Nov 22, 2020

Female, Military Ration and Retention plotted by Region or System

This scatterplot maps governmental cabinet attributes—female ratio, military ratio, and retention—across countries, with points colored by region or governmental system and filtered by a year slider (1966–2016). Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles for marks, with interactive dropdowns and a range input. Data derives from the WhoGov International Cabinets dataset, loaded via `csv` in `useData`.

Nov 22, 2020

Globe Zoom - Animate

This interactive visualization presents global data on a rotatable globe, supporting zoom and pan through d3.behavior.zoom. Users can switch between orthographic, Winkel3, and Mercator projections. The display animates between datasets, including geo-scatterplot transitions and population growth percentages. Country boundaries and graticules render via d3.geo.path, with a custom pattern marking missing data regions. Tooltips provide details on hover.

Nov 21, 2020

Making a

A smiley face drawn with SVG shapes animates its features: the right eye slides horizontally, and the left eyebrow shifts vertically. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` to target the SVG element and `append` to create circles, a rectangle, and a path. The mouth is generated with the `d3.arc` API, which computes an annular sector path. Transitions with `.transition().duration()` animate the eye and eyebrow attributes over time.

Nov 21, 2020

Globe Zoom - Animate

This visualization combines a world map with a scatterplot of nuclear explosion locations, rendered using D3.js v3 with SVG. The map displays land masses, graticules, and country interiors, while points mark each nuclear event's latitude and longitude. The visualization uses a Mercator projection via `d3.geoMercator()` and `d3.geoPath`, with data loaded from TopoJSON for the map and CSV for nuclear explosion records. The React-based frontend manages data fetching through custom hooks, supporting interactive exploration of global nuclear testing patterns.

Make a MAP with D3.js!

This example shows how to create a map using D3.js version 6, rendering geographic data as SVG. It loads world country boundaries from the world-atlas TopoJSON dataset and prepares to display them with a Mercator projection. The code uses `d3.geoMercator` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to convert TopoJSON to GeoJSON. The visualization is a simple starter template with an empty SVG canvas waiting for the map to be drawn.

HTML Starter

This example presents a scatter plot of the auto-mpg dataset, using red semi-transparent circles to show the relationship between vehicle attributes. The code imports specific D3 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart within an SVG, while CSS styles the circles and text. The data is loaded as CSV and parsed into numeric values, though the rendering logic itself is left as an empty function, leaving the visualization incomplete.

HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

HTML Starter

Nov 19, 2020

Shapes with SVG and CSS

This example displays a static composition of SVG shapes, including a yellow circle and a series of rectangles and lines, all scaled by a factor of 1.2. It demonstrates how SVG elements and CSS classes work together to apply visual styling, with the `.lines` class setting stroke properties and the nested `path` element receiving a blue stroke and round line joins. The drawing is rendered using raw SVG markup within an HTML file, linked to an external stylesheet for presentation.

Nov 8, 2020

Line and area charts

This example visualizes the temperature in San Francisco over time using a line and area chart. It plots a smooth, maroon line to represent temperature changes across a time series, with axes labeled “Date” and “temperature” and a title “Temperature in San Francisco.” The visualization is built with D3 v6, using `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes, and `line` with `curveBasis` for the smoothed path. Data is loaded from a CSV file, with timestamps parsed as `Date` objects and temperatures as numbers.

Line and area charts

HTML Starter

HTML Starter

This example shows a horizontal bar chart of population by country using a small CSV dataset. The code loads data with `d3.csv`, scales the population values, and renders SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It uses `axisLeft` and `axisBottom` for tick marks, with a steelblue fill for bars. D3 v6 is imported from the npm package, and the chart is built imperatively by appending elements to an SVG container.

BAR CHART

This bar chart visualizes population estimates for ten countries, ordered alphabetically along the vertical axis with horizontal bar lengths proportional to population counts. The visualization uses D3 v6 within a React framework, employing `scaleLinear` and `scaleBand` to map data values to SVG coordinates. The code loads data from a CSV file using `d3.csv`, converts population strings to numbers, and renders the chart as an SVG with axes generated by `axisLeft` and `axisBottom`. Bars are styled with a steel-blue fill via CSS.

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, building on a basic bar chart example. The code uses `d3.csv`, `scaleLinear`, and `scaleBand` to map population values and country names, while `d3.selectAll` appends SVG rectangles for each bar. The axes themselves are customized to improve readability, though the chart does not show axis labels or tick formatting in the provided code.

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017 data. It demonstrates how to customize D3 axes by applying custom scales and label formatting. The visualization uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.max to compute the domain. Data is loaded from a CSV file using d3.csv, and the chart is rendered as SVG elements via D3 selections.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates how to customize D3 axes, including styling and formatting of tick marks and labels. The code uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `csv` to load the data, rendering SVGs with `select` and `append`. The example builds on a basic bar chart tutorial, showing enhanced axis configuration.

Making a bar chart

This example shows a horizontal bar chart ranking the world’s ten most populous countries, with population values labeled in billions and a steel-blue fill for each bar. It uses D3 v5’s `csv` loader to import data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` with a custom tick formatter that converts G to B. The SVG rendering includes margins, a title, and an axis label, demonstrating core DOM manipulation through `select` and `append`.

Making a bar chart

A bar chart displays population figures for nine countries, with steel-blue rectangles whose lengths encode each nation’s population. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to render ticks. Data loads from a CSV via `d3.csv`, and the SVG renders axis groups and rectangles through `append` and `enter` selections.

Let's make a face with D3.js!

This example builds a stylized face using D3.js, with each facial feature—eyes, nose, and mouth—composed of geometric elements arranged on an SVG canvas. The face is drawn programmatically using D3’s selection and shape APIs, such as `d3.arc` for the mouth and `d3.line` for the eyebrows, all within a React framework. The visualization demonstrates how D3’s data-binding and attribute manipulation can construct a recognizable figure from simple primitives, rendering directly to SVG via the `d3.select` and `append` methods. The face’s proportions and placement are fixed, showing a static composition rather than interactive behavior.

Sep 27, 2020