Tsing

Cheap Tricks For interaction

This example shows a world map with hover and zoom interactions. It renders country boundaries and names using a Natural Earth projection, with each country highlighted in red on mouseover. The visualization loads geographic data from the world-atlas TopoJSON dataset and joins it with country names from a TSV file. It uses d3.geoPath with d3.geoNaturalEarth1 to draw the map, d3.zoom to enable pan and zoom, and SVG title elements for tooltips.

Nov 13, 2019

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3.js v5 with SVG rendering and linear scales to map the data points, which are displayed as semi-transparent circles. The chart includes labeled axes, tick marks, and a title, with the y-axis rotated for readability. Data is loaded from a CSV file and parsed before being bound to the SVG circles.

Bowl of Fruit with Lable- Click / Hover to Select

An animated D3.js v5 visualization presents a bowl of fruit where apples and lemons are rendered as colored circles with labels. Users can click or hover over individual fruits to select them, which triggers a white stroke highlight around the chosen item. The example demonstrates data updates through a sequence of timed operations: a fruit is removed, an apple changes to a lemon, and another fruit is deleted. The implementation uses selectors, ordinal scales for color and radius mapping, and transition methods to animate positional changes and attribute updates.

Week Temperature in SF

This visualization displays a week of temperature readings in San Francisco, using an area chart to emphasize the variation in daily highs and lows over time. The chart plots temperature against timestamps, with a smooth, filled curve that highlights the overall trend. Built with D3 v5, the code uses `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `curveBasis` to generate the smoothed path. Data is loaded asynchronously from a CSV file hosted on VizHub. The SVG rendering includes styled gridlines, axis labels, and a title, with a warm orange fill for the temperature area.

Bowl of Fruit with Lable- General Update Pattern

This example demonstrates the general update pattern in D3.js, showing how a bowl of fruit transitions when items are removed, modified, or replaced. The visualization uses SVG rectangles for the bowl and groups for individual fruits, with circles and text labels colored by fruit type via `scaleOrdinal`. Animated transitions, driven by `transition().duration()`, smoothly reposition fruits as the dataset changes over time. The code employs D3 v5 selections, data joins, and exit/enter patterns, with data sourced from a random ID generator and JavaScript arrays.

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how data joins manage enter, update, and exit selections. Circles represent fruit types—apples and lemons—with color and radius mapped via `d3.scaleOrdinal`, while `xPosition` spaces them horizontally. Using `d3.selectAll`, `data`, and `merge`, the code transitions new and existing SVG circles with `transition().duration()`, and exit selections shrink and remove themselves. The animation sequence, driven by timed `setTimeout` calls, removes, replaces, and filters fruit objects, highlighting dynamic data updates.

World Population Area Chart

This area chart visualizes world population growth over time, using a smooth, filled curve to depict the changing values. The chart plots population on the y-axis and years on the x-axis, with gridlines and axis labels for clarity. Built with D3 v5, the visualization uses the `area` generator and `curveBasis` for the filled path, while `scaleTime` and `scaleLinear` handle the axes. Data is loaded from a CSV file containing historical population figures by year, and the chart is rendered as an SVG with styled text and gridlines.

Face

This example shows a simple yellow face built from SVG shapes, with a mouth and eyes, whose pink cheeks animate by briefly moving downward and then returning to their original position. The visualization is rendered as a static SVG canvas, with the face centered and scaled to the viewport. The code generates the geometry using D3 v5, constructing circles for the face, eyes, and cheeks, and a path for the mouth via the `d3.arc` function. The cheek animation is driven by chaining D3 transitions, which adjust the `cy` attribute over a set duration.

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, with horizontal bars sorted by country name. The code uses d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a custom tick formatter that converts large numbers to abbreviated units like "B" for billions. Axis gridlines extend across the plot area via negative tick sizes, while y-axis ticks and domains are removed for a cleaner look. Data loads from a CSV file and is multiplied by 1000 to reflect actual population figures.

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, using population values from a CSV file. The chart orders countries along the y-axis with a band scale, while a linear scale maps population to bar length on the x-axis. Built with D3 v5, the SVG rendering uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, and `d3.csv` to load and prepare the data. Steelblue rectangles represent the bars, with axes and labels styled via CSS.

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and a path—and style them using CSS. It shows a static composition of simple geometric primitives, with a group of shapes transformed and recolored, and a separate group of lines with rounded joins given a distinct stroke color via CSS classes. The SVG is rendered inline in HTML with a 960×500 viewport, and CSS rules in an external stylesheet control stroke and fill properties. No JavaScript libraries are used, only native SVG elements and CSS styling.

HTML Cars Report

This example presents a static HTML report titled “Cars Report,” which displays a simple list of two vehicles. It demonstrates basic web rendering with plain HTML elements and a linked stylesheet. The page uses an unordered list to structure the car entries, while the `style.css` file applies global typography, setting a large monospace font size. No JavaScript libraries or data-loading mechanisms are involved; the visualization is purely document-based, showcasing how VizHub can render straightforward markup and CSS without external dependencies.

Practice

This example renders a simple text report from a dataset of five cars, each with a year, make, model, and price. It uses D3.js v5's `select` function to query the DOM and updates a `<pre>` element with a message generated by local modules. The `generateReport` function filters cars by a maximum price and maps them into formatted strings via `formatCar`, producing a line-separated list. The styling uses a custom Ubuntu font and a dark blue background.

Cars Report

This visualization displays a report of cars, showing their year, make, model, and price. The code loads a hardcoded JSON array of car data, parses it, and computes a simple message. The example uses D3 v5 to render the data in an HTML page, though the main display element is a pre tag styled with large font. The visualization highlights the integration of data parsing and page rendering, with the core logic in JavaScript using the JSON.parse API.