Lilly-beth Linnell

@ldlinnell·12 public vizzes

UN Intentional Homicides Final Project

This interactive world map displays the distribution of intentional homicide counts across countries, with proportional purple circles overlaid on geographic locations. Users can select different crime types or demographic breakdowns through dropdown menus, though the current implementation only supports one active filter. The visualization combines a Natural Earth projection using d3.geoPath with graticules and country boundaries from TopoJSON. City and crime data are loaded via d3.csv, while React manages the interface state and d3.scaleSqrt determines circle sizing based on homicide values.

Dec 20, 2021

Loading thumbnail…

Brushing in Bar Chart Using UN Intentional Homicide Data

A bar chart using UN Intentional Homicide data displays the number of intentional homicides per country, with country names on the x-axis and homicide counts on the y-axis. Built with D3 v6, it renders red-styled rectangles via SVG, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The code includes a `d3.brushX` implementation (commented out) intended for brushing, though the active view shows static bars. Axis labels identify the plotted variables, and the data is loaded as CSV from a GitHub Gist.

Dec 15, 2021

Loading thumbnail…

Bar Chart Using UN Intentional Homicide Data

This bar chart visualizes the number of intentional homicides per country using data from the UN Intentional Homicide dataset, with values plotted on the y-axis and country names along the x-axis. The chart uses D3 v6 to load the CSV data, filters out zero values, and renders bars as SVG rectangles using the `scaleBand` and `scaleLinear` scales. The visualization highlights the challenge of overlapping country labels on the x-axis due to the large number of categories, while employing `axisLeft` and `axisBottom` for axes and a fixed bar width of 30 pixels.

Dec 15, 2021

Loading thumbnail…

Added Interaction in Scatterplot of Intentional Homicides

This scatterplot displays UN intentional homicide data, plotting homicide values against year for each country. A Voronoi overlay, created with d3.Delaunay, enables interactive tooltips that reveal the country name when hovering over a data point. The visualization uses D3 v6 to render SVG circles and axes, with the Voronoi cells ensuring precise hover detection even for overlapping points.

Dec 10, 2021

Loading thumbnail…

Iteration of Scatterplot of Intentional Homicides

This scatterplot visualizes UN intentional homicide data, plotting each country’s yearly homicide count as a dot. The chart uses d3.scaleLinear for both the year and homicide-value axes, with circles colored by country. It attempts to label every point with its country name using SVG text elements, though the labels overlap. The code loads data via d3.csv, renders SVG circles and text, and includes axis labels for year and homicide count. All plotting is performed with D3 v6’s selection, scale, and axis APIs.

Oct 10, 2021

Loading thumbnail…

Scatterplot of Primary, Secondary, and Tertiary Schools

A scatterplot maps countries’ education statistics from a UN dataset on primary, secondary, and tertiary enrollment. Each circle’s vertical position represents the enrollment count, while its horizontal position corresponds to the education level, using a linear scale for the count and a point scale for the categorical level. The visualization is built with D3 v6, using `scalePoint` and `scaleLinear` to position marks, and `axisLeft` and `axisBottom` for chart axes. The code loads data via `d3.csv` and renders circles as SVG elements.

Sep 29, 2021

Loading thumbnail…

Scatterplot of Labor Participation and Unemployment

This scatterplot displays labor force participation and unemployment rates across multiple years, with each circle representing a country’s value for a given year. The x-axis encodes the year using a linear scale, while the y-axis maps the recorded percentage value. The visualization is built with D3 v6, using `csv` to load UN data, `scaleLinear` for axes, and SVG circles for marks, with axes rendered via `axisLeft` and `axisBottom`.

Sep 29, 2021

Loading thumbnail…

Scatterplot of Intentional Homicides

This scatterplot visualizes intentional homicide counts for various countries over time, with each circle’s vertical position representing the number of homicides and the horizontal position denoting the year. Built with d3.v6, the code uses `d3.csv` to load data from a GitHub Gist, `scaleLinear` and `extent` to map values, and `axisLeft` alongside `axisBottom` to render the axes. The SVG circles are placed using `attr` for the `cx` and `cy` coordinates, drawing directly from the UN Intentional Homicide dataset.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing UN Primary, Secondary, and Tertiary Education data

This example demonstrates how to load and parse a CSV file containing UN Primary, Secondary, and Tertiary Education data. It displays the file size in kilobytes, the number of rows, and the number of columns. The visualization uses the D3.js library (version 7) to fetch the data with `d3.csv` and formats the output using `d3.csvFormat`. The resulting statistics are rendered as text within an HTML `<pre>` element using the `document.getElementById` method.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing UN Labor Participation and Unemployment

This example demonstrates a minimal display of dataset characteristics, presenting the total file size in kilobytes, row count, and column count of a UN Labour Force and Unemployment CSV file in a large-text HTML element. It loads the remote CSV using D3 v7’s `d3.csv` method, then formats the data back to a string with `d3.csvFormat` to compute its byte length. The visualization confirms successful parsing by reporting these three key metrics, offering a bare-bones proof of data loading without rendering any charts or graphs.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing UN Intentional Homicides Data

This example displays basic file metadata from a loaded CSV dataset, showing file size, row count, and column count in a large text output. It uses D3.js version 7 to fetch and parse the UN Intentional Homicides dataset via the `d3.csv` API, formatting the data with `d3.csvFormat` and calculating dimensions. The visualization demonstrates data-loading mechanics rather than graphical representation, with a commented alternative approach using `fetch`, `async/await`, and `d3.csvParse`.

Sep 29, 2021

Loading thumbnail…

FVG Assignment 1

This visualization uses SVG shapes to draw a fall-themed arrangement of pumpkins. Rendered to a 900x500 canvas, it shows three pumpkins in different colors—a large central orange one flanked by two green ones, with smaller wheat-colored pumpkins below. The code works by layering overlapping circles and rectangles, using fills like `chocolate`, `orange`, and `darkolivegreen`, with strokes such as `brown` and `olive` to outline the forms. Path elements create the stems, and opacity controls the background transparency.

Sep 1, 2021