Skip to main content
Log in
N

nathan@shieldsonline.org

@nshieldscc·12 public vizzes

Loading thumbnail…

WAEVData (Fork of Choropleth by bepnye)

WAEVData presents a linked scatter plot and choropleth map to explore the distribution of electric vehicles (EVs) across Washington State counties. The scatter plot positions each county by EV count against real GDP per capita, with circle size encoding population and color distinguishing rural from urban areas. The accompanying map shades counties by EV count per capita. Users can hover over either visualization to see detailed county statistics. The visualization implements brushing via `d3.brushX()` for zooming on the plot and utilizes `d3.geoPath` with a `geoMercator` projection for map rendering. Data comes from a CSV file, with SVG and animation for rendering.

May 13, 2024
Loading thumbnail…

WAEVData Scatter Plot

This scatter plot visualizes the relationship between electric vehicle counts and real GDP per capita across Washington state counties. Each circle represents a county, positioned by its EV count on the x-axis and RGDP per capita on the y-axis. The visualization is built with React and D3 v6, using `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded from a GitHub-hosted CSV file, with the SVG rendering handled entirely by D3’s selection and append methods.

May 5, 2024
Loading thumbnail…

Fork of Choropleth2

This example presents a dual-panel visualization of global country data, combining a choropleth map with a scatter plot. The map uses color to encode the urban population rate for each country, while the scatter plot displays life expectancy against GDP per capita, with point size representing population and color indicating continent. The code relies on `d3.geoEqualEarth`, `d3.geoPath`, `d3.scaleLinear`, and `d3.scaleOrdinal` for map projection and visual scaling, and it uses two separate SVG elements within a React framework, plus a tooltip for hover interactions.

May 3, 2024
Loading thumbnail…

Fork of Chloropleth

This dashboard combines a choropleth map with a bubble chart to explore country statistics. The map colors each country by birth rate using a linear scale, while the scatter plot displays fertility rate, life expectancy, and population, with points colored by continent. Both visualizations use D3 v6, with `d3.geoEqualEarth` and `d3.geoPath` for map projection and `d3.axisBottom`/`d3.axisRight` for chart axes. Hovering highlights matching countries across both SVG views. Data comes from a GeoJSON file and CSV of 2023 world indicators.

May 2, 2024
Loading thumbnail…

nshieldscc_Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot displays the relationship between GDP per capita and tertiary education enrollment percentages across countries, using a simple point-based visualization. The chart encodes the data with green circles positioned by linear scales for both axes, with fixed domains set to accommodate the dataset's range. Built with D3 v6, the code loads CSV data from a GitHub repository, appends SVG elements to a div, and uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and circle selection joins to render the visualization. The fixed axis domains and small point radius reveal the raw distribution without interactivity or color encoding.

Apr 30, 2024
Loading thumbnail…

WAEVData_Fork of CSV Dataset Template - Penguins

This example displays the first row of the Palmer Penguins dataset as a formatted JSON object, showing its structure and parsed numeric fields. It uses the imported CSV data through the `data.csv` module, converting quantitative columns like bill length and body mass with unary plus operators. The `main` function renders the output into a container using template literals and an HTML `<pre>` element. The source data comes from the ttimbers/palmerpenguins GitHub repository.

Apr 30, 2024
Loading thumbnail…

WACountiesEV_Fork of Simple Scatter Plot

This scatter plot visualizes penguin measurements, displaying bill length on the x-axis and flipper length on the y-axis as semi-transparent circles over a gray inner rectangle. The visualization uses D3’s `scaleLinear` and `axisLeft` functions to map data from the `@curran/penguins` dataset to screen coordinates, with axes and labels rendered via the `@curran/axis-labels` library. The code imports `viz` from a separate module, which also handles drawing the axes, labels, and data points using D3’s `selectAll` and `join` patterns.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes penguin measurements from a GitHub-hosted CSV, mapping flipper length to body mass while coloring each point by species (Adelie, Chinstrap, Gentoo). The code uses D3 v6 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering circles as SVG elements sized with a fixed radius. It also includes mouseover event logging and axis labels, with data parsed via a custom `parseRow` function.

Apr 30, 2024
Loading thumbnail…

Fork of Simple Scatter Plot

A scatter plot shows the relationship between bill length and flipper length for penguins, with each circle representing an individual observation. The data loads from a GitHub-hosted CSV file via d3.csv and renders as a static SVG. The visualization uses d3.scaleLinear for both axes, d3.axisLeft for the y-axis, and the @curran/axis-labels library for axis titles. A light gray inner rectangle delineates the plotting area, while semi-transparent circles reveal overlapping points.

Apr 30, 2024
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values in thousands. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars, while a custom tick formatter converts large numbers to readable abbreviations like “B” for billions. Axis labels and a title are added manually, and gridlines are drawn via `tickSize(-innerHeight)`. Data is loaded from a local CSV file, with the population column multiplied by 1000 during preprocessing.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create and manipulate circles within an SVG container using D3.js. The code uses the `select` method and the `.join()` pattern to manage DOM elements, setting circle attributes like position, radius, and fill color from a data array containing coordinates and color values. It also implements interactive features, including click and mouseover event handlers that log circle names and update a tooltip element. The `container.clientWidth` and `container.clientHeight` properties determine the SVG’s dimensions.

Apr 29, 2024
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the population axis and `scaleBand` for the categorical country axis. Customized axes include a formatted tick label that converts gigabyte notation to billions, while grid lines and domain lines are removed for a cleaner presentation. The chart annotates the population axis and titles the graphic "Top 10 Most Populous Countries."

Apr 29, 2024