cyanea1

yi xiao Map

This example visualizes earthquake totals across U.S. states by applying a logarithmic transform and mapping the results to an ordinal color scale with a sequential red scheme. The choropleth map uses `d3.geoAlbersUsa` projection, `d3.geoPath`, and TopoJSON state boundaries. Hovering highlights states in green. A color legend is rendered with `colorLegend.js` using `d3.scaleOrdinal`, and tooltips display state name, region, and raw earthquake counts. Data comes from a CSV of state earthquake records.

graph

This example shows a force-directed graph of programming languages and their relationships, with nodes representing languages and curved links indicating connections. The graph uses green dashed lines for links with a value of 0 and solid black lines for value 1, suggesting different relationship types. The code builds the visualization using d3.forceSimulation with link, charge, and centering forces, while SVG renders the circles, labels, and curved paths. A drag interaction lets users reposition nodes, and the alphaTarget(1) keeps the simulation continuously running.

HTML Cars Report

The HTML Cars Report displays a network graph of named individuals and groups, with links representing connection strength via weighted values. Using D3.js v3’s force simulation, the visualization positions nodes and draws curved SVG paths whose stroke width and opacity reflect link weights. The graph includes clusters such as PoloClub and its members, with data embedded directly in the script as JavaScript arrays. Redundant links between the same pairs, like Alice–Peter or Chirag–Meghna, are each rendered separately, producing overlapping parallel curves in the final layout.

nodes

This interactive visualization displays a network of programming languages and their relationships, using nodes connected by links to show connections between languages like Java, C, Python, and JavaScript. The graph is rendered using D3 v5's `csv` loading and `scaleLinear` functions, with SVG circles representing each language. The visualization presents a scatter plot of car data from the UCI Machine Learning Repository's Auto MPG dataset, mapping horsepower on the x-axis and weight on the y-axis with red semi-transparent circles. The code imports specific functions from the d3 library including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `format` to construct the axes and scales.

Untitled

This example visualizes population growth over time for global regions, drawing on UN population estimates (1950–2014) and medium-variant projections (2015–2100). It renders multiline time-series curves using d3.line with curveBasis, scaled by d3.scaleTime and d3.scaleLinear, while a categorical d3.scaleOrdinal with schemeCategory10 assigns region colors. The chart includes axes, gridlines, and a custom color legend built via d3-selection. Data is processed by melting a wide CSV format into tidy rows, filtering for regions only, and concatenating the historical and projected datasets.

Sep 30, 2019

graph2

A force-directed network graph displays weighted relationships between named individuals, with nodes as circles and links as paths whose thickness reflects link value. The layout is computed using D3 v3's `d3.forceSimulation` (likely `d3.layout.force`), rendering to SVG with CSS styling for node fill, stroke, and text labels. Data is hardcoded as a JavaScript array of link objects specifying source, target, and numeric value, which drives node positioning without external data files.

graph2.js!

This example uses D3.js (v5) to draw an animated smiley face in SVG. It shows a yellow circle with two eyes and a mouth, whose eyebrows move up and down via chained `transition()` calls. The code constructs the face using `select`, `append`, and `attr`, and generates the mouth path with the `arc` API. The animation runs on page load with a 2-second duration per eyebrow movement.

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates fundamental DOM manipulation and animation. The code uses `d3.select` to append SVG circle and rectangle elements for the face, eyes, and eyebrows, while a D3 arc path creates the mouth. Eyebrow movement is shown through chained `transition` calls that animate the group's transform attribute over two-second durations. The yellow face with black outlines highlights basic SVG rendering and D3's data-driven approach to styling and positioning.

Ordinal Scatter Plot

This ordinal scatter plot displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Each country is positioned along a point scale on the y-axis, while population values are plotted on a linear x-axis formatted in billions. The visualization uses D3 v5 with SVG rendering, employing `scalePoint` for the categorical axis, `scaleLinear` for population, and `axisLeft`/`axisBottom` to generate gridlines and tick labels. Circle radii are fixed, with data loaded via `csv` and preprocessed by multiplying population values by 1000.

Hello VizHub

This example demonstrates a minimal “Hello, World!” message rendered in large, centered text with a dark navy background. It uses D3 v5’s `select` function to target a `#message` div and set its text content to a string imported from a separate ES6 module. The styling relies on an external Google Fonts stylesheet and a local CSS file, while the HTML page loads D3 from a CDN and executes the bundled JavaScript.

Line Chart with Multiple Lines

A line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, ordered by final temperature. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A custom `colorLegend` component renders the city labels, while SVG rendering applies `mix-blend-mode: multiply` to overlapping strokes.

Ordinal Scatter Plot

This graph displays the relationships among various programming languages, with nodes connected by curved paths indicating their associations. The layout is generated using a force-directed simulation with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`. Nodes are draggable, and the visualization updates in real-time via the simulation’s tick event, rendering SVG circles and text labels. The code defines links from an inline dataset, where each connection includes a source, target, and value, though the value is not used in the final rendering.

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. Each red, semi-transparent circle represents a car, with its position determined by the `d3.scaleLinear` scales mapping horsepower and weight values. The SVG rendering includes labeled axes with gridlines, created using `d3.axisBottom` and `d3.axisLeft`. The code loads data via `d3.csv`, converts numeric fields, and appends circles to the chart with a title, demonstrating a clear positive correlation between the two variables.

Ordinal Scatter Plot

An ordinal scatter plot displays the population of the top 10 most populous countries in 2018, using a linear x-scale for population and a point scale for the categorical country names on the y-axis. The visualization, built with D3 v5 and rendered as SVG, encodes each country as a circle and includes labeled axes and grid lines. Data is loaded from a CSV file and processed with D3’s csv and scaleLinear functions, while axis generation relies on axisBottom and axisLeft.

Hello VizHub

Sep 24, 2019

Lego Sets by Year from Rebrickable

This visualization displays the cumulative number of Lego sets released each year, using data from Rebrickable. It shows a running total over time with a bar chart rendered as SVG. The code imports specific D3 v5 modules, including `scaleLinear`, `scaleTime`, `csv`, `axisLeft`, and `axisBottom`, to construct the axes and plot. The x-axis is formatted with time intervals, while the y-axis is scaled linearly. The visualization reads the dataset from a CSV file, calculates the maximum value for domain scaling, and appends rectangles to represent the data.

Sep 4, 2019

Lego Sets by Year from Rebrickable

This visualization shows the cumulative number of Lego sets released each year, based on data from Rebrickable, with a bar chart where each bar represents a year’s running total. The chart scales time on the x-axis and a linear count on the y-axis, using d3.scaleTime and d3.scaleLinear, while axes are generated with d3.axisBottom and d3.axisLeft. Rects are appended to an SVG group to draw the bars, and tick formatting is customized with d3.timeYear.every to space year labels. The data is loaded via d3.csv and transformed before rendering.

Sep 4, 2019