Emmanuel Chukwujindu

@emasco7·13 public vizzes

Scatterplot with menus

This interactive scatterplot explores relationships between variables in the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let users select which columns to plot on the x- and y-axes, dynamically updating the visualization. Built with D3 v5, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component. The plot renders axes with gridlines and animates new data points via `.transition().duration(500)`, drawing paths instead of circles for the data series.

Apr 4, 2021

Loading thumbnail…

Fork of Multiple Line plot

This visualization displays monthly PM2.5 particulate levels in London from 2010 to 2018, with each year rendered as a separate smoothed line using d3.line and curveBasis. The nine lines are color-coded by year using a sequential color scale, and a color legend identifies each year. Data comes from the Kings College London Air Quality Dataset via the London Datastore. The chart uses D3 v5 with SVG rendering, including scales from d3.scaleTime and d3.scaleLinear, axes from d3.axisBottom and d3.axisLeft, and a dropdown menu for data selection.

Apr 3, 2021

Loading thumbnail…

chapter 7

This example visualizes six data points mapping salary to friend count using a scatterplot. D3.js v5 creates the SVG circles and axes. It uses `scaleLinear`, `extent`, `axisBottom` with negative tick sizes, and `axisRight` for the y-axis. An empty group element renders the x-axis, while the y-axis appears without an explicit transform. The circles are positioned using the scales from the hardcoded array of salary and friend values.

Apr 1, 2021

Loading thumbnail…

chapter 7

This example demonstrates a minimal starting point for working with D3 version 6, showing a blank 500x500 SVG canvas. The code sets the `background-color` attribute to red on the SVG element using the `select` function from D3, though the attribute name is not a standard SVG property. It relies on the d3.v6 library loaded from a CDN and executes the selection logic in a separate `bundle.js` file, providing a basic template for further visualization development.

Apr 1, 2021

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization displays population trends over time for different global regions, using multiple lines to compare regional growth from 1950 to 2100. The chart employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `line` with `curveBasis` to render smoothed paths. Data is sourced from UN population estimates and medium-variant projections, processed through a custom melt function. A color legend created with `colorLegend.js` identifies each region, while the y-axis uses a custom formatting function to abbreviate population values.

Mar 28, 2021

Loading thumbnail…

world countries

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using a tidy tree layout that spreads nodes horizontally. It shows the geographic classification structure from the loaded `data.json` file, with country names rendered as text labels at varying font sizes based on depth. The implementation uses D3.js v5 APIs including `d3.json`, `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute and draw the tree paths as SVG elements. Pan and zoom interactions are enabled through `d3.zoom`, which applies transform updates to the main group element.

Mar 27, 2021

Loading thumbnail…

resizeable

This example demonstrates a simple smiley face whose eyebrows move, built with D3.js v5. The visualization fills the entire browser window, using an SVG canvas that resizes dynamically based on the client dimensions. The code employs D3's `select` and `arc` functions to construct the face within an SVG `<rect>` element. It showcases fundamental DOM manipulation and responsive layout techniques by setting the SVG width and height attributes to match the viewport, making the graphic adapt to any screen size.

Mar 27, 2021

Loading thumbnail…

Temperature in San Francisco Line Chart with zoom

This line chart visualizes one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. The view transitions from an overview to a detailed focus through d3.zoom, which applies a transform to the chart group on zoom events. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for the smoothed path, and d3.axisLeft and d3.axisBottom for ticks. Data is loaded via d3.csv and rendered as an SVG.

Mar 27, 2021

Loading thumbnail…

map interactions

This example displays an orthographic projection of the world map using D3.js and TopoJSON, with country boundaries rendered as SVG paths. Hovering over a country turns it red, while a d3.zoom behavior allows panning and zooming of the entire map. The map data comes from the world-atlas TopoJSON and TSV files, and country names are added as tooltips via SVG title elements. The projection and path generation use d3.geoOrthographic and d3.geoPath.

Mar 27, 2021

Loading thumbnail…

lets make a map

This example creates a map of world countries using the GeoJSON data from the world-atlas package. The visualization displays each country as a tomato-colored path with white strokes, projected using D3's geoOrthographic projection. The code imports geoPath and geoOrthographic from d3, along with the feature function from topojson, to transform raw geographic data into SVG paths. The resulting map is rendered entirely through SVG elements, demonstrating a straightforward approach to geographic data visualization with D3.js.

Mar 27, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization is built using D3 version 5, with axes rendered via `axisBottom` and `axisLeft`, and the temperature trend drawn as a smooth curve using the `line` generator with `curveBasis`. Temperature and timestamp values are parsed from a CSV file loaded from VizHub, and the chart includes labeled axes and a title. The SVG output is styled with custom CSS, using a maroon line path and steelblue circles.

Mar 27, 2021

Loading thumbnail…

Fork of Fork of Bowl of Fruit - clicks

Five apples render as circles in an SVG, with clicks, mouseovers, and mouseouts temporarily highlighting a fruit with a black stroke. D3 transitions animate new fruit entering with a radius of zero and removed fruit shrinking away. The code uses `d3.scaleOrdinal` for color and radius, plus selection `.merge` and `.transition` to update positions. A timer-driven sequence replaces an apple with a lemon and removes other apples over time.

Mar 27, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, showing how to handle special cases when entering, updating, and exiting data elements within a visualization. It uses the D3 v5 library with SVG and animation to display a bowl of fruit represented as circles, where apples and lemons are distinguished by color and size. The code uses `selection`, `enter`, `merge`, `exit`, and `.transition()` to animate changes, while the logic in `index.js` simulates data mutations like removing, replacing, and filtering fruit items. The data source is a simple array of fruit objects with random IDs, and the rendering is powered by the D3 `scaleOrdinal` for color and radius scales.

Mar 27, 2021