vic126

Selecting a Year on a Line Chart

This visualization shows population trends over time for major world regions, with a vertical green line marking a selected year that users can change by moving the mouse across the chart. The line chart uses d3.line with a curveBasis for smoothing, while d3.nest groups the data by region. A d3.mouse handler on a transparent rectangle calls xScale.invert to convert mouse position into a year, updating the selection. Data comes from UN population estimates loaded via d3.csv.

Jul 3, 2020

Melting Data for Multiple Lines

This visualization displays population trends over time for various global regions, with each region represented as a distinct colored line. The chart highlights how populations evolve from 1950 to 2100, combining historical estimates with medium-variant projections. The code uses d3.nest to group data by region, d3.line with curveBasis for smooth paths, and d3.scaleOrdinal with schemeCategory10 for colors. A custom colorLegend component renders the interactive legend, while data processing in loadAndProcessData.js melts the CSV dataset into a tidy format using d3.range and timeParse.

Jul 3, 2020

Circles on a map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The circles, sized with a square root scale, represent population magnitudes, while a legend explains the scaling. A color legend and interactive zooming are also included. The code uses D3 v5 APIs like `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `topojson.feature`, with data loaded from a CSV file and a TopoJSON world atlas. The visualization is rendered as an SVG within a React framework.

Jul 2, 2020

Animated Cars Scatter Plot with Menus

This interactive scatter plot displays automobile performance data from the auto-mpg dataset, allowing users to compare any two numeric attributes through dropdown menus. The visualization animates circles transitioning between positions when different axes are selected, with each circle representing a vehicle. Built with D3 v5, the example uses scaleLinear and extent for axis scaling, axisLeft and axisBottom for gridlines, and transition().duration() with delay to animate the SVG circles. Two dropdown menus, created dynamically via a reusable dropdownMenu function, enable selection of x and y axis variables.

Jul 1, 2020

Choropleth Map with Interactive Filtering

This example presents a choropleth map of world countries colored by economic classification, with an interactive legend that filters the map's display. Clicking a legend category highlights matching countries while dimming others; clicking again clears the filter. The visualization uses D3 v5's `geoNaturalEarth1` projection with `geoPath` for rendering, and `scaleOrdinal` with `schemeSpectral` for color mapping. Pan and zoom are enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON dataset, loaded and processed with `topojson.feature` and merged with TSV metadata.

Jun 30, 2020

Choropleth Map

This interactive choropleth map visualizes global economic data by coloring each country according to its economy category, using a spectral color scale with an accompanying legend. Built with React and D3 v5, the map projects geographic boundaries using the d3.geoNaturalEarth1 projection and renders paths as SVG elements. The visualization loads world atlas data from unpkg, merges tab-separated economy classifications with TopoJSON geometry via topojson.feature, and supports zooming through d3.zoom. Hovering highlights countries in pink while tooltips display each nation’s name and economy value.

Jun 30, 2020

Color and Size Legends

This example demonstrates two custom D3.js legends rendered as SVG within a React application. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to encode numeric tick values as circle radii. Both legends are constructed with D3's data join pattern (`selectAll`, `enter`, `merge`, `exit`), displaying circles and text labels. The color legend places swatches vertically, and the size legend scales circle areas according to the square-root scale, with tick generation via `sizeScale.ticks`.

Jun 29, 2020

Tidy Tree Visualization

A tidy tree visualization displays hierarchical country data organized by region, with the world at the root branching into continents, subregions, and individual countries. The layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates the curved connecting paths. Text labels scale in font size based on node depth, and d3.zoom enables panning and zooming of the SVG canvas.

Jun 28, 2020

Blank Canvas

A nearly blank canvas renders as a single rounded rectangle filling the browser viewport, sized dynamically to the window dimensions. The example demonstrates minimal D3.js usage with the `select` function to query an SVG element, then applies width and height attributes and appends a `rect` with a fixed corner radius. The visualization is purely geometric, with no data or interaction, serving as a template for React-based D3 projects. The styling enforces a fixed full-screen layout using CSS body rules.

Jun 26, 2020

Cheap Tricks for Interaction

This example shows a zoomable, hover-highlighted world map rendered with SVG. It uses d3.geoNaturalEarth1 projection and d3.geoPath to draw country boundaries and the ocean sphere, with country names from a world-atlas TSV file. Zoom interaction is implemented via d3.zoom and event transforms, while hover effects are styled with CSS. The code loads TopoJSON and converts it to GeoJSON using topojson.feature.

Jun 26, 2020

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green and the ocean (sphere) in powder blue. It uses D3.js's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings. The map data comes from the `world-atlas` package, loaded as TopoJSON and converted to GeoJSON using the `topojson.feature()` function. The `svg.append` and `selectAll` methods are used to draw the sphere and country paths onto the canvas.

Jun 26, 2020

Bowl of Fruit - Hover to Select

This example presents a bowl of fruit as five circles, initially all apples, arranged in a row. Hovering over a fruit selects it, highlighted with a grey outline. The visualization uses D3 v5 with a data join to animate changes: fruits are removed after one and three seconds, and one apple transforms into a lemon after two seconds. The code leverages D3's `scaleOrdinal` for color and radius, React-like props for state, and SVG transitions for smooth animations.

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, rendered as SVG elements in React with D3 v5. Clicking a fruit highlights it with a gray outline while its color and radius animate through `transition().duration(1000)`, mapping apple and lemon types via `scaleOrdinal` color and radius scales. The data join uses a key function for object constancy, and exit transitions shrink circles to radius 0 before removal as fruits are eaten or replaced over time.

Bowl of Fruit - General Update Pattern

This example demonstrates the D3.js general update pattern by rendering a bowl of fruit that changes over time. It shows a row of apples and lemons as circles with matching labels, updating via enter, update, and exit selections. The code uses `d3.select`, `scaleOrdinal` for color and radius, and `selection.merge` to handle transitions. Initial fruits are apples, then one is removed, another becomes a lemon, and a second apple is removed through timed `setTimeout` calls. The visualization renders as SVG elements driven by React.

Bowl of Fruit - General Update Pattern

Five apples appear as red circles in a row, then transform over time as one is removed, another changes to a yellow lemon, and a third is deleted. This demonstrates the D3 general update pattern, using the d3.select and d3.range APIs within a React framework. The fruitBowl function performs the data join, merging enter and update selections, while transitions animate the circle radii and horizontal positions over one second, and exit selections shrink before removal.

World Population Area Chart

This visualization shows global population trends with a smooth area chart, where the x-axis maps years using a time scale and the y-axis maps population using a linear scale. The SVG path is generated with `d3.area` and a `curveBasis` interpolation for a flowing silhouette. The code uses `d3.csv` to load population data from VizHub, and `d3.axisBottom` and `d3.axisLeft` render labeled axes with tick marks that span the chart. A title and axis labels complete the presentation.

Area Chart

A smooth, filled area chart visualizes a week of hourly temperature readings in San Francisco, mapping time on the x-axis and temperature on the y-axis. The SVG is rendered using D3 v5, with `scaleTime` and `scaleLinear` defining the axes and `area` with `curveBasis` generating the curved fill. Axis labels and a title are added, while data loads from a CSV via `d3.csv`.

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with each point representing a single observation. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.axisBottom` and `d3.axisLeft` to generate the gridlines with tick marks. Circles are styled with semi-transparent steelblue fill, and data is loaded from a CSV file containing timestamp and temperature values.

Line Chart

This line chart visualizes a week of temperature data in San Francisco, plotting temperature against time with a smooth curved line and semi-transparent circular markers for each data point. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the smooth path, and `axisBottom` and `axisLeft` for labeled, grid-lined scales. Data is loaded as CSV from a remote dataset and parsed into numeric and date formats before rendering.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for a dataset of cars. Each circle represents a car, with its x-position mapped to horsepower and y-position to acceleration using linear scales. The visualization is built with D3 v5, using SVG rendering and scaleLinear, axisBottom, and axisLeft components. The data is loaded from a CSV file on VizHub, and the code applies .nice() to smooth axis domains and includes formatted axis labels and a title.

Customizing Axes

This bar chart displays population estimates for ten countries using data from the United Nations World Population Prospects 2017, with each bar’s width scaled linearly by population. The visualization customizes both axes: the left axis removes its domain line and tick marks, while the bottom axis uses d3.axisBottom with a custom tick formatter that converts numbers into abbreviated “B” (billion) notation and extends tick lines across the plot height. The chart also removes the x-axis domain line and labels the population axis with a text element, with all elements rendered as SVG via d3-selection and d3-scale functions.

Making a Bar Chart

This bar chart shows the estimated 2020 populations of several countries, using data from the United Nations World Population Prospects 2017. Population values are displayed as horizontal bars, sorted alphabetically by country name, with the chart rendered as an SVG. The visualization uses d3.csv to load the data, and d3.scaleLinear and d3.scaleBand to map population values and country names to screen positions. Axes are generated with d3.axisLeft and d3.axisBottom, while bars are appended as SVG rectangles with a steelblue fill.

Let's make a face with D3.js!

A cartoon face built with D3.js v5 animates its eyebrows in a looping motion. The SVG face includes a circle head, two grey eyes, and a mouth drawn using the `arc` path generator. Eyebrows are rectangles that shift vertically through chained `transition().duration(2000)` calls. The code selects the SVG, centers a group with a transform, and uses React-style imports for `select` and `arc`.

Jun 23, 2020

Shapes with SVG and CSS

This example renders a static composition of SVG shapes—circles, rectangles, lines, and a path—on a 960×500 canvas. It demonstrates how CSS classes and inline attributes control visual styling, such as fill colors, stroke widths, and line joins. The SVG is scaled with a transform, and elements are grouped using `<g>` tags to apply shared styling like white fill with green strokes. The code uses raw SVG syntax, including the `d` attribute for the path’s move-to and line-to commands, and a linked stylesheet assigns stroke properties to the line and path groups. No external libraries are used.

Jun 23, 2020