L

Louisa Penrice

@lpenrice·26 public vizzes

Loading thumbnail…

Fork of World Happiness Graph

This example links a choropleth world map with a scatter plot to explore the relationship between happiness scores (the "Ladder score") and GDP per capita. The map uses a color gradient to encode happiness, while the scatter plot, color-coded by continent, reveals a positive correlation. Hovering over a map country highlights its corresponding dot and triggers a tooltip with details. Built with D3 v6, it uses `d3.geoEqualEarth` and `d3.geoPath` for the map, `d3.scaleLinear` and `d3.scaleLog` for scales, and `d3.select` to build the SVGs.

Loading thumbnail…

Final Wine Production

This interactive visualization presents global wine production from 1995 to 2023, combining a choropleth map showing annual production quantities with a time-series line chart of production trends for countries producing over 5,000 units. A year slider animates the data, updating both the map’s color-coded quantities and the line chart’s vertical marker. The map uses `d3.geoEqualEarth` projection with `d3.geoPath` for country boundaries, while the chart employs `d3.scaleLinear` for axes and `d3.scaleOrdinal` for continent-based line colors. Hovering over a country or line reveals a tooltip with production details.

Loading thumbnail…

Fork of Wine/Happy Graph Take 2

This visualization displays two side-by-side scatter plots mapping wine production and consumption quantities against selected variables like happiness, GDP, and social support. Users can switch the y-axis variable via a dropdown menu. The code uses D3 v6 with SVG rendering and interactive tooltips on hover, drawing circles with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` scales.

Loading thumbnail…

getting there

This visualization shows global red wine production by country from 1995 to 2023, combining a choropleth map of recent production levels with a line chart tracking top producers over time. The map colors countries by quantity produced in the selected year, while the line chart displays production trends for countries that have exceeded 5,000 units. Users can hover over countries to view their latest recorded production and use a slider to change the year displayed on the map. The code uses d3.geoEqualEarth with d3.geoPath for map rendering, d3.scaleThreshold for color coding, and d3.line for the time series.

Loading thumbnail…

Fork of Production Map and Line Chart

This interactive visualization combines a choropleth map and a multi-series line chart to explore global red wine production from 1995 to 2023. The map uses d3.geoEqualEarth projection and d3.geoPath to shade countries by their most recent recorded production quantity, while the line chart displays yearly trends for major producing nations. Hovering over a country reveals its latest production figure via a tooltip. The visualization employs d3.scaleThreshold and d3.scaleOrdinal for color encoding, with a slider to select specific years, rendered as SVG with d3 transitions.

Loading thumbnail…

Fork of GDP Choropleth Viz

This interactive visualization combines a choropleth map of global GDP per capita with a time-series line plot. A slider allows the user to change the displayed year, updating the map’s color scale and the position of a red vertical line on the line plot. Hovering over a country highlights it in red and updates the line plot to show that country’s GDP trajectory from 1995 to 2023. The map is rendered using `d3.geoPath` with a `geoEqualEarth` projection and a graticule, while the line plot is built with `d3.line`, axes, and scales. GDP data is mapped to a linear color scale from white to blue.

Loading thumbnail…

Production Map and Line Chart

This visualization combines a choropleth map of global wine production with a line chart tracking production over time. The map colors countries by quantity produced, using a threshold color scale, and includes interactive tooltips showing the most recent production value when hovering. The line chart displays production trends for countries that exceed 5,000 units, with each line colored by country using a custom ordinal scale. Both views use D3.js SVG rendering, with the map employing the `geoEqualEarth` projection and `geoPath`, while the line chart uses `d3.line` and `d3.scaleLinear` for axes.

Loading thumbnail…

Fork of Production Map and Line Chart

This visualization combines a choropleth map with a line chart to explore global red wine production from 1995 to 2023. The map uses `d3.geoPath` and a threshold color scale to shade countries by their most recent production quantity, while the line chart plots each country's production over time. Tooltips appear on map hover, and the line chart is filtered to show only countries that produced over 5,000 units. The project uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom` to construct the chart, with SVG for rendering and React as the framework.

Loading thumbnail…

Wine Line Chart

This line chart displays the quantity of wine production from 1995 to 2023 for countries with a minimum output of 2,500 units, excluding global totals. The visualization uses d3.csv to load data, d3.nest to group by country, and d3.line with d3.scaleLinear axes to draw each series. The chart filters out smaller producers and applies a d3.scaleOrdinal color palette to distinguish countries. Data originates from the all_production.csv file, and the SVG is rendered with custom axis formatting.

Loading thumbnail…

Wine Map

This example presents a dual-panel visualization of global wine production data. The left panel is a choropleth map using `d3.geoEqualEarth` projection and `d3.geoPath` to color countries by production quantity, while the right panel is a scatter plot using `d3.scaleBand` and `d3.scaleLinear` to plot each country's production with circle size and color encoding. Both panels are interactive, with mouseover events highlighting corresponding elements across the two views. The visualization loads a world GeoJSON file, a CSV of production statistics, and a JSON file mapping countries to continents.

Loading thumbnail…

Wine Map and Scatter

This example presents a linked visualization of global wine production and consumption data. A left-side SVG map uses `d3.geoEqualEarth` with `d3.geoPath` to color countries by production quantity, while a right-side SVG scatter plot maps production against consumption, with point size encoding population and color encoding continent. Both views share hover interactions that highlight matching countries and points in red. Data is loaded via `d3.json` and `d3.csv` from external GitHub sources, with country names normalized for cross-referencing.

Loading thumbnail…

Production Linking

This visualization links a choropleth map of global birth rates with a scatter plot of beverage production quantities over time, using two side-by-side SVG panels. The map employs `d3.geoEqualEarth` and `d3.geoPath` to draw countries colored by birth rate, while the scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for continent colors. Both panels synchronize hover interactions via shared country IDs, highlighting matching elements in red. Data comes from a GeoJSON world map and CSV production statistics, rendered with D3 v6 in a React framework.

Loading thumbnail…

Top 10 Production Bar/Map

This example combines a choropleth map and a bubble chart to compare top wine-producing countries. The map colors each country by production volume using a white-to-blue scale, while the scatter plot positions countries by fertility rate and life expectancy, with bubble size reflecting wine quantity. Hovering over a country on either view highlights its data in both. The visualization uses d3.geoPath with a geoEqualEarth projection for the map, d3.scaleLinear for color and size encodings, and d3.csv to load the production data.

Loading thumbnail…

Top 10 Wine Countries Bar Chart

This bar chart displays the top 10 wine-producing countries of 2022, ranked by quantity in thousands of hectoliters, with Italy leading and Portugal in tenth place. It uses D3 v5 to map data from a CSV file, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. The visualization customizes both axes with `axisLeft` and `axisBottom`, removing default domains and ticks, and applies a fixed fill color to all bars. The chart’s title and axis label are added as SVG text elements.

Loading thumbnail…

CO2

This example visualizes global CO2 emissions by country on an equal-Earth projection map. Each country is filled with a blue-to-red linear color scale corresponding to its emissions value, while countries without data appear grey. The visualization loads geographic boundaries from a GeoJSON file and CO2 data from a CSV, then renders two side-by-side SVG maps using D3 v6’s `d3.geoEqualEarth`, `d3.geoPath`, and `d3.scaleLinear`. The code is built with React and uses a `Map` for country lookup during rendering.

Loading thumbnail…

Fork of Fork of Fork of WINE

This example visualizes the coefficients of a wine quality regression model, showing how each chemical attribute contributes to the target variable. Using D3 v4 loaded via UNPKG, it renders an animated SVG scatterplot where circles represent attributes plotted against their coefficients on a scale from -1 to 1. The code uses `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.csv` loading data from a local file. Interactive tooltips appear on mouseover, displaying the coefficient value, while each point is styled with a purple fill and white stroke.

Loading thumbnail…

Fork of Fork of WINE

This bar chart displays the coefficients of wine attributes, such as alcohol, sulphates, and volatile acidity, against a fixed scale from -1 to 1. The visualization uses D3.js v6, with data loaded via `d3.csv()` to parse the CSV file. The chart is rendered as an SVG, using `d3.scaleBand()` for the categorical x-axis and `d3.scaleLinear()` for the continuous y-axis. Each attribute is plotted as a point, showing its coefficient value in a simple, direct representation of the dataset's coefficients.

Loading thumbnail…

Map Example

This example visualizes global life expectancy by coloring countries on a Mercator-projected world map, with a white-to-blue linear color scale mapping values. Hovering a country fades others to 50% opacity, highlights the selected one, and outlines it with a black stroke. Built with React and SVG, it uses d3.geoPath with a geoMercator projection to draw GeoJSON features, d3.queue to load data, and d3.csv to parse the 2023 world dataset. Data includes a d3.map storing life expectancy per country, with colors applied via a scaleLinear domain from the data’s extent.

Loading thumbnail…

Another stab at a map

This example shows a world map colored by fertility rate per country, using a blue-to-white linear scale to indicate values. The map is built with D3 v4, loading GeoJSON topology from a GitHub repository and CSV data from another source, then joining them by country name. It uses `d3.geoMercator` for projection and `d3.geoPath` to draw country boundaries as SVG paths. The color scale is created with `d3.scaleLinear` and applied to each country’s fill, rendering a choropleth visualization in a static SVG canvas.

Loading thumbnail…

Wine: Correlation Coefficient Scatter

This scatter plot from a D3.js v5 visualization displays the correlation coefficients of red wine attributes with wine quality, using data loaded from a local CSV file. Each circle represents an attribute, positioned along a band scale for the attribute name and a linear scale for the coefficient value. The code builds an SVG with axes, labels, and a title, using `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` from the d3 module. The data source is the UCI Machine Learning Repository’s Auto MPG dataset.

Loading thumbnail…

Fork of Hello VizHub

This example visualizes the relationship between life expectancy and the number of physicians per thousand people across countries, with point size reflecting CO2 emissions. It loads CSV data from a GitHub repository and renders an SVG scatterplot using D3 v6’s `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs. Circles are appended via `selectAll` and `join`, with mouse events logging data to the console. The chart demonstrates importing D3 via UNPKG and local module usage in VizHub.

Loading thumbnail…

Fork of A4 Scatterplot D3

This example displays a scatterplot of state-level math and verbal SAT score averages, plotting each state as a point to reveal correlations and outliers. The visualization, built with D3.js, uses a linear scale for both axes, with points rendered as SVG circles that change color on hover. Data is loaded from a remote CSV file, and the chart includes axis labels and a title. The code leverages D3's `scaleLinear` and axis functions, along with the `join` operation to create the circles.

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This visualization is a scatter plot from the "Peng Bird" dataset, displaying the relationship between culmen length and depth for different penguin species. The plot uses colored dots to distinguish between Adelie, Chinstrap, and Gentoo penguins, with a legend indicating species via color. The code loads data using `d3.csv()`, applies linear scales via `scaleLinear()`, and renders the plot with `axisLeft()` and `axisBottom()`. It also includes axis labels and a title. The implementation uses D3 v6 and SVG rendering, with mouseover handlers that log event data.

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This horizontal bar chart visualizes the correlation between red wine quality and eleven chemical attributes, using data from a CSV file. It renders SVG rectangles with a purple fill, scaling bar lengths to correlation coefficients via `d3.scaleLinear` and arranging attributes on a band scale with `d3.scaleBand`. Custom axes are drawn with `d3.axisBottom` and `d3.axisLeft`, including a titled axis label and a chart title. The code loads data asynchronously with `d3.csv` and applies D3 v5 selection methods to build the visualization.

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG graphics drawn with D3.js, including two circles and three rectangles whose heights correspond to data values from a JavaScript array. The code uses D3's `select` API to target the SVG element and append shapes, while also utilizing vanilla JavaScript `querySelectorAll` to add click handlers. The visualization serves as a minimal starter template, combining static data-driven bar-like shapes with interactive alert functionality.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example demonstrates a minimal HTML page that combines CSS styling, SVG rendering, and JavaScript interactivity. The code imports D3’s `select` function to append a circle to an SVG element, positioning it at coordinates (100, 100) with a radius of 100. A message displays “Hello HTML!” using large, centered text, while the body margin is reset globally. The visualization uses static SVG shapes without data binding or animations, serving as a clean starter template for exploring React and D3 integration in a VizHub environment.