rebeccayc

Bowl of Fruit - Hover to Select

A bowl of fruit is rendered as an animated SVG, where apples and lemons appear as colored circles that transition in and out of view. Hovering over a fruit selects it, highlighting it with a black stroke; moving the mouse away deselects it. The visualization demonstrates D3’s data join and general update pattern, using `selection.data`, `enter`, `merge`, and `exit` with `transition` to smoothly animate radius and position changes as the dataset is modified over time.

Feb 8, 2020

Bowl of Fruit - Nested Elements

Five apples rest in an oval bowl drawn as an SVG rectangle. A nested-element pattern uses one group per fruit, with each group containing a colored circle and a text label. The data join enters, updates, and removes elements through the general update pattern. Timed actions remove fruits and change one apple to a lemon, with d3.scaleOrdinal mapping fruit type to color and radius.

Feb 8, 2020

Bowl of Fruit

A bowl of fruit shows five apples rendered as red circles, which are eaten and replaced by a lemon over time through animated transitions. The visualization uses D3 v5’s general update pattern with `selectAll`, `data`, `enter`, `merge`, and `exit` to manage SVG circle elements, applying ordinal scales for color and radius based on fruit type. The animation sequence, driven by `setTimeout`, demonstrates adding, removing, and updating data while smoothly interpolating circle radius and position via `transition`.

Feb 7, 2020

World Population By Year 2015

This visualization displays global population trends from 1960 to 2015 using a filled area chart. The area is rendered in maroon with a smooth curve, showing population growth over time on a year-based x-axis and a population count y-axis that formats values in billions. The chart uses D3 v5’s `area()` generator with `curveBasis` to create the smooth shape, while `scaleTime` and `scaleLinear` map the data. Axis labels and a title are added via SVG text elements, with data loaded from a CSV file.

Jan 29, 2020

Temperature in San Francisco (Line)

This visualization shows a week of temperature measurements in San Francisco using a filled area chart. The data is loaded from a CSV file, with timestamps parsed as dates and temperatures as numbers. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map the data, `area` with `curveBasis` for the smooth filled path, and `axisBottom` and `axisLeft` for the axes. SVG rendering displays the maroon area, labeled axes, and title.

Temperature in San Francisco (Line)

This visualization shows a week of temperature readings in San Francisco, plotted as a smooth line chart over time. The x-axis displays timestamps, while the y-axis represents temperature values, with labeled axes and a title. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smoothing. Data is loaded from a CSV file via `d3.csv` and rendered as SVG, with margins and tick styling defined in CSS.

Temperature in San Francisco

A scatterplot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` for axes and gridlines. Data is loaded via `csv` from a remote dataset, with each timestamp parsed as a `Date` and temperatures as numbers. Circular marks are placed using `scaleTime` and `scaleLinear` mappings, with custom axis labels and a title styled via CSS.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a sample of cars from the auto-mpg dataset. The visualization uses red, semi-transparent circles to represent individual data points, with opacity allowing overlapping points to be visible. The chart is rendered as an SVG using D3 v5, with the `scaleLinear`, `axisBottom`, and `axisLeft` functions handling the scales and axes. Data is loaded as CSV from an external URL, and the plot includes labeled axes for Horsepower and Weight along with a title.

Scatter Plot

This scatter plot displays the top ten most populous countries based on 2018 estimates from the United Nations World Population Prospects. Each circle’s position encodes population on the x-axis and country on the y-axis, with all circles sized at a fixed radius. The visualization uses D3’s `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` for tick marks, and `format` to abbreviate population numbers. Data is loaded from a CSV file, and the rendering is done via SVG, using circles to represent data points and custom styling for text and gridlines.

Formatting Axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted using a custom tick format that replaces "G" with "B" for billions. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes with tick lines extending across the plot. The SVG rendering includes a title, axis labels, and steelblue rectangles for each bar.

Jan 20, 2020

Customizing Axis

This example shows a horizontal bar chart ranking the ten most populous countries, with population values on a linear axis and country names on a categorical band axis. The SVG rendering uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, while a custom `format` function converts large numbers to abbreviated labels (e.g., “B” for billions). Axis grid lines extend across the plot area, and the country label axis removes its domain and tick lines for a cleaner look. Data comes from a local CSV file containing population figures per country.

Jan 20, 2020

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimates. It highlights customization of D3 axes, including formatted tick labels (using d3.format with abbreviations like “B” for billions), horizontal grid lines, and a custom axis label. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom with SVG rendering to produce the visualization.

Jan 20, 2020

P1 - Task 1

This example shows a horizontal bar chart ranking countries by population, with the United States, China, and India among the largest. The bars are drawn using D3.js version 5, with `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. Population data is loaded from a CSV file and multiplied by 1000 to reflect actual values. The SVG rendering uses steel-blue bars with a left margin to accommodate country labels.

Jan 17, 2020

Let's make a face with D3.js!

This visualization demonstrates how to build and animate a smiley face using D3.js in an SVG canvas. The face features yellow circles for the head and eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc()` shape generator. The eyebrows move up and down through chained `transition.duration()` calls, showing sequential state changes. The example uses D3 selections and attribute manipulation to position elements around a central group, highlighting core DOM handling and animation techniques in D3 v5.

Making a Bar Chart

A horizontal bar chart displays population data for the ten most populous countries, with each bar’s length proportional to population in thousands. Built with D3 v5 and SVG, the visualization loads data from a CSV file via `d3.csv`, then uses `scaleLinear` for the x-axis and `scaleBand` with padding for the y-axis categories. Axes are rendered using `axisLeft` and `axisBottom`, while the margin convention positions the chart within the 960×500 viewport.

Let's make a face with D3.js!

A smiling face built with SVG in D3.js animates as its eyebrows and pupils shift side to side. The example demonstrates fundamental DOM manipulation by directly selecting SVG elements and appending circles, rectangles, and a path for the mouth, with the mouth drawn using D3's `arc` generator. Animated transitions change the position of the eyebrows and pupils over two-second intervals, while static attributes set the face's yellow fill and black stroke. The code relies on D3 v5 and shows how to chain selections and transitions without data binding.

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Custom axes are created with `axisBottom` and `axisLeft`, including a tick formatter that abbreviates large numbers with the `format` function, replacing 'G' with 'B' for billions. The chart also removes default axis lines and adds a title and axis label.

Cars Report

This interactive web page demonstrates a JavaScript-based car report generator. It displays a list of vehicles, showing each car's year, make, model, and price after a simulated two-second loading delay. The application uses JavaScript objects and arrays to store car data, then filters and formats the information through modular functions. The core logic employs Promise-based asynchronous loading via `getCars`, with `generateReport` filtering cars below a price threshold and `formatCar` creating the text output. The report appears directly in the HTML `<pre>` element, with the initial interface using object destructuring and template literals.

Jan 9, 2020

HTML Cars Report

This example presents a static cars report as a plain HTML page with an embedded list of three used vehicles and their prices. It shows the car model, year, and asking price, with the first entry highlighted in red to draw attention. The visualization relies entirely on the native HTML `<ul>` and `<li>` elements for structure, with styling applied through a linked CSS file. The page uses no JavaScript libraries or charting APIs; instead, it demonstrates a simple, unstyled data presentation achieved through basic markup and the `font-size` and `color` properties defined in `styles.css`.

Jan 9, 2020