O

OvxOO

@OvxOO·18 public vizzes

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a zoomable world map with hover interactions, where countries change color on mouseover. It renders geographic features using d3.geoPath with a d3.geoNaturalEarth1 projection, and applies zoom behavior via d3.zoom to transform the map group. The map data comes from a TopoJSON file combined with a TSV file for country names, loaded through d3.json and d3.tsv. The SVG is styled with CSS for the country fills and hover effects.

Loading thumbnail…

Temperature in SanFranciso Area Chart

This area chart displays a week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses D3.js v5, reading data from a CSV file of the Data Canvas - Sense Your City project. The chart employs D3's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs to create a smooth filled area, alongside styled grid lines and axis labels for readability.

Loading thumbnail…

Lets make a Map with D3!

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with black outlines. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` function, then draws the map with d3.geoPath and d3.geoNaturalEarth1. The blue sphere background path is generated directly from a sphere object.

Loading thumbnail…

Lets make a Face!

A yellow smiley face appears centered on an SVG canvas, built from D3 shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate upward and back down repeatedly using D3's `transition()` with a two-second duration. The code uses `d3.select`, `d3.arc`, and attribute setters to construct the static face, while the animation is driven by chained `transition().attr()` calls, rendering in SVG.

Loading thumbnail…

Bowl of Fruits - Click to Select

This example demonstrates a dynamic fruit bowl visualization where users can click individual fruit circles to select them. It shows how D3’s general update pattern handles entering, updating, and exiting SVG elements with smooth transitions. The code uses `d3.scaleOrdinal` for color and radius mappings, `selection.enter()` and `selection.exit()` with `.transition()` to animate circle appearance and removal, and an `onClick` handler that triggers a re-render. Randomly generated fruit IDs serve as data keys, with apples and lemons represented as red and yellow circles.

Loading thumbnail…

Extra Smiley

A yellow smiley face with black-outlined circles for eyes and a filled arc for a mouth is rendered on a gray background. The eyebrows, drawn as rectangles, animate by translating vertically up and down over a two-second duration using d3’s `transition` and `.attr` methods. The visualization uses SVG shapes and a `d3.select` call to build the scene, with the mouth path created via `d3.arc`.

Loading thumbnail…

Bowl of Fruits - Group General Update Pattern

This example demonstrates the D3.js group general update pattern for enter, update, and exit selections. A bowl of apples transitions through timed changes: fruit removal, type replacement, and filtering, with orange lemons appearing among red apples. The visualization uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` with ordinal scales for radius and color, rendering fruit as SVG groups containing circles and labels.

Loading thumbnail…

Bowl of Fruits - General Update Pattern

This example demonstrates the general update pattern in D3, showing how data joins manage enter, update, and exit states for SVG circles. A bowl of apples transitions over time as fruits are removed, replaced with lemons, and filtered out, with each change animating via `transition().duration(1000)`. The code uses `scaleOrdinal` for color and radius scales, `selectAll('circle').data(fruits, d => d.id)` for keyed data binding, and `.enter()`, `.merge()`, and `.exit()` to coordinate lifecycle updates.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population from 1950 to 2015, with the x-axis mapping years and the y-axis showing population counts. The chart uses an SVG rendering approach with D3 v5, employing `scaleTime` and `scaleLinear` for the scales, `axisBottom` and `axisLeft` for the axes, and an `area` generator with `curveBasis` to create the smooth filled region. Data comes from the United Nations World Population Prospects 2017, loaded via `d3.csv`, with axes labeled and tick marks formatted to display billions. The visualization includes a title and grid lines for readability.

Loading thumbnail…

Temperature in SanFranciso Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses a time-scaled x-axis and a linear y-axis to plot temperature values, with a smooth curved line generated by d3.line and curveBasis. The chart includes labeled axes, a title, and gridlines created with d3.axisLeft and d3.axisBottom. Data is loaded as CSV and parsed into Date objects and numeric temperatures before rendering in SVG.

Loading thumbnail…

Temperature in SanFranciso Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map the data, with `axisBottom` and `axisLeft` generating the labeled axes. Semi-transparent circles represent individual measurements, sourced from the Data Canvas - Sense Your City dataset, rendered as SVG. The chart includes a title and axis labels, with grid lines created via tick sizing to enhance readability.

Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart ranking the ten most populous countries in 2017, using population data from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis displays country names with gridlines removed, while the x-axis uses `d3.axisBottom` with a tick formatter that converts large numbers (e.g., G to B) and adds horizontal gridlines via `tickSize`. Built with d3.v5, it employs `scaleLinear` and `scaleBand` to map data, rendering SVG rectangles styled with a gold fill.

Loading thumbnail…

Cars Scatter Plot 2

This scatter plot visualizes the relationship between MPG and acceleration for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each semi-transparent red circle represents a car, with position determined by linear scales mapping the data ranges to the SVG canvas. The chart includes labeled axes with grid lines, a title, and uses d3.csv for loading, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent for data processing and rendering in SVG.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for cars in the UCI Auto MPG Data Set. Each circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, with a purple, semi-transparent fill. The visualization is built with D3 v5, using `scaleLinear` for both axes and `extent` to compute domains from the data. Axis tick lines extend across the plot, and labels for the axes and chart title are added via SVG text elements. Data is loaded asynchronously from a CSV using D3’s `csv` function and parsed to numeric values before rendering.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries as of 2017, using United Nations population data from the World Population Prospects 2017. Each circle’s vertical position maps the country name via `d3.scalePoint`, while the horizontal axis uses `d3.scaleLinear` for population values, with axis ticks formatted using `d3.format`. The SVG rendering is driven by `d3.csv` to load data and `d3.axisLeft`/`d3.axisBottom` for axes. The chart also includes grid lines and a labeled title, with margins calculated from the SVG’s width and height.

Loading thumbnail…

Cars Report

This example demonstrates a text-based cars report generated from a local JSON dataset. It displays a list of vehicles, formatted as "year make model: price," filtered to include only cars priced above a threshold. The data is loaded asynchronously using a Promise with a simulated two-second delay via `setTimeout`. The visualization uses plain JavaScript with `JSON.parse` to parse the embedded car data, `Array.filter` and `Array.map` to process the entries, and DOM manipulation via `getElementById` to update the page content. A custom Ubuntu font and dark background style are applied through the included `styles.css`.

Loading thumbnail…

Shapes with SVG AND CSS

This example demonstrates basic SVG shape rendering and styling using raw SVG elements alongside CSS rules. It displays circles, rectangles, lines, and a path, with some shapes using default black fills while others specify explicit fill colors like red and green. A grouped set of shapes applies a light blue fill and black stroke through an attribute, while a separate group with the class `lines` uses CSS to define stroke properties, with its path element overridden to use a red stroke and rounded line joins. The SVG is scaled using a transform, and the page layout removes margins and hides overflow.

Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries in 2018 using a horizontal bar chart, with population values from UN World Population Prospects 2017. The SVG visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. Bars are drawn as SVG rect elements, filled with steelblue, with population numbers scaled by 1000.