G

goodej

@goodej·17 public vizzes

Loading thumbnail…

San Fransisco Temperature Line

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas. It shows temperature in degrees Celsius over time, with each data point marked by a semi-transparent maroon circle and connected by a red, curved line. The visualization uses d3.v6, specifically `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded via `csv()` and rendered as an SVG, with a title and labeled axes for date and temperature.

Loading thumbnail…

Interactions on a Budget

This interactive map displays world countries from the World Atlas TopoJSON dataset using a natural Earth projection rendered as SVG. The visualization supports zooming and panning through d3.zoom, which applies transform updates to a group element. Countries are drawn with d3.geoPath and feature extraction from topojson, while hovering over any country changes its fill color and reveals the country name via a title tooltip. The styling is handled through CSS classes, with the sphere background and country borders defined in style.css.

Loading thumbnail…

Make a map with D3.js

This map visualization displays the countries of the world using a natural Earth projection. The code renders the globe’s sphere and country outlines as SVG paths via d3.geoPath, with data pulled from the World Atlas TopoJSON dataset. Countries are styled in gray with black borders, and the visualization uses D3.js v6 and TopoJSON’s feature method to convert the TopoJSON topology into GeoJSON features for drawing.

Loading thumbnail…

Click to Select

Five fruit shapes appear in a row, rendered as SVG circles with labels. Hovering over a circle turns it steel blue, while apples are red and lemons yellow. The visualization demonstrates data joins through animated transitions, removing apples, replacing one with a lemon, and filtering elements at timed intervals. It uses d3-selection, d3-scaleOrdinal, and transition methods to update position, radius, and fill based on a selectedFruit state.

Loading thumbnail…

General Update Pattern 1

A fruit bowl updates smoothly as apples are eaten and one turns into a lemon, demonstrating D3’s general update pattern. Using `selection.data` with a key function, `enter`, `merge`, and `exit`, the code joins fruit data to SVG circles and text. Transitions animate radius and x-position changes over 1000ms, while a `d3.scaleOrdinal` maps fruit types to colors and sizes.

Loading thumbnail…

Selection-Join

This example visually demonstrates D3’s data-join pattern by repeatedly generating a random subset of alphabet letters, sorted and bound to SVG `text` elements. An infinite loop triggers a new render every two seconds, transitioning entering letters from above in green, updating letters’ horizontal positions in black, and exiting letters downward in brown before removal. The code uses `d3.select`, `d3.transition`, `selection.join` with explicit enter/update/exit handlers, and `d3.shuffle` from the D3 v6 library to create the dynamic dataset.

Loading thumbnail…

practice

This bar chart shows the populations of the ten most populous countries using 2018 estimates from the UN World Population Prospects. The visualization uses D3 v6 with an SVG rendering, where each country is represented by a rectangle scaled along a linear population axis and positioned with a band scale. The data is loaded from a CSV file via `d3.csv`, and axes are generated with `axisLeft` and `axisBottom`. The chart also includes console output from an asynchronous promise example, though it does not affect the visual display.

Loading thumbnail…

General Update Pattern 3

Fruit bowls animate the enter, update, and exit phases of D3's general update pattern. Apples and lemons enter by growing from zero radius, update positions with a subtle bounce, and exit by shrinking toward the bowl's corner. The code uses `selection.data`, `selection.enter`, `selection.exit`, and `transition` to handle state changes triggered by `setTimeout`. D3 scales `scaleOrdinal` map fruit types to colors and radii, while SVG groups and circles render the animation.

Loading thumbnail…

General Update Pattern 2

A dynamic fruit bowl illustrates the general update pattern for data joins with SVG and animation. Apples and lemons are rendered as colored circles with labels, transitioning smoothly across horizontal positions when data changes. The code uses d3.scaleOrdinal for color and radius, and d3.selection with .data(), .enter(), .merge(), and .exit() to handle entering, updating, and exiting elements. Timed mutations—removing fruits and changing an apple to a lemon—trigger 1000ms transitions via .transition().duration().

Loading thumbnail…

Farmington Temperature Range

This chart shows the average observed temperature as a line and the range between average minimum and maximum temperatures as a shaded area for Farmington, Michigan, using monthly NOAA data. The visualization uses D3.js version 6 with `scaleTime`, `scaleLinear`, `line`, and `area` generators, all rendered as SVG. Curves are smoothed with `curveBasis`, and the chart includes axes with gridlines, labeled axes, and a title. Circles mark each average temperature point, while the teal area and line encode the temperature range.

Loading thumbnail…

San Fransisco Temperature

This scatter plot visualizes one week of hourly temperature readings in San Francisco, with each circle representing a recorded temperature at a specific timestamp. The visualization uses a time-scaled x-axis for dates and a linear y-axis for temperature in degrees Celsius, with semi-transparent navy circles to reveal overlapping points. Data is loaded from a CSV file via d3.csv and rendered using D3 v6’s scaleTime, scaleLinear, axisBottom, and axisLeft APIs. The SVG chart includes labeled axes, gridlines, and a title, emphasizing the temperature fluctuations across the week.

Loading thumbnail…

Car Power Acceleration Scatter Plot

This scatter plot visualizes the relationship between power-to-weight ratio and acceleration for various car models. The code uses D3 v6’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `append('circle')` renders each data point as a semi-transparent navy dot. The data comes from the UCI Machine Learning Repository’s auto-mpg dataset, loaded via `csv()`. Axis labels and a title are added as SVG text elements, with grid lines styled via CSS.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon (MPG) and vehicle weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with axes labeled for MPG and weight. The visualization uses D3 v6 with `scaleLinear` and `extent` to map data ranges, `axisBottom` and `axisLeft` for gridlines and ticks, and SVG circles with a steelblue fill. The graph includes axis titles and a header, with data loaded via `csv` from an external URL.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries in 2018, using circles positioned along a linear population scale and a point-based country axis. The visualization uses d3.csv, d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft to render the SVG chart. Population values are converted from thousands to raw numbers, and the x-axis labels are formatted with a custom function that replaces 'G' with 'B'. Data originates from the World Population Prospects 2017 estimate.

Loading thumbnail…

Customizing Axes in D3.js

This bar chart displays the population of the top 10 most populous countries, using data from the 2018 World Population Prospects estimate. Population values are formatted with a custom tick formatter that converts large numbers using `d3.format` with '.2s' notation. The chart employs `d3.scaleLinear` and `d3.scaleBand` to map population and country names, respectively. Customized axes remove the y-axis domain and x-axis domain lines, while x-axis gridlines extend across the plot. An axis label and title are added as SVG text elements.

Loading thumbnail…

Space Missions Bar Chart

This bar chart displays the mission counts of the top 15 space companies since 1957, using data from the Kaggle dataset "All Space Missions from 1957". The visualization employs D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `scaleSequential` with an `interpolateBlues` interpolator to color bars by mission count. It renders as an SVG, with axes generated via `axisLeft` and `axisBottom`. The chart clearly ranks RVSN USSR as the most prolific launcher, with SpaceX appearing at 100 missions.

Loading thumbnail…

Bar Chart w/ D3.js

This bar chart displays the population of the ten most populous countries using 2018 estimates from the UN World Population Prospects. The visualization employs D3.js v6 with SVG rendering, using `scaleLinear` for the x-axis and `scaleBand` for categorical country labels. Population values, read from a CSV file via D3's `csv` method, are multiplied by 1000 before being drawn as steelblue rectangles with axes generated by `axisLeft` and `axisBottom`.