Janet Chen

@janet-chen·6 public vizzes

Let's make a map

This example shows a world map rendered as SVG paths, with each country outlined using a Mercator projection. The code loads a GeoJSON-like dataset from the world-atlas package and uses the `topojson` library's `feature` function to extract country features. It then applies `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data for each country, appending them to the SVG canvas.

Feb 6, 2020

Loading thumbnail…

React Starter

This example displays the text “Hello React!” centered in a large font size. It serves as a minimal starter template for integrating React with a visualization environment. The application uses React and ReactDOM to render a single functional component, `App`, into the root DOM element. The page loads React and ReactDOM from external UMD scripts and mounts the component via `ReactDOM.render`, with styling applied through a CSS class. The code does not include any data visualization or interactive behavior.

Feb 6, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates how the General Update Pattern in D3.js handles special cases of data joins, using a bowl of fruit metaphor. The visualization shows apples and lemons represented as colored circles with labels, updating between two data arrays ([10,20,30] and [40,50]). The code uses `selection.merge()`, `selection.enter()`, and `selection.exit()` to manage element updates, with `d3.scaleOrdinal` for color and radius scales. The visualization renders SVG elements and includes a video tutorial link in the README.

Jan 30, 2020

Loading thumbnail…

React Starter

This example demonstrates how D3’s data-join pattern can be used within a React application to render circles that change color based on value. It shows a minimal setup where two arrays of numbers are passed to an `updateVis` function, which appends circles to an SVG using `d3.select`, `selectAll`, and `enter`. Each circle’s radius and vertical position are fixed, while horizontal placement is calculated from its index. Circles with values greater than 30 are filled blue, otherwise red, using D3’s `attr` method. The code relies on React 16.10, D3’s `select` and `range`, and a bundled JavaScript file.

Jan 30, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with `axisLeft` and `axisBottom` rendering the axes. Data is loaded from a CSV file, with population values multiplied by 1000. The chart highlights axis customization through margin adjustments and a styled steelblue fill for the bars.

Jan 17, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiling face in an SVG canvas with animated eyebrows. The code demonstrates fundamental DOM manipulation by selecting the `<svg>` element and applying styles directly. It relies on D3 v5’s `d3.select` method to target the chart area and set a red background, while the face and its features are rendered via SVG elements. The interactive eyebrow movement is driven by D3’s data-binding and update patterns, though no external dataset is involved—the visual is purely programmatic. The included YouTube tutorial explains the step-by-step construction process.

Jan 11, 2020