Shane Carey

menus with React

A React application renders a small interactive form for choosing a pet from a dropdown menu. The selected pet’s name is displayed below the menu. The example uses React’s `useState` hook to manage the selected value, and a custom `Dropdown` component with an `<select>` element. React and ReactDOM are loaded from unpkg CDN, and the app is mounted into the `#root` div. The menu options are defined in a local array of `{ value, label }` pairs.

Jan 28, 2021

World map d3 and React

This example displays a world map with Ireland highlighted in teal, set against a muted sphere and interior borders, using an equal Earth projection. Built with React and D3 v5, it loads TopoJSON world-atlas data via `d3.json` and processes it with `topojson.feature` and `topojson.mesh`. The map is rendered as SVG paths created through `d3.geoPath` and `d3.geoEqualEarth`, with a `useData` hook managing asynchronous data loading.

linechart -line d3 and React

This line chart displays temperature over time for a week in San Francisco, using D3 v5 scales and SVG rendering within a React component. The visualization combines React hooks for data loading with D3’s `scaleTime`, `scaleLinear`, and `extent` functions to map timestamps and temperature values. Axes are generated via custom React components that call `xScale.ticks()` and `yScale.ticks()`, while the line path and data point circles are drawn using D3’s `line()` generator. The data is loaded asynchronously from a CSV file using `d3.csv`, with circle tooltips showing the time via `timeFormat`.

linechart d3 and React

This example shows a line chart of daily temperature readings over a week, plotting temperature on the y-axis against time on the x-axis. The visualization is built with React components that render SVG elements, using d3.scaleTime and d3.scaleLinear for axes and data mapping. The code loads CSV data via d3.csv, applies time parsing and numeric conversion, and creates circles as marks with tooltips showing the day. Axes are custom components using d3.ticks and timeFormat for labels.

Stylized Scatter Plot

This stylized scatter plot displays the relationship between petal length and sepal width in the Iris dataset, loaded via d3.csv from a GitHub gist. React components render the SVG circles and axes, with d3.scaleLinear mapping data values to pixel coordinates. The visualization uses a Poppins font, teal-colored marks, and custom axis tick styling. Hovering over a circle reveals its petal length through an SVG title tooltip, while tick formatting uses d3.format to abbreviate values.

Refactoring - Barchart with margins and axes

This example shows a horizontal bar chart of population data for the top 10 countries, using React to render SVG elements. The bars are created with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while custom components `AxisBottom` and `AxisLeft` generate the ticks and labels. Margins around the chart are defined in the main App component, and the data is loaded asynchronously from a CSV file using d3’s `csv` method. The bars include a tooltip via the SVG `title` element.

Jan 26, 2021

React and D3 - Barchart with margins and axes

This example demonstrates a horizontal bar chart that visualizes the top 10 countries by population in 2020, using data loaded via d3.csv from a GitHub gist. The chart displays bars with quantitative x-axis tick lines and categorical y-axis country labels, all rendered as SVG elements within a React component. It combines React’s useState and useEffect hooks for asynchronous data loading with d3.scaleBand, d3.scaleLinear, and d3.max to compute the scales. The visualization applies explicit margins to position the plotting area, and renders axes and bars as SVG lines, texts, and rects.

Jan 25, 2021

React and D3 - Barchart with margins

This example shows a horizontal bar chart displaying the top 10 countries by 2020 population, rendered as SVG rectangles within a React component. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with margins applied via a transformed `<g>` group. Data is loaded asynchronously from a CSV file using D3’s `csv` method and stored in React state with `useState` and `useEffect`.

Jan 25, 2021

Visualisng Data with React and D3 - Barchart

This bar chart displays the top 10 countries by projected population for 2020, sourced from a UN population CSV file. The visualization uses React for component management and D3 v6 for data loading and scaling, with `d3.csv` fetching the data and `scaleBand` and `scaleLinear` mapping country names to the y-axis and population values to the x-axis. Each bar is rendered as an SVG `<rect>` element, with width proportional to population. The chart updates dynamically after the CSV loads asynchronously, showing loading text before the data arrives.

Visualisng Data with React and D3 - Pie

A pie chart displays categorical data as colored wedges, with each slice representing a row from a CSS named colors dataset loaded via `d3.csv`. The React component uses the `useState` and `useEffect` hooks to fetch the data, then renders an SVG with `d3.pie()` to compute angles and `d3.arc()` to generate each path’s geometry. All slices have equal weight, and the fill color comes directly from the dataset’s `RGB hex value` field.

Visualisng Data with React and D3

This example visualizes the CSS named colors dataset, rendering each color as a thin horizontal strip stacked vertically to form a full spectrum. Using React for component state and rendering, it loads the CSV data with the `d3.csv` method. While the data is loading, a large “Loading” message displays; once loaded, each row maps to a div whose background color corresponds to the “RGB hex value” field, producing a 960-pixel-wide color gradient bar. The visualization demonstrates a straightforward integration of React’s `useState` and `useEffect` hooks with D3’s data-loading API, with all output as HTML divs rather than SVG.

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3. It displays the file size, row count, and column count of a CSS named colors dataset fetched from a remote URL. The code uses D3’s `csv` function to load the data and `csvFormat` to calculate its size, while React’s `useState` and `useEffect` manage the asynchronous state. The result is rendered as SVG text within a `<pre>` element, initially showing “Loading” until the data arrives.

ReactSimple

This example demonstrates a simple interactive web app using React to track click counts on a page. It shows two buttons and a text block that display the number of times they have been clicked, with the app state managed through React’s `useState` and event handlers like `onClick` and `onContextMenu`. The code uses React 16.9 and ReactDOM to render SVG elements, and it includes a reference to a D3-loaded CSV dataset from a GitHub gist, though the dataset is not visualized in the current interaction.

Follow mouse with circle

A circle follows the mouse cursor across an SVG canvas as the pointer moves. The visualization uses React state management with `useState` and `useCallback` to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every mouse move event. Rendering is handled declaratively with React's JSX, creating a single SVG circle element that responds to pointer interaction. The example demonstrates basic event handling and state-driven updates in a React-based SVG visualization.

Jan 21, 2021

loadingData

This example demonstrates a minimal web page that fetches a CSV file from a remote GitHub Gist and logs its contents to the browser console. The page displays the static text "Hello HTML" at a very large font size, while the underlying JavaScript uses the `fetch` API to asynchronously retrieve the dataset. The code defines an asynchronous function that converts the response to text, highlighting the basic pattern for loading external data without any visualization or charting library yet applied. The data source is the Missing Migrants Global 2019 subset, accessed via a direct URL.

Jan 21, 2021

refactoringReactComponents

A React-based smiley face is drawn five times using reusable SVG components. The code refactors a D3 visualization into modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which positions children via a SVG `<g>` transform. Each face uses fixed properties for eye offset, mouth radius, and stroke width. D3's `arc` API generates the mouth path, while ReactDOM renders the composition into the DOM.

Jan 21, 2021

Smiley SC

This example renders a simple cartoon smiley face as a static SVG graphic. It uses React to define the component structure and D3’s `arc()` generator to create the mouth shape. The face consists of a yellow circle with a black stroke, two black eye circles positioned with fixed offsets, and a path built from an arc with specified inner and outer radii. All elements are centered within a 960×500 SVG viewport using a translated group, with hardcoded numeric values for dimensions and positioning.

Jan 8, 2021

Hello HTML

A single gray circle on an empty white field demonstrates the simplest possible SVG rendering of an HTML page. The example shows a static `<circle>` element with a radius of 100 pixels, positioned at coordinates (100, 100) within a 960×500 viewport. The code relies on native HTML and SVG APIs—no external libraries—using inline CSS to remove page margins and hide overflow, while the SVG element itself defines the circle’s shape and placement. This bare minimum setup highlights the foundational structure for any browser-based visualization.

Apr 3, 2020

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

Sep 26, 2019

Untitled

This example renders a single stylized face using an SVG arc for the mouth, with rounded tips created via `d3.cornerRadius()`. The mouth is drawn as a curved path that starts from the left, dips downward, and rises to the right, with the corner radius smoothing the ends into a soft smile. The rest of the face remains simple and abstract, focusing attention on the arc’s shape. It builds on a prior face design by Xinting Yao, demonstrating how a small d3 shape API can transform a basic arc into a characterful visual element.

Sep 26, 2019

Brush, Trendline, Legend, Title, Linechart, Barchart

This visualization shows groundwater monitoring data from EPA wells at the Bog of the Ring, displaying water level measurements as time-series line charts with a brushable overview panel and a bar chart of effective rainfall. Users can brush a date range in the lower chart to filter the main display, which updates the trendline computed via least squares regression and shows the equation. Built with D3 v5, the example uses scaleLinear, scaleTime, brushX, and axis functions for the SVG rendering. The trendline and regression statistics are calculated using a custom leastSquares function.

Sep 18, 2019

Borehole Dummy Data - Areachart

This visualization displays weekly GSI borehole water levels as a filled area chart, with date on the x-axis and depth in meters below ground level on the y-axis. The chart uses d3.area with curveBasis to create a smooth line and fills the area beneath it in steelblue, while translucent red circles mark individual data points. Mouseover interactions trigger a tooltip showing the date and depth value. The data is loaded from a CSV file using d3.csv, with dates parsed via d3.timeParse and scales created using d3.scaleTime and d3.scaleLinear. Both axes are rendered with d3.axisLeft and d3.axisBottom.

Brush, Trendline, Legend, Linechart, Barchart

This example visualizes EPA groundwater monitoring data for two observation wells at the Bog of the Ring using D3 v5 with SVG rendering. A main line chart displays water levels over time with an ordinal color scale and legend, while a smaller brush chart below allows users to select a date range. The brushed region updates the main chart’s x-axis domain and fits a least-squares regression trendline with its equation shown. Data is loaded from CSV files, parsed with d3.timeParse, and the chart uses d3.brushX, d3.line, d3.nest, and d3.scaleTime.

Hello VizHub

This example shows effective rainfall over time as a scatter plot of rounded rectangles, with a smaller brushed overview chart for zooming. The main chart displays date on the x-axis and rainfall values on the y-axis, while the context chart uses circles and a brushX selection to filter the date range. It loads data from a CSV file and uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.brushX to render interactive SVG elements with opacity styling.

Irish Map with Borehole

This example displays a map of Ireland with a borehole cross-section in a modal window. Clicking a county opens an info box showing layered soil types, from topsoil to bedrock, with hover tooltips revealing depth details. The visualization uses d3.geoMercator projections and d3.geoPath to render the map, while topojson.feature processes the geographic data. The borehole diagram is built with SVG rectangles and lines, and d3.zoom enables interactive panning and scaling of the map.

Stacked Borehole

This example visualizes a geological borehole as a vertical stacked bar chart, showing distinct subsurface layers including Topsoil, Peat, Till, and Sandstone, along with a blue line indicating the water table. Depth ranges appear dynamically in a tooltip on mouseover, providing context for each layer. The visualization uses D3 v5’s `select` API to append SVG shapes and text, and implements custom tooltip behavior via D3 transitions. Layer rectangles are colored to represent different materials, and the water level is marked with two blue lines, creating a simple cross-section of the earth.

May 16, 2019

Map with Borehole

A choropleth-style map of Ireland displays each county as a green SVG path with semi-transparent black borders. Using d3.geoPath and d3.geoMercator, the code projects TopoJSON county boundaries sourced from deldersveld’s GitHub repository. It loads the data via d3.json, converts it with topojson.feature, and appends path elements to the SVG, relying on d3.v5 and the geoMercator projection centered on Ireland.

May 15, 2019

Rainfall

This visualization shows monthly effective rainfall measurements over time as a histogram of steelblue bars. The chart maps dates on a time-scaled x-axis and rainfall values on a linear y-axis, using D3 v5’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisRight` APIs. SVG rectangles are bound to data from a CSV dataset, with each bar’s height determined by the `EffectiveRainfall` value. The code loads the external CSV via `d3.csv` and parses dates with `timeParse` before rendering.

Apr 25, 2019

Bar and Line chart

This example combines a bar chart of effective rainfall with a line and circle overlay of water level, both plotted against a shared time axis. The dual y-axes use independent linear scales, while the x-axis uses a time scale. Built with D3 v5, it renders to SVG and supports zooming via `d3.zoom`, which rescales all axes and re-renders bars, circles, and a line path generated with `d3.line`. The data is loaded from two CSV files hosted on VizHub. The chart initially displays the full dataset before user interaction.

Hello VizHub

This example displays two synchronized visualizations of borehole water-depth data: a bar chart and a scatter plot. Both graphs use color to distinguish data points marked as "Old" or "New," and hovering over a bar highlights the corresponding circle in the other chart with a green stroke. Both views are rendered as SVGs using D3 v5. The bar chart creates rectangles with `d3.scaleLinear` for the y-axis and `d3.axisRight` for tick marks, while the scatter plot uses circles with a left-aligned axis. Data is loaded from a CSV file and parsed with `d3.timeParse`.

Bar and Line chart

This example displays a dual-axis chart combining bars for effective rainfall and a line with points for water level over time. The visualization uses two scales, time on the x-axis, and separate linear scales for the bar and line values. Panning and zooming are implemented via d3.zoom, rescaling both axes and updating the shapes. Data is loaded from two CSV files using d3.csv, and all elements are rendered as SVG.

Trend line with legend

This example displays two time-series line charts of water level data from wells OW2DWL and OW2DSWL, with an orange and blue color legend. The lower chart supports brush-based selection, which filters the upper chart’s time range and overlays a dashed grey trend line computed via least-squares regression. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `nest`, `brushX`, and `axisBottom`, rendering to SVG.

Multiple Instances with Chart Brushing

Two linked line charts depict monthly water levels for two well measurements, with the lower chart providing a synchronized brushing interface. Dragging a brush across the lower chart dynamically updates the upper chart's x-axis domain to the selected time range, using a time scale inversion to set the new coordinates. The visualization is rendered with SVG, and the interaction is implemented using D3 v5's `brushX`, `scaleTime`, and `setBrushCoords` callback, with data loaded from a CSV file. Both charts use D3's `nest` and `line` generators to draw the series, and categorical colors from `schemeCategory10` distinguish the two data series.

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

Apr 19, 2019

Trend line

This visualization shows monthly water level trends for two well sites, with a brushable chart allowing users to select a date range and view a dashed regression trendline with its equation. The top chart displays the trendline and data points, while the bottom chart provides the brushing interface. The code uses d3.scaleTime, d3.scaleLinear, d3.line, d3.brushX, and d3.nest to render SVG paths and circles. The trendline is calculated via a custom least squares regression function imported from a separate module. Data is loaded from a CSV file.

Apr 18, 2019

Multiple Instances

This example displays water level measurements from two distinct wells as time-series line charts. A main chart shows the full dataset with circles marking individual observations, while a smaller brush chart below enables interactive range selection. The visualization relies on d3.csv for data loading, d3.nest to group measurements by well, and d3.line to generate the series paths. A d3.brushX instance with brush.move initializes the selection, while the `setBrushCoords` callback logs the selected time range coordinates to the console.

Apr 17, 2019

Hello VizHub

This example renders a blank SVG canvas with a steelblue circle, though no data is bound to it. The code demonstrates state management via a custom `setState` function and logs a merged object to the console. It loads D3 v5 from a CDN and includes CSS styling for axes and text, but does not create any visual elements beyond the styled circle. The SVG dimensions are set to 960 by 400 pixels.

Apr 17, 2019

Object assign

This example demonstrates object assignment and SVG rendering capabilities. It uses D3.js and SVG to create interactive visualizations with custom line styling. The code initializes an HTML page with linked CSS that defines line and path color properties, specifically using black strokes with specific width and rounded corners in teal. The visualization focuses on showing how SVG elements can be styled and manipulated dynamically, though the specific data or interaction behavior is not detailed beyond the basic structure visible in the provided files.

Apr 17, 2019

Making Component

This example shows ground-water levels over time, with one color-coded line per well. The main chart displays the full time series, while a smaller context chart below it includes a brushed region that filters the data displayed in the main chart. Built with D3 v5, the visualization uses `d3.line`, `d3.nest`, `d3.brushX`, and `d3.scaleTime` to render the SVG. The data is loaded from a CSV file hosted on VizHub.

Apr 16, 2019

Making Component SC

This example visualizes monthly water level measurements for two wells, with each series distinguished by color in a multi-line chart. A brushable mini-map below the main chart allows users to select a date range, and the brushed region is logged to the console. The visualization is built with D3 v5, using `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.brushX`, and `d3.nest` to structure the data by well. SVG rendering includes both focus and context panels, with circles marking individual data points and clipped paths ensuring lines stay within bounds.

Apr 16, 2019

Hello VizHub

This interactive visualization displays monthly water level measurements for two wells (OW2DWL and OW2DSWL) over time. The chart uses a dual-panel layout with a detailed focus plot above and a brushable context view below for zooming and panning through the time series. The visualization is built with D3 v5 and renders as SVG, using `d3.brushX` for interactive selection and `d3.nest` to group data by well. The data is loaded from a remote CSV via `d3.csv`, with D3's `scaleTime` and `scaleLinear` handling the date and value axes.

Apr 16, 2019

Borehole Dummy Data - Linechart

A line chart visualizes weekly water-level measurements in a borehole, plotting depth against date and including a red semi-transparent dot for each data point. Hovering over a dot reveals a tooltip with the exact date and depth value. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to render the SVG. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `timeParse` and formatted with `timeFormat`.

Scatter/Line Plot with Menus

This visualization displays borehole data as an animated scatter/line plot, with a dropdown menu controlling which measurement (Depth or Temp) appears on the y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` for axes, plus a `line` generator for the connecting path. Circles transition over two seconds using `transition().delay()`, while the menu is built with a custom `dropdownMenu` module that binds `<select>` options to data columns.

Cars Scatter plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each red circle representing a vehicle. The visualization uses D3 v5 to load CSV data and construct an SVG-based chart with linear scales, axes, and gridlines. It employs `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to map data values to screen coordinates. The chart includes axis labels, a title, and formatted tick marks, with circles rendered semi-transparent to reveal overlapping points.

lets make a shape

This example constructs a simple face from basic SVG shapes, including a yellow circle head, eyes, eyebrows, nose, and a mouth. The eyebrows animate, moving up and down over time, while the data used comes from a hardcoded JavaScript array of car objects. The visualization uses D3 v5 for SVG manipulation and transitions, with the shape built by appending elements to an SVG group. The code also includes a car-report generator that filters and formats car data asynchronously.

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

Mar 21, 2019

Borehole Dummy Data - Areachart

This visualization plots borehole depth over time using a scatter plot with red, semi-transparent circles. The chart displays date on the x-axis and depth on the y-axis, with rotated date labels and a title. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to compute scales and axes. Data is loaded from a CSV file via `d3.csv`, and dates are parsed using `timeParse` with the format "%d/%m/%Y".

Mar 21, 2019

Using Classes

This example demonstrates D3.js's class-based selection methods for updating SVG elements. A set of red circles appears at different x-axis positions over four sequential render calls, showing how enter, merge, and exit operations manage the growing and shrinking dataset. The code uses `selectAll(".point")` with the `.enter()`, `.merge()`, and `.exit()` API to incrementally add and remove circle elements, maintaining consistent styling through CSS classes.

Mar 20, 2019

Staff list

This example displays a hierarchical world map organized by continents and regions, using a static SVG rendering. The visualization loads data from a nested JSON file and logs it to the console, though it does not yet render the geographic features. The code imports d3-selection, d3-json, d3-geoPath, and d3-geoNaturalEarth1 from D3 v5, along with topojson’s `feature` function, but only initializes the SVG dimensions and fetches the data. The map projection and path generation are prepared but remain unused in the current implementation.

lets make a map!

This example shows a natural Earth projection of world countries, rendered as green SVG paths with a hover effect that turns each country red. It uses the `world-atlas` TopoJSON dataset to load country boundaries, then applies `d3.geoPath` with `d3.geoNaturalEarth1` to project and draw the paths. A sphere outline is added via `pathGenerator({type: 'Sphere'})`. The visualization fills the entire viewport, with the projection scaled to the browser’s dimensions.

lets make a map!

This example displays a world map using a natural Earth projection, with countries filled in green that turn red on hover. It renders the map as SVG paths generated by `d3.geoPath` and `geoNaturalEarth1`, loading geographic data from the world-atlas TopoJSON file. The code uses `topojson.feature` to convert the TopoJSON into GeoJSON features, and appends a sphere outline for visual context.

lets make a map!

This example displays a simple yellow smiley face constructed entirely with SVG shapes, including eyes, a nose, and a mouth, with animated eyebrows that bounce up and down. D3 v5 selections append and style the SVG elements, while the `arc` generator creates the mouth path. The eyebrows use chained `transition` calls to repeatedly shift their vertical position. The page loads a static dataset of three cars via a simulated asynchronous `getCars` promise, though the visualization itself does not reference that data.

Hello VizHub

This example displays a single, large text message centered on a dark, gray background using the Ubuntu font. The visualization takes a minimalist approach, showing only the text string "Hello VizHub" in a light color. It is implemented with D3.js v5, using the `select` API to target the `#message` div and set its text content. The page’s styling comes from an external CSS file that imports the Ubuntu typeface from Google Fonts and applies a 12em font size. The code is organized into separate modules, with the message text defined in a local `myMessage.js` file.

Cars Report

This example displays a text report of cars after a two-second delay, listing each vehicle's year, make, model, and price. The report is generated by filtering a hardcoded JSON array of car data to include only cars priced under $7,000, then formatting each entry using a custom `formatCar` function. The visualization uses asynchronous JavaScript with `Promise` and `setTimeout` to simulate data fetching, and renders the output as plain text into an HTML `<pre>` element, styled with the Ubuntu font and a dark theme.

Making a barchart

This example shows a horizontal bar chart comparing 2018 population figures across continents, with each bar labeled by continent name and formatted population value. The SVG visualization uses D3 v5 scales—`scaleLinear` for the x-axis population range and `scaleBand` for the y-axis continent categories—with padding to separate bars. Data is parsed from a CSV string in `data.js` using D3’s `csvParse`, and numeric values are cleaned of commas and percentage signs. Rects and text are bound to the data via `selectAll` and `.enter()`, with bar widths scaled against the maximum population.

Bowl of fruit with transitions with Uni flow

Five fruit circles animate into a bowl via d3 transitions, initially appearing as apples before one becomes a lemon and others exit. An ordinal color scale maps types to red and blue, while hover interactions trigger a black stroke highlight. Using d3.v5, the fruitBowl function merges enter and update selections, applying duration-1000 transitions to position and radius.

Borehole Dummy Data with menue

This interactive scatter plot displays dummy borehole data, showing water depth over time with a dropdown menu to change the x-axis variable. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.axisLeft/axisBottom for rendering ticks. A custom dropdownMenu component, built with D3 selections, lets users switch between date, temperature, and other columns. The scatterPlot module renders red circles with SVG, including formatted date ticks and axis labels, supporting future GSI borehole data visualization needs.

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom` to render axes and `transition.attr` with staggered delays to animate each circle into place. The plot displays depth, temperature, and other measurements, with the SVG rendering updating in response to menu selections.

Bowl of fruit with transitions

A bowl of fruit displays five circles representing apples and lemons, with a selected fruit outlined in black and a color scale mapping apples to red and lemons to blue. The visualization uses d3 transitions to animate enter, update, and exit states, shrinking new circles from radius zero and removing departing ones. Over time, timed intervals remove a fruit, change one apple to a lemon, and filter out another, demonstrating dynamic data binding with d3's selection merge and keyed data joins.

Feb 25, 2019

Customising numbers

This example demonstrates interactive selection in a small multiples-style scatter plot. It displays iris flower measurements from a CSV file, using D3.js to map sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct colored dot. A brushing interaction lets users drag a rectangular selection over the plot; the code uses D3’s brush API and event handling to apply a CSS class that highlights selected points within the brushed area, while unselected points remain dimmed.

Feb 25, 2019

Borehole Dummy Data with menue

This interactive scatter plot displays borehole dummy data, allowing users to compare two variables selected from dropdown menus. The visualization uses D3 v5 with an animated scatter plot that transitions circles from the center to their positions over two seconds. The code implements a reusable dropdownMenu component and scatterPlot module, utilizing d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. Data is loaded from an external CSV file, with Depth, Date, and Temp columns parsed from strings to proper data types.

Oct 15, 2018

Bowl of fruit

A bowl of fruit shows five apples in a wide rounded rectangle, with one apple changing to a lemon and fruits being removed over time. The visualization uses D3 v5 with SVG rendering, binding fruit data to groups containing circles and text labels. d3.scaleOrdinal maps fruit types to colors and radii, while enter, update, and exit selections manage dynamic changes triggered by setTimeout intervals.

Oct 9, 2018

Borehole Dummy Data

This visualization displays weekly water level measurements from a GSI borehole, plotting depth against date as red scatter points on an SVG canvas. The data is loaded from a CSV file via d3.csv, with dates parsed using timeParse and scales built with scaleTime and scaleLinear. Axes are rendered through axisLeft and axisBottom, including rotated date labels and gridlines, while the title and axis labels are explicitly positioned. The chart uses D3 v5 and demonstrates a template for future borehole data visualization.

Oct 8, 2018

Scatter plot: Quantitative

This visualization displays the population of the nine most populous countries as a scatter plot, with countries listed on the y-axis and population values on the x-axis. The D3.js v5 code uses `scaleLinear` and `scalePoint` to position circles, and `axisLeft` and `axisBottom` to render the axes, with population labels formatted in billions using `format`. Data is loaded from a CSV file and scaled by a factor of 1,000.

Oct 8, 2018

Color and Size legends

This example demonstrates how a legend can encode both color and size for categorical data, using a row of fruits and a separate legend of circles to map each fruit type to a specific hue and radius. Built with D3 v5 and rendered as SVG, the `colorLegend` function defines reusable, data-bound groups and circles, while `index.js` applies an ordinal color scale mapping 'apples' and 'lemon' to red and a muted yellow-green. The visualization updates dynamically as data changes, with the legend and circles responding to the same color and radius scales for consistent encoding.

Oct 6, 2018

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

Oct 2, 2018

Hover to select

Five fruit circles of varying radius and color represent apples and a lemon, ordered in a row. Hovering over a circle triggers a `mouseover` event that calls `setSelectedFruit`, updating a black stroke on the active fruit, which clears on `mouseout`. Using d3 v5 with a module-based `fruitBowl` function, it binds data via `selection.data`, merges enter/update selections, and uses `scaleOrdinal` for mapping type to size and color. The SVG renders in a fixed 960×500 viewport, with dynamic updates as fruits are removed or replaced.

Sep 29, 2018

Unidirectional Flow

Five fruit circles appear in a row, rendered as SVG via D3 v5. The example demonstrates a unidirectional data flow in D3: a click handler updates a selected fruit’s stroke, a timed removal deletes the last circle, and another timed update changes a fruit’s type from apple to lemon, altering its color and radius. The code uses `selection.enter`, `merge`, and `exit`, along with `scaleOrdinal` for color and radius mappings.

Sep 29, 2018

Scatter plot

This scatter plot visualizes the populations of the top 10 most populous countries, with each circle positioned along a categorical y-axis for country names and a linear x-axis for population values (in thousands). The chart uses D3 v5’s `scaleLinear` and `scalePoint` for axes, `axisLeft` and `axisBottom` for grid lines, and renders circles via SVG. Labels are formatted with `format('.3s')` to abbreviate large numbers. Data comes from a CSV file, loaded with `csv()`, and the visualization is drawn entirely in SVG.

Sep 7, 2018

Data Table Summary

This visualization displays a summary of a dataset loaded from a CSV file, showing the row and column counts alongside the file size in kilobytes. It then prints the first 10 rows of data as a formatted JSON object. The code uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to measure the data size, and `d3.select` to append `<pre>` elements displaying the textual output.

Sep 7, 2018