Yasara Peiris

Fork of Line Chart with Multiple Lines

This visualization shows one week of temperature data from cities worldwide, with each city represented by a distinct colored line on a time-series chart. The lines are smoothed using `curveBasis`, and the legend displays city names in the order of their final temperature values. The chart uses d3's `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to structure the data, with axes rendered via `axisBottom` and `axisLeft`. The color legend is built through a reusable function that appends circles and text. The data comes from Data Canvas - Sense Your City.

Sep 21, 2021

Fork of Melting Data for Multiple Lines

This chart displays population over time by region, using multiple smoothed lines to compare trends from 1950 to 2100. The code uses d3.csv to load UN population estimates and a medium variant projection, then d3.nest to group data by region and d3.line with curveBasis to generate the paths. Axes are rendered with axisBottom and axisLeft, while a custom colorLegend function handles the categorical color scale. The visualization is drawn as an SVG with a title and axis labels.

Sep 21, 2021

Fork of Stylized Line Chart

A stylized line chart displays temperature trends over time from the Sense Your City dataset, with data points connected by a smooth, natural curve. The SVG visualization uses React components to render the axes and marks, leveraging D3 v5's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` for the path generation. The chart includes labeled axes for time and temperature, with tick marks styled in gray and a teal-colored stroke for the data line.

Sep 20, 2021

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart plots temperature in degrees Celsius against time, using a smooth curve generated with the `d3.line` and `curveBasis` APIs. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are created using `d3.scaleTime` and `d3.scaleLinear`. The SVG rendering includes styled grid lines, axis labels, and a title, with data loaded via `d3.csv`.

Sep 20, 2021

Bowl of Fruits - Click to Select

A bowl of fruit displays apples and lemons as colored circles, with the currently selected fruit highlighted by a black outline. Clicking any fruit triggers a transition that animates its radius and position, while removed fruits shrink and exit. The example uses D3 v5’s data joins with `selection.enter`, `merge`, and `exit` methods, alongside `scaleOrdinal` for color and size, and `transition.duration` for smooth animations. The `fruitBowl.js` module manages the interactive selection logic, while `index.html` loads the SVG container and D3 bundle.

Ch 3

A React and D3.js visualization presents soccer team statistics from a CSV file as a scatterplot-style chart. Each team is represented by a circle, with the team name labeled beneath it. D3 loads the data and binds it to SVG circle elements, while a control panel generates buttons for each numeric column. Clicking a button uses `d3.scaleLinear` to remap the circle radius based on that stat, such as wins or points, allowing dynamic comparison across teams.

Chapter Exercises

This example shows a smiley face drawn with SVG circles and a D3 arc path. The face is centered within an 960 by 500 viewport, using a yellow circle with a black stroke, two smaller circles for eyes, and a D3 `arc` generator for the mouth. The code uses React to render the SVG elements, with D3's `arc` API to define the mouth's inner radius, outer radius, and angular range. All positioning is calculated relative to the center using constants for eye offset and radius.

2018: Smiley Face

This example visualizes a timeline of tweets as a scatterplot, where each tweet’s vertical position reflects its impact (number of favorites) and its horizontal position reflects the time it was posted. Circle size and color also encode impact, using a linear scale for both radius and a color range from white to purple. The visualization uses D3 v5 to load the tweet data, map time with `d3.scaleTime`, and map impact with `d3.scaleLinear`. It renders circles and text labels as SVG elements, then filters out tweets with zero impact by removing their corresponding nodes.

Chapter Exercises

Jul 26, 2020

Bowl of Fruits - Nested elements

A bowl of fruits demonstrates nested SVG elements and data joins in D3.js v5. Rectangular bowls hold circular fruits, with apples and lemons distinguished by color and size through d3.scaleOrdinal scales. The visualization updates over time as fruits are removed and types change, showing enter, update, and exit selections. The code uses d3.select and selection methods like .merge() and .exit().remove() to manage dynamic rendering, with text labels positioned below each fruit.

Jul 22, 2020

Bowl of Fruits

A bowl of five apples animates through a sequence of data changes, demonstrating D3’s data join and enter/update/exit pattern. Each circle represents a fruit, with its type determining fill color and radius via ordinal scales. Over time, an apple is removed, a middle apple transforms into a lemon, and another apple is filtered out. The code uses `selection.data`, `merge`, and `transition` to smoothly animate circle radii and positions, while SVG circles are appended, updated, and removed accordingly.

Jul 22, 2020

Bowl of Fruits

A smiley face is drawn as an SVG using React and D3, with a yellow circle for the head, two black eye circles, and an arc for the mouth. The code uses D3’s `arc` function to define the mouth’s inner and outer radii and angular range, generating a path string for the SVG `<path>` element. React renders the SVG components declaratively, while D3 handles the geometric calculations for the arc, demonstrating a simple integration of both libraries.

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, showing a smooth trend line with labeled axes for time and temperature. The chart uses the D3 v5 library, leveraging `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` for the smoothed path. Data is loaded from a CSV file via D3’s `csv` function, with timestamps parsed as dates and temperatures as numbers. Axis labels and titles are styled from the included CSS.

Cars Scatter Plot

This interactive visualization displays the population of the top 10 most populous countries as circles along a categorical y-axis and a linear x-axis. Animated smiley-face eyebrows and a yellow circle provide visual interest alongside the data. The code uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the chart, with data loaded from a CSV file. It also demonstrates SVG transitions for the eyebrows and employs `arc()` for the mouth shape.

Customizing Axes

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 demonstrates customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format to abbreviate large numbers (e.g., converting billions to "B"). Built with D3 v5, it uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render SVG circles and labels.

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with circles positioned along a linear scale for population and a point scale for country names. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scales, and d3.axisBottom and d3.axisLeft for axes. A separate animated smiley face, built with d3.arc and transitions, appears in the background, while the SVG rendering and React framework support the layout.

Customized Axis

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses d3.scaleLinear and d3.scaleBand to map data from the CSV file, while d3.axisBottom and d3.axisLeft render the axes with customized tick formatting (using d3.format to abbreviate large numbers). The y-axis labels are styled distinctly, and the chart includes a title and a labeled x-axis. The bars are rendered as SVG rectangles with a fixed fill color.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The chart renders as an SVG via React, with D3’s `scaleBand` and `scaleLinear` mapping countries to horizontal bars and population values to widths. The code uses `d3.csv` to load the dataset, `d3.format` for tick labels, and custom React components for axes and marks, styled with the Poppins font and a teal color scheme.