C

Colm Lang

@colmpat·16 public vizzes

Loading thumbnail…

Colm Lang A8 | Interaction

This interactive multi-line chart displays daily average temperatures for New York, San Francisco, and Austin over six months. Users can hover over city names to dim the other lines, click to toggle individual lines on or off, and cross out labels. The visualization uses D3 v7 with d3-voronoi.v1, rendering SVG paths with animated transitions. It loads temperature data from a TSV file using d3.tsv, applies d3.axisBottom and d3.axisLeft for scales, and colors city lines via d3.schemeCategory10.

Loading thumbnail…

Nodelink Treemap

A dual-panel visualization links a force-directed node-link diagram to a synchronized treemap, allowing exploration of hierarchical data across two coordinated views. The left SVG panel uses `d3.forceSimulation` to position nodes, while the right panel renders a zoomable treemap via D3’s hierarchy layout. Clicking treemap cells reveals deeper levels and updates the node-link diagram accordingly, with node sizes reflecting accumulated values. The React-based app manages state for dimensions and depth, rendering both charts as SVGs within a responsive split-panel layout.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" centered on a plain page, demonstrating the basic structure of an HTML document styled with CSS and enhanced with JavaScript. The styling uses a `.message` class with a large font size and text alignment, applied to a single `div` element. The page is built with plain HTML, CSS, and JavaScript, with no external libraries or frameworks, serving as a minimal template for web-based visualization projects.

Loading thumbnail…

Colm Lang | A9 Proportional Symbols

A proportional symbols map displays the relative housing cost index for U.S. states, using circles sized with a quantized scale and positioned at state centroids. Built with D3.js, it loads CSV and GeoJSON data, projects geometries via `d3.geoAlbersUsa` and `d3.geoPath`, and renders SVG paths for state outlines. The circles are added with `d3.selectAll`, and a legend is generated using `d3.legendSize` to map cost values to circle radii.

Loading thumbnail…

Colm Lang | A9 Choropleth Map

This choropleth map displays U.S. state population estimates for 2020, with each state filled by a color from a five-step quantized scale. The visualization uses d3-geo with an Albers USA projection and d3.geoPath to render the states from a GeoJSON file, while population data is loaded from a CSV. A d3.legendColor legend, styled with ColorBrewer palettes, communicates the population ranges. Missing values render in light gray, and the SVG output includes a title for the legend.

Loading thumbnail…

Colm Lang A4 | Heatmap

This heatmap visualizes the average share of renewable energy production (as a percentage of total generation) across ten European areas from 2000 to 2020. Using d3.csv to load the data, it maps years along the x-axis and areas along the y-axis, coloring each 30-pixel cell with d3.interpolateRgb.gamma to encode share values. On hover, each cell reveals its exact percentage via a text label. The chart is rendered as an SVG with d3.axisBottom and d3.axisLeft for the axes.

Loading thumbnail…

Colm Lang A2 Heatmap

This heatmap visualizes the average share of renewable energy production across European countries from 2000 to 2020. Each row represents a country, with colored squares indicating yearly percentage values, ranging from dark green (low) to light green (high). The visualization uses the p5.js library, loading CSV data via `loadTable`, and draws the grid of squares with `square()`. A color legend maps percentages to a three-stop gradient created with `lerpColor`. Country and year labels are placed along the axes for reference.

Loading thumbnail…

Colm Lang A6 Bar Chart

This bar chart visualizes the average share of electricity production from renewables across EU member states from 2012 to 2020. Each bar is colored using a linear color scale to encode the year-over-year percentage change, with a legend displaying the percentage format. The chart is built with D3 v7, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis and color encoding, and `d3.legendColor` for the color legend. Data originates from a CSV file, and hovering over a bar reveals its change percentage.

Loading thumbnail…

Colm Lang A2 Bar Chart

This example shows the average share of renewable energy production from 2000 to 2020 for EU member states as a bar chart. Each bar represents a country’s value and is labeled with its corresponding year. The visualization is built with p5.js, using the `loadTable` function to fetch a CSV file from a GitHub gist. The chart includes axes, tick marks, and a rotated y-axis label, rendered through canvas drawing commands, with bars scaled proportionally to the data range.

Loading thumbnail…

Colm Lang A5 | Line Chart

This line chart visualizes the estimated number of honey bee colonies starting each quarter in the United States from 2015 to 2021, based on data from a CSV file. The chart uses `d3.scaleBand` for the year-quarter x-axis and `d3.scaleLinear` for the y-axis, with tick labels formatted in thousands. A single `path` element is drawn using `d3.line()` to connect the data points, while circles mark each observation. The SVG rendering includes custom styling for axes, labels, and interactive hover effects on the dots.

Loading thumbnail…

Colm Lang A5 | Bubble Chart

This bubble chart visualizes bee colony loss across four U.S. states from 2019 to 2021, plotting starting colony counts on the y-axis against time quarters on the x-axis. Each bubble’s size encodes the percentage of colonies lost, while its color distinguishes the state, with legends showing both scales. The visualization is built with D3 v7 and the d3-legend extension, using SVG rendering. Data is loaded from a CSV file via `d3.csv`, with axes created using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

Loading thumbnail…

Colm Lang A4 | Scatter Plot

This scatter plot displays the relationship between total power generation (in TWh) and the renewable share of production (as a percentage) for European countries in 2020. Each green circle represents a country, positioned along the x-axis for generation and the y-axis for renewable share. The visualization is built with D3.js v7, using `d3.csv` to load the external dataset, `d3.scaleLinear` for axis scaling, and SVG `<circle>` elements for the data points. The plot is styled with a custom CSS background and Roboto font.

Loading thumbnail…

Colm Lang A4 | Bar Chart in D3

This bar chart displays the average share of renewable energy production across EU member states per year, with exact percentages revealed on hover. It loads a CSV file from a GitHub gist using `d3.csv`, then renders SVG rectangles scaled by `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The chart includes axis labels, a title, and CSS-driven hover interactions that change bar color and display the numeric value.

Loading thumbnail…

Colm Lang A3 Box Plot

This example shows a box plot comparing the average distance from the Sun for near-Earth objects (NEOs) versus non-NEOs among small-body asteroids, with values in astronomical units. It uses the p5.js library to render two horizontal box-and-whisker plots, displaying minimum, quartiles, median, and maximum values after filtering outliers. The data is loaded from a CSV file hosted on GitHub, and the axes are labeled and ticked with p5.js drawing functions. Custom functions compute quartiles, medians, and boundary-based outlier exclusion to position the boxes.

Loading thumbnail…

Colm Lang A3 Histogram

This histogram visualizes the distribution of Near Earth Objects by diameter, with bar height representing a logarithmic count of objects and the x-axis showing diameter bins in kilometers. Built with p5.js, the sketch loads tabular CSV data from a GitHub gist and renders a custom axis with logarithmic tick marks. The code uses p5.js functions such as `loadTable`, `createCanvas`, and `rect`, along with custom drawing routines for ticks, axis labels, and red bars. The y-axis uses a natural log scale, and the visualization is generated once with `noLoop()`.

Loading thumbnail…

Colm Lang A2 Dot Plot

This dot plot visualizes the average share of renewable energy production per country in Europe for 2020. It displays each country as a green dot along a horizontal axis, with tick marks and labels indicating percentage values. The visualization uses the p5.js library to load a CSV dataset, draw the axis, ticks, and dots, and render country labels. It calculates axis scaling and tick spacing dynamically based on the data range.