Skip to main content
Log in
O

okahne@gmail.com

@obiekahne·13 public vizzes

Loading thumbnail…

viz to critique

Two interactive stacked bar charts visualize renewable and non-renewable energy production totals and proportions by year, using buttons to toggle between views. The visualization loads CSV data from a GitHub repository and renders it as SVG elements using d3.v6, employing d3.stack, d3.scaleBand, and d3.scaleLinear to construct the charts. The code includes commented-out tooltip functionality and axis labeling, with a fixed y-axis domain for the proportions chart.

May 13, 2024
Loading thumbnail…

rtb scatter and weather line

A linked-view dashboard shows a scatter plot of rtb values by day of year for a selected year (2015–2018), alongside a line chart comparing hourly temperature on a chosen day to its monthly average. Hovering over a scatter point highlights it and triggers an animated line update in the weather chart. The visualization uses d3.v6 with SVG rendering, d3.scaleLinear, d3.axisBottom/Left, and mouse events; radio buttons filter annual data, and a tooltip displays point details. Data is loaded from CSV files and parsed via custom functions.

May 8, 2024
Loading thumbnail…

rtb and weather chart

This visualization pairs a daily river temperature (rtb) scatterplot for 2015 with a linked weather chart. The left SVG shows each day as a circle, with hover interactions that highlight the point, display a tooltip, and update the right SVG to show that day's hourly temperature data. The right chart uses a line plot built with d3.scaleLinear and d3.line. Data is loaded from CSV files, and both charts use d3.axisBottom and d3.axisLeft with animated transitions for hover feedback.

May 6, 2024
Loading thumbnail…

Fork of weather scatter

This visualization shows the relationship between time of day and temperature for a single day, plotting temperature in Fahrenheit against the hour using a line chart generated with D3.js (d3.v5). The chart uses `d3.scaleLinear()` for both axes, with a `d3.line()` generator to draw the temperature curve, and includes grid lines and axis labels. Data is loaded from external CSV files (rtb.csv and temps_doy2015.csv) via `d3.csv()`, with the temperature data for a specific day of year 2015. The SVG rendering is configured with explicit margins, and the styling uses simple CSS for the circle elements.

May 6, 2024
Loading thumbnail…

weather scatter

A weather scatter plot visualizes hourly temperature readings (temp_F) for a single day of the year, plotting each hour along the x-axis and temperature along the y-axis. The visualization uses the D3 v5 library, rendering data from CSV files via `Promise.all` and `d3.csv`, with linear scales (`scaleLinear`) for both axes and grid lines generated by `axisBottom` and `axisLeft`. Circles represent individual temperature readings, and hovering over a point enlarges it, changes its fill to red, and displays a tooltip with hour and temperature values via D3 selection and event handlers. The chart includes axis labels, a title, and uses SVG rendering with CSS styling for circle opacity and tooltip appearance.

May 6, 2024
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes a temperature series dataset loaded from a remote JSON file. It renders a scatter plot where each point is positioned using D3’s `scaleLinear` on the x and y axes, with circles drawn via SVG selections. The underlying `viz` function, from the fork, maps bill length against flipper length from the Penguins Dataset, but here the data source is replaced with `temp_series.json`. Axis labels and margins are configured through helper functions like `xAxisLabel` and `yAxisLabel`.

May 6, 2024
Loading thumbnail…

Fork of Simple Line Chart

This fork of a simple line chart visualizes the Keeling Curve, plotting atmospheric CO2 concentration over time using d3.scaleTime and d3.scaleLinear. The viz.js file constructs the line with d3.line, applies axes via axisLeft, and renders axis labels from the @curran/axis-labels library. Data comes from the @curran/keeling-curve-data package, while the code also references remote CSV and JSON URLs for potential alternate datasets. The chart includes a styled inner rectangle and semi-transparent circular markers, with configuration options passed from index.js.

May 6, 2024
Loading thumbnail…

rtb scatter

This interactive scatterplot visualizes daily river temperature and turbidity data from 2015, plotting each day as a circle with position encoding both variables. Hovering a point highlights it in red and displays its exact values in a tooltip. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `.on('mouseover')` events to trigger the highlighting and tooltip updates.

May 4, 2024
Loading thumbnail…

US States

This visualization displays a map of the contiguous United States, with each state rendered as a blue SVG path. Hovering over a state turns it red and updates a text overlay near the cursor, showing the state’s name and population from the GeoJSON data. The map uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to draw shapes, while mouseover events trigger the text and resize a separate red circle in a second SVG, scaled by population. The data comes from the contiguous-usa.geojson source, and the interaction is built with React and D3 v6.

May 4, 2024
Loading thumbnail…

mouseovers

This scatter plot compares CO2 emissions and GDP for over 190 countries, with each circle representing a country positioned by its economic and environmental data. The visualization uses D3 v5 to render SVG elements, with mouseover events that change circle colors to highlight individual data points. The axes are customized using D3’s scale and axis functions, and the data is loaded from a CSV file containing country names, CO2 emissions, and GDP values. The implementation demonstrates interactive hover effects for exploring the relationship between these two metrics.

May 1, 2024
Loading thumbnail…

interactive scatter

This interactive scatter plot visualizes the relationship between CO2 emissions and GDP for over 190 countries, with each circle representing a nation. The chart uses D3's `scaleLinear` for both axes, and employs `axisBottom` and `axisLeft` for custom tick marks and labels. The data is loaded from a local CSV file using `csv()`. The code includes commented-out instructions for using `scaleLog` to switch to a logarithmic scale, though the active visualization uses a standard linear scale for both variables.

May 1, 2024
Loading thumbnail…

scatter plot practice

This example displays a scatter plot that maps each country’s GDP on the x-axis against its CO2 emissions on the y-axis, using static data from a CSV file. The visualization uses React with d3.v6 to create an SVG chart, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` for data loading. Circles represent countries with a fixed radius of 10 pixels, colored in green, and hover events log data to the console. The chart is rendered within a specified margin and width, ensuring a clean layout.

Apr 30, 2024
Loading thumbnail…

Bar Chart Practice

This bar chart displays the average energy price in euros per megawatt-hour for four seasons in Spain from 2015 to 2018, sourced from a Kaggle dataset. It shows a fall peak above 64, with spring lowest near 51. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map prices to horizontal bar lengths and seasons to vertical bands. SVG rectangles render the bars with steelblue fills, with margins and axes configured in a single group element.

Apr 30, 2024