egrebing

Cheap Tricks for Map Interaction II

This example shows an interactive world map that changes country colors to red on hover, with a blue sphere background representing the globe. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to render geographic features, while d3.json and d3.tsv load TopoJSON and tabular data from the world-atlas package. The SVG-based visualization applies CSS hover effects to fill countries red, and each country path includes a title element for potential tooltips. The code relies on topojson.feature to convert TopoJSON into GeoJSON for path generation.

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Bowl of Fruit - Hover to Select

This example demonstrates a data join with smooth SVG transitions as a bowl of fruit updates over time. Circles representing apples and lemons enter, exit, and change type, with color and radius mapped through `d3.scaleOrdinal`. Hovering highlights a fruit by updating a `selectedFruit` state, which triggers a re-render via `fruitBowl`. The code uses `selection.merge`, `transition.attr`, and mouse event listeners within a D3 v6 module.

Bowl of Fruit - Click to Select II

Five fruit circles render as a bowl of apples and lemons, with each fruit colored and sized by `d3.scaleOrdinal` and positioned via a custom `xPos` function. Clicking a fruit highlights its stroke and calls `onClick` to update the selection state. The example uses D3 v6’s data join with `enter`, `merge`, and `exit` selections, animating radius and position through `.transition().duration(1000)`, while `setTimeout` dynamically removes fruits and swaps an apple for a lemon over three seconds. SVG rendering and event listeners are used throughout.

Bowl of Fruit - Click to Select

Five fruit shapes appear in a row, rendered as SVG circles labeled by type. Clicking a fruit triggers a transition that changes its radius and fill color, while a fading scale animates the removal and replacement of items over time. The example uses d3-selection with enter, update, and exit patterns, d3-scaleOrdinal for color and size mappings, and d3-transition to animate attributes. Data is generated procedurally with random IDs, and event listeners log clicks to the console.

Bowl of Fruit - General Update Pattern w/ Events

This example demonstrates the general update pattern with event handling using D3 v6, rendering a row of fruit as colored circles with labels inside an SVG bowl. Apples and lemons are distinguished by color and size through ordinal scales, while clicks and mouseovers log the fruit type. The code explicitly manages enter, update, and exit selections, using `selection.merge()` for nested circle and text elements, and triggers timed state changes that add, remove, or replace fruits to show dynamic transitions.

Sep 26, 2020

Bowl of Fruit - General Update Pattern II

Rendering an SVG bowl of fruit, this example demonstrates the general update pattern in D3 v6. Apples and lemons are drawn as colored circles with labels, using `d3.scaleOrdinal` to map fruit types to color and radius. The code shows nested enter-merge-exit selections for groups, circles, and text, animating through timed data changes that remove fruit, swap an apple for a lemon, and filter the array. A single `rect` represents the bowl, appended once via a `[null]` data join.

Sep 25, 2020

Bowl of Fruit - General Update Pattern III

Rows of apples grow from the SVG canvas as circles, with a text label beneath each fruit. This example demonstrates the D3 general update pattern using `selection.enter`, `selection.merge`, and `selection.exit`, binding data to groups that contain both a `circle` and a `text` element. It uses `d3.scaleOrdinal` for color and radius, and animates radius changes with a `transition`. The included code comments show commented-out intervals for adding, removing, or replacing fruits, though these are not active in the initial render.

Sep 25, 2020

Plot Template v9.24.20 - Tooltip Test

This scatter plot template visualizes the Iris dataset, encoding sepal length and width as x and y coordinates while coloring points by species. Built with D3.js v6, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for categorical color mapping, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering includes hover tooltips that display text at the cursor’s page coordinates, with animated transitions on mouseover and mouseout. Data loads asynchronously from a CSV via `d3.csv`.

Sep 24, 2020

Plot Template v9.24.20

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against sepal width on the y-axis, with each species color-coded via a d3.scaleOrdinal. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom/d3.axisLeft with tick lines to create gridlines. Rendered as SVG, it includes labeled axes, a title, and semi-transparent circles with stroke, demonstrating a customizable D3.js v6 template.

Sep 24, 2020

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how a data set of apples and lemons is rendered as SVG circles and animated when items are added, removed, or changed. It uses `d3.scaleOrdinal` to map fruit types to colors and radii, and `d3.select` with chained `enter`, `merge`, and `exit` methods to transition circles smoothly. Animations are driven by `transition().duration(1000)` and triggered via `setTimeout`, while the data join keys on each fruit’s random `id`.

Sep 23, 2020

World Population Area Chart

This area chart visualizes world population growth from 1800 through 2015, using a filled path to emphasize the magnitude of increase over time. The chart employs `d3.area()` with a `curveBasis` smoothing, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. Data loads from a CSV via `d3.csv`, with SVG rendering and custom axis formatting that converts billions to "B" labels.

Sep 22, 2020

Temperature in SF Area Chart

This area chart visualizes temperature measurements in San Francisco over time, using a smooth curved line to fill the space between the data and the baseline. The SVG rendering relies on d3.area() with a curveBasis interpolation, while d3.scaleTime and d3.scaleLinear map timestamps and temperature values to pixel coordinates. Data loads from a CSV file hosted on VizHub, and the chart includes labeled axes and a title.

Sep 22, 2020

Temperature in SF Line Chart

This line chart visualizes temperature in San Francisco over time, with a smooth curved line connecting data points plotted against a time axis and a linear temperature axis. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `d3.curveBasis` to generate the path. Data comes from a CSV file loaded via `d3.csv`, parsing timestamps as dates. Axes include gridlines, labels, and a chart title.

Sep 22, 2020

Temperature in SF Scatter Plot

This scatter plot visualizes temperature over time in San Francisco, with each point positioned by timestamp on the x-axis and temperature in degrees Celsius on the y-axis. The points are colored by origin (USA, Japan, or Germany) using a d3.scaleOrdinal color mapping, with red, blue, and black. The visualization uses d3.scaleTime for the time-scaled x-axis and d3.scaleLinear for the y-axis, with axis grids and labels generated via d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file hosted on VizHub, and custom SVG circles are rendered with d3.svg selection and appending, styled by the accompanying CSS.

Plot Template v9.21.20

A scatter plot of Iris flower measurements shows sepal length against sepal width, with each point colored by species origin. The plot includes labeled axes, gridlines, and a title. Built with D3 v6, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` to map categorical species values to colors. Data is loaded as CSV from the uiuc-cse GitHub repository and rendered as SVG circles with fixed radius and opacity.

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars, with points colored by country of origin (USA, Japan, Germany). The D3 v6 code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and `axisLeft`/`axisBottom` with gridlines to render the plot into an SVG canvas. Data is loaded asynchronously from a CSV file using the `csv` function, and point styling includes a dark gray stroke and semi-transparency.

Making a Scatter Plot II

This example visualizes the top 10 most populous countries using a scatter plot, with countries on the y-axis and population on the x-axis. The chart is rendered as SVG using D3 v6, with circles sized at a fixed radius. The code demonstrates the use of `scaleLinear` for the x-axis, `scalePoint` for evenly spaced y-axis positions, and `axisLeft`/`axisBottom` for tick marks and labels. Population data is loaded from a CSV file and multiplied by 1000, with axis labels formatted using `format` to abbreviate large numbers.

New Plot Test 9.21.20

This scatterplot visualizes the Iris dataset, showing sepal width against sepal length for three species of iris flowers. Each flower is represented by a colored circle, with species assigned distinct colors from a d3.scaleOrdinal range. The visualization is rendered as an SVG using D3 v6, with d3.scaleLinear functions mapping the measurement domains to pixel coordinates for the axes. The plot is constructed by appending a group element, adding axis generators d3.axisLeft and d3.axisBottom, and binding the data to circle elements.

RECN School Enrollment

This bar chart displays enrollment numbers for ten Indiana high schools, color-coded by their RECN status (Tier 1 or Tier 2). The visualization uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for positioning, and d3.scaleOrdinal for categorical coloring. Axes are rendered with d3.axisLeft and d3.axisBottom, while SVG rectangles represent each school’s enrollment. Data comes from the Indiana Department of Education’s 2019-20 school enrollment report.

Scatter Plot Template -

This example shows a scatter plot of Iris flower measurements, plotting sepal width against sepal length for several species. The visualization uses D3.js v6 to load a CSV dataset and render SVG circles, with linear scales mapping the numeric values to pixel coordinates along the x- and y-axes. Axis components are generated using d3.axisBottom and d3.axisLeft, while the circles are appended and positioned based on the parsed data fields via d3.scaleLinear.

Making a Scatter Plot

This example shows a minimal scatter plot built with D3 v6 in a React framework, rendering to SVG. It demonstrates how to create a basic chart from scratch using the D3 library, with data points positioned via the `d3.scalePoint` or `d3.scaleLinear` scale. The code includes a simple `index.html` page that loads D3 and a bundled JavaScript file, which uses D3 selections to append circles to the SVG element. The visualization is intentionally bare-bones, focusing on the core mechanics of setting up scales and shapes, with styling provided by an external CSS file.

Sep 20, 2020

Making a Bar Chart - Modular

A horizontal bar chart ranks the ten most populous countries, using CSV data for country names and population figures. The example demonstrates a modular build process, separating the chart's core logic from reusable components. It uses D3 version 6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. SVG elements are appended and configured within a translated group, with custom tick formatting that converts values to billions. Axis labels and a main title are added, while CSS styles control the visual appearance of bars, ticks, and text elements.

Sep 20, 2020

Making a Bar Chart

This horizontal bar chart displays the population of the world's most populous countries, using a data.csv file with country names and raw population figures. The chart renders as SVG elements, with each country represented by a rectangular bar scaled by a linear population axis. The visualization employs D3's `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` to draw the axes, and a custom tick formatter that abbreviates large numbers. The code reads the CSV asynchronously, multiplies the population values by 1000, and appends the bars to the SVG group.

Sep 20, 2020

Let's Make a Face with D3.js!

A yellow circle with black eyes, animated eyebrows, and an arc-based smile forms a face in SVG. D3.js v6 uses `select`, `arc`, and method chaining to build the shape, while `transition` animates the brow group up and down. Static elements like circles and rects are grouped with `g` and positioned via `translate`. The code draws entirely from D3 primitives, with no external data, and runs in an 960×500 viewport.

HTML Starter

This example presents a minimal HTML page that displays the text "Hello HTML" and logs "Hello JavaScript!" to the console. It uses standard HTML, inline CSS for centered, oversized text styling, and a plain script tag for the console output. The page is a bare-bones starter template, referencing broader React and HTML starter projects.

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled with CSS, using circles, rectangles, lines, and a path. It shows inline presentation attributes like `fill` and `stroke` alongside a `<g>` element that applies shared styles, and CSS classes that define stroke properties for line elements. The SVG is scaled with a transform, and the page hides overflow. The code uses raw SVG markup with no JavaScript libraries, relying on CSS for line styling.

Car Test III

This example demonstrates a simple asynchronous data-loading pattern in React. It displays a list of used cars filtered by price, showing each car’s year, make, model, and cost. The page initially shows “Loading...” while a custom `getCars` function simulates a two-second delay with `setTimeout` and a Promise. Once resolved, the `generateReport` module filters the car data by a maximum price and formats the results using template literals. The final output replaces the loading text in the DOM via `document.getElementById`.

HTML Starter

Cars Report

This example demonstrates a JavaScript report generator that filters a small dataset of cars by price and displays the results as formatted text. The code simulates an asynchronous data fetch with `getCars` using a promise and a two-second delay, then processes the data with `generateReport`, which filters cars under a $3,000 threshold and maps them to strings via the `formatCar` helper. The final output is shown in a `<pre>` element on an HTML page, showcasing modular JavaScript with `import`/`export` statements and object destructuring.