tenghaoman

@tenghaoman·11 public vizzes

Geo Chart

This example visualizes a world map from TopoJSON country data, rendering each country as an SVG path. The view uses a Natural Earth projection fitted to the canvas. The code depends on d3.geoPath for path generation, topojson.feature for data conversion, and d3.tip for interactive tooltips. Hovering highlights a country, while right-clicking toggles a tooltip showing the country's name. Colors are not mapped to data; the map focuses on geography and interaction.

Aug 14, 2020

Loading thumbnail…

Static LineChart

A static line chart visualizes temporal stock price data from a CSV file, plotting the `close` values as a black line against a time-based x-axis and linear y-axis. The chart uses D3 v5 to parse dates and numbers, construct scales via `d3.scaleUtc` and `d3.scaleLinear`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The line is drawn using the `d3.line` path generator, with the SVG output styled to remove fill and apply a thin black stroke.

Aug 10, 2020

Loading thumbnail…

Population per most populated countries

This visualization displays population data for the most populated countries as circles positioned on a scatterplot, using d3.scaleLinear for x and y axes. The SVG rendering includes d3.axisBottom and d3.axisLeft for coordinates. The code currently plots static circle elements using data binding with d3.selectAll and .enter().append('circle'), though population data appears to be represented by the predefined coordinate array rather than loaded external data.

Aug 8, 2020

Loading thumbnail…

scatter-move

A scatterplot animates daily COVID-19 case counts across Hubei regions, plotting cumulative confirmed cases on a logarithmic x-axis against new daily cases on a logarithmic y-axis. Each circle represents a region, colored distinctly, and transitions smoothly between dates using D3 v5's `transition().duration()` within a `setInterval` loop. The SVG axes are rendered with `d3.axisLeft` and `d3.axisBottom`, with data parsed from `hubeinxt.csv`.

Aug 8, 2020

Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Aug 6, 2020

Loading thumbnail…

Population per most populated countries

This horizontal bar chart displays the population of the ten most populous countries, with China and India leading significantly. The chart uses D3 v5 to load data from a CSV file, scales the population values by a thousand, and renders the bars as SVG rectangles. Axes are created using `d3.axisBottom` and `d3.axisLeft`, with population labels formatted using `d3.format` to abbreviate large numbers. Gridlines and chart labels are styled via CSS, and the visualization is presented with a clean, minimal aesthetic.

Jul 22, 2020

Loading thumbnail…

Load and Parse Csv File

This example demonstrates loading and parsing a CSV file with D3, displaying the dataset’s size in kilobytes, row count, and column count as plain text. It fetches a remote CSV from a GitHub gist using `d3.csv`, which parses the file into an array of objects. The formatted data is measured with `d3.csvFormat`, and the computed metrics are injected into an HTML `<pre>` element via `textContent`. The page uses D3 v5 with a minimal, unstyled body layout.

Jul 22, 2020

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a blank, full-window SVG canvas. The example demonstrates a simple interactive mouse-follower pattern where the circle’s center position is updated in real-time based on pointer movement. Built with React and D3 v5, it uses React’s `useState` hook to track mouse coordinates from an `onMouseMove` event, then renders the circle via SVG. D3 is imported solely for its `arc` function, though it is not used for the visualization’s core behavior.

Jul 21, 2020

Loading thumbnail…

Load Csv File

This example demonstrates loading a CSV file in a React application. A large, bold "Load CSV Data" heading is centered on the page, while the browser console displays the raw text content of a remote CSV file fetched from a GitHub gist. The code uses the native `fetch` API along with ES6 syntax, including `async`/`await` and template literals, to asynchronously retrieve and log the data. No parsing or visualization of the CSV content is performed, as the example focuses solely on the initial data-loading step.

Jul 20, 2020

Loading thumbnail…

Smile Face with React and ES6

Eight randomly generated smiley faces render in a grid using React components and SVG. Each face, composed of a yellow background circle, black eyes, and a D3-generated arc mouth, receives randomized eye radius and mouth width values via JavaScript’s `Math.random`. The code imports React and ReactDOM for component rendering, and D3’s `arc` and `range` utilities to construct the mouth path and iterate over eight faces. A `FaceContainer` component manages SVG dimensions and centering transformations.

Jul 20, 2020

Loading thumbnail…

Make a Smile Face

This example shows a yellow smiley face drawn using D3.js and React with SVG rendering, featuring two eyes and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the facial features, positioning circles for the eyes and a path for the mouth on a 960×500 canvas. The face is centered via a translation transform, with all shapes styled using SVG attributes like `fill`, `stroke`, and `r`.

Jul 20, 2020