lrakla

World Map

This example displays a world map rendered as SVG paths using D3.js. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features via the `topojson.feature` API. The map uses a `d3.geoMercator` projection and `d3.geoPath` to generate the path data for each country. The code demonstrates basic data binding with `selectAll`, `data`, and `enter` to append country shapes to the SVG canvas.

May 10, 2022

Smiling Face

This example displays a classic yellow smiley face centered within an SVG canvas. The face is constructed from a large yellow circle with a black stroke, two smaller circles for eyes, and two rectangles as eyelids. The mouth is created using D3's arc API with defined inner and outer radii and specific angles. The React-based code leverages D3 v5’s select function to manipulate the SVG elements directly.

Jan 6, 2022

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned by X and Y axes. Users select which columns map to each axis via dropdown menus, built with a reusable `dropdownMenu` function that populates `<select>` elements from data columns. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grid lines, while circles transition smoothly with a 2000ms `transition().duration()`. Rendering uses SVG with animated circle placement based on the selected numeric columns.

Dec 30, 2021

Choropleth Map w Interactions

This choropleth map displays global economic groups using an ordinal color scale, where each country is colored by its economy category. Users can click legend items to highlight matching countries while dimming others, and hover over countries to see their name and economy value in a tooltip. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, and incorporates d3.scaleOrdinal with a spectral color scheme for categorical coloring. The map includes zoom functionality via d3.zoom, and data is loaded from the world-atlas package using d3.tsv and topojson.feature.

Dec 30, 2021

Fork of Chloropeth Map

A choropleth map colors countries by their economy classification, with a color legend and zoom-and-pan interaction. It uses `d3.geoNaturalEarth1` and `d3.geoPath` to render the world from TopoJSON data loaded via `d3.json` and `d3.tsv`, which joins country names and economy values by ISO codes. The visualization assigns colors via `scaleOrdinal` with `schemeSpectral`, and includes a custom `colorLegend` component. Interactive zoom is handled with `d3.zoom`, while SVG paths for countries are styled with hover effects.

Fork of Color and Size Legends

This example demonstrates two reusable legend components created with D3.js v5: a color legend mapping categorical names to colored circles, and a size legend using a square-root scale to encode numeric values through circle radius. The SVG output renders the legends with custom styling, including font size, spacing, and semi-transparent fill colors. The code defines modular JavaScript functions, `colorLegend` and `sizeLegend`, which are called with configuration objects to dynamically generate the legend groups, circles, and text labels based on the specified scale and tick values.

Color and Size Legends

Five apples are rendered as red circles, with a black outline indicating the currently selected fruit. Clicking a fruit updates the selection state. Built with React and D3 v5, the example uses `scaleOrdinal` to map fruit types to both fill colors and circle radii, creating a color and size legend. The visualization is rendered as SVG elements with React components.

Fork of World Countries Tree

This interactive visualization displays a hierarchical tree of world countries organized by continent and subregion, with each leaf node labeled by country name. The layout uses a horizontally-oriented tree structure where nodes are positioned based on depth and rendered as text elements with varying font sizes. Built with D3 v5, the visualization employs `d3.tree()` for layout computation, `d3.hierarchy()` for data structuring, and `d3.linkHorizontal()` for generating curved link paths between nodes. The SVG rendering includes zoom functionality via `d3.zoom()`, with data loaded from a JSON file containing the hierarchical country classification.

Interactive Tricks

This interactive map displays world countries using a natural Earth projection, with hover effects that change country colors to pink and tooltips showing country names. The visualization supports zooming and panning through d3.zoom, applied to the SVG group containing all geographic paths. It uses d3.geoPath with geoNaturalEarth1 projection, loads TopoJSON data from world-atlas, and merges country names from TSV data using reduce. The code leverages D3 v5 selection, JSON, TSV, and zoom APIs, rendering geographic features as SVG paths with CSS styling for interactivity.

Fork of Bowl of Fruit - Click to Select

Five apples are rendered in a row as SVG circles, with a black outline indicating the currently selected fruit. Clicking any apple updates the selection state. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mappings and React’s `useState` to manage the selected fruit’s ID. The code includes commented-out D3 transitions for potential animated repositioning, though the active version only handles static rendering and click handling.

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for data changes—removing, modifying, and reordering fruits in a bowl. It uses `d3.selectAll` and `d3.data` to bind an array of fruit objects to SVG groups, with `enter`, `merge`, and `exit` selections handling new, updated, and removed elements. The code creates circles and text labels, using `scaleOrdinal` for color and radius. Data transitions occur via `setTimeout` calls, showing how the visualization updates when fruits are eaten or replaced.

Dec 28, 2021

Fork of Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for animating changes in a data-driven SVG visualization. It shows a bowl of fruit, initially containing five apples, which are then modified over time through a series of setTimeout operations: an apple is removed, one apple is replaced with a lemon, and another apple is deleted, illustrating enter, update, and exit transitions. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs to map fruit types to circle colors and radii, with the `merge` method coordinating the incremental updates. The rendering approach is SVG, with circle positions fixed along the x-axis while their attributes (fill color, radius) and presence change dynamically.

Dec 28, 2021

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. It displays temperature in degrees Celsius over time, with a smooth curved line connecting data points against a grid with labeled axes. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the chart as SVG. Data is loaded from a CSV file via the `csv` function and rendered inside the SVG canvas.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red semi-transparent circles represent individual cars, with axes labeled and tick marks extending across the plot. The visualization uses d3.csv to load the data, d3.scaleLinear for both x and y scales, and d3.axisBottom and d3.axisLeft to render the axes. SVG rendering is used, with circle elements positioned via the scales and styled through CSS.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses a linear scale for population on the x-axis and a point scale for country names on the y-axis, with circles sized at a fixed radius of 20 pixels. D3 v5 handles the data loading through `csv()`, while `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` construct the chart elements. The axes are customized with formatted tick labels that convert large numbers to abbreviations, such as “B” for billion, and grid lines extend across the plot area.

Bar Chart + Axes

This example shows a horizontal bar chart of the top ten most populous countries, with population values scaled linearly and country names on a band scale. The SVG rendering uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to draw axes, while CSV data is loaded via d3.csv. Bars are appended as SVG rectangles with a fixed red fill, and axis tick labels are formatted with d3.format to abbreviate numbers. Population values are multiplied by 1000 after parsing.