M

Matan

@matanmazor·20 public vizzes

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays automobile data from the auto-mpg dataset, plotting miles per gallon against a variable selected via a dropdown menu. Users can switch the x-axis attribute among columns like horsepower, weight, and acceleration. The visualization is built with React, D3 v6, and SVG rendering, using d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv for data loading. The dropdown menu is implemented as a reusable component with D3 selections, updating the chart dynamically on user interaction.

Loading thumbnail…

Choropleth map with interaction

This choropleth map displays global economic data, with each country colored according to its economy category. Clicking a color legend item filters the map, dimming non-matching countries and highlighting the selected category; clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country shapes from TopoJSON data, while d3.scaleOrdinal and schemeSpectral define the color encoding. d3.zoom enables panning and zooming, and the color legend uses d3 selections with click handlers for interaction.

Loading thumbnail…

Choropleth map

A choropleth map colors countries by economic classification using a purple ordinal scale and natural Earth projection. The visualization loads world geometry from TopoJSON and country names from TSV data via `d3.json` and `d3.tsv`, then renders paths with `d3.geoPath`. A custom color legend built with SVG circles and text appears in the corner, while `d3.zoom` enables panning and zooming over the map.

Loading thumbnail…

Colour and size legends

This example demonstrates how to build custom colour and size legends for a scatterplot using D3.js version 5. It uses `d3.scaleOrdinal` and `d3.scaleSqrt` to map categorical and numerical data, respectively, with the legends rendered as SVG groups of circles and text labels. The colour legend shows apples and lemons with distinct red and yellow fills, while the size legend displays five tick values from 0 to 10 with increasing circle radii. The code imports modular functions `colourLegend` and `sizeLegend` and updates DOM elements via D3’s selection join pattern.

Loading thumbnail…

World countries tree

This visualization shows a hierarchical tree of world countries, organized by continent and subregion. The layout uses the D3 `tree()` function on hierarchical JSON data, positioning leaf nodes like Afghanistan and India under regional groupings such as Southern Asia. SVG paths connect parent-child relationships, rendered with a yellow-to-teal linear gradient. Text labels display each country’s name, with font size decreasing by depth. The view supports zooming and panning through the D3 `zoom()` behavior on the SVG container.

Loading thumbnail…

Blank canvas

A blank, full-viewport SVG canvas fills the browser window with a single rounded rectangle. The page starts with an empty 960x500 SVG element, then dynamically resizes it to match the document's client width and height using `document.body.clientWidth` and `clientHeight`. The code imports `select` from d3, sets the SVG’s dimensions, and appends a `rect` with a 40-pixel corner radius. No data or interaction is present, demonstrating a minimal d3 SVG setup.

Loading thumbnail…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates a basic world map visualization using D3.js. It renders the Earth’s landmasses as green shapes on a blue sea, with country borders outlined in black, using a natural Earth projection. The code loads GeoJSON data from the `world-atlas` package and projects it with `d3.geoPath` and `d3.geoNaturalEarth1`. It also uses TopoJSON’s `feature` function to extract country boundaries, with all graphics drawn as SVG paths.

Loading thumbnail…

Bowl of fruit hover to select

Five fruit shapes sit in a bowl and change as data updates over time, with hovering highlighting a fruit in black. The visualization uses D3 v5 selections and data joins to bind fruit objects to SVG groups and circles, with `scaleOrdinal` for color and radius. Transitions animate position, fill, and size changes as fruits are removed or change type.

Loading thumbnail…

Bowl of fruit click to select

A bowl of fruit demonstrates interactive selection and data-driven updates with D3.js. Five apples render as circles in an SVG, and clicking any fruit selects it with a black stroke. The code uses `scaleOrdinal` for color and radius mappings, while `selection.enter`, `merge`, and `exit` manage dynamic updates as fruits are removed or change type. Transitions animate position and size changes over one second. A click handler triggers re-rendering to highlight the selected fruit.

Loading thumbnail…

Bowl of fruit nested animated

A bowl of fruit demonstrates D3 data joins with animated enter, update, and exit transitions. Apples and lemons render as colored circles with scaled radii, positioned based on array index. The code uses `selection.data()` with a key function, `enter().append()`, `merge()`, and `exit().remove()` to manage SVG groups. Timed `setTimeout` calls alter the fruit array, triggering smooth 1000ms transitions that slide fruits to new positions while updating circle attributes and text labels.

Loading thumbnail…

Bowl of fruit

A bowl of fruit is a D3.js example demonstrating fundamental DOM manipulation, showing a sequence of animated changes to a set of circles representing fruits. The visualization uses d3.select and d3.range to manage the SVG elements, with d3.scaleOrdinal mapping fruit types to colors and radii. A series of setTimeout calls triggers transitions: a circle is removed, one changes from an apple to a lemon, and another is filtered out, all animated over one-second durations using the selection.merge() and selection.exit() methods.

Loading thumbnail…

Bowl of fruit nested

Five apples render as red circles in an SVG bowl, then an apple is removed, one turns lemon yellow, and another is deleted in timed steps. The example shows D3.js data joins with key functions, using `selection.enter` and `selection.exit` to update groups and circles. `d3.scaleOrdinal` maps fruit types to colors and radii, while a `fruitBowl` function encapsulates the nested join logic.

Loading thumbnail…

Scatterplot

This visualization displays world population trends over time, using a smooth area chart rendered with SVG and D3.js. The y-axis shows population in abbreviated billions, while the x-axis maps years using a time scale. The code builds the chart with `d3.area`, `scaleTime`, `scaleLinear`, and axis components, using a curveBasis for the path. Data comes from a CSV file loaded via `d3.csv`. The chart includes labeled axes and a title, with gridlines created via tick sizes.

Loading thumbnail…

Scatterplot

This visualization displays temperature data for San Francisco over time, using a line chart to connect individual data points on a scatterplot. The chart includes labeled axes for date and temperature, with gridlines and axis labels rendered via D3.js v6. The code uses `d3.csv` to load the dataset, `scaleTime` and `scaleLinear` for scaling, and `line` with `curveBasis` to draw the smoothed path. The visualization is built with React, renders as SVG, and applies custom CSS for styling the circles and line.

Loading thumbnail…

Scatterplot

This scatterplot displays the relationship between vehicle weight and fuel efficiency (MPG) using the auto-mpg dataset loaded via d3.csv. The visualization uses D3 v6 scaleLinear functions to map data values to SVG coordinates, with axisBottom and axisLeft generating labeled axes. Circles are rendered through SVG elements with d3.selectAll and data joins, styled with semi-transparent steelblue fills. The chart includes custom axis label formatting via d3.format and margin-based layout transforms within a React-free HTML page.

Loading thumbnail…

Bar chart

This bar chart displays population figures for imagined countries from a CSV file, with countries on the vertical axis and population on the horizontal axis. Built with React and D3 v6, it uses SVG rendering and the `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The chart applies a custom tick formatter that converts G to B, removes axis domains and tick lines, and renders bars in steelblue.

Loading thumbnail…

Bar chart

This example shows a horizontal bar chart of population values across five countries, with a y-axis for country names and an x-axis for numeric population. The chart loads data from a local CSV file using `d3.csv` and renders SVG rectangles scaled with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are generated via `d3.axisLeft` and `d3.axisBottom`. The bars are styled with steelblue fills via CSS, and margins contain the plot area within an 960×500 SVG.

Loading thumbnail…

Let's make a face!

A yellow circle with a black outline, two dark eyes, and an arc-shaped mouth form a simple face. The eyebrows, drawn as rectangles, move up and down in a looping animation using D3's transition system. The SVG is generated with the `select`, `append`, and `arc` APIs, and the eyebrow movement is orchestrated with the `transition().duration()` and `.on("end", ...)` methods to repeat the motion. The face is centered in a 960x500 SVG canvas using a group transform.

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text "Hello HTML" centered at a very large font size. It demonstrates the fundamental structure of a web document by separating content, presentation, and behavior into HTML, CSS, and JavaScript. The styling uses a CSS rule on the `body` element for centering and font sizing, while a script tag logs "Hello JavaScript!" to the browser console. The page uses no external libraries, only native browser APIs for styling and console output.