L

LaurynKW

@LaurynKW·32 public vizzes

Loading thumbnail…

FLAG

This example displays a static flag composed of a white rectangle overlaid with a red rectangle and a circle outline, rendered as SVG elements in a 960-by-500 viewport. The design uses `d3.select` and `d3.append` from the D3 v4 library to construct the shapes, with data for the rectangles stored in an array. The circle is appended separately using explicit `cy`, `cx`, and `r` attributes rather than data-driven binding, and the code relies on D3’s selection and `append` methods without any interaction or animation.

Loading thumbnail…

Sample problems

This example presents five JavaScript practice problems focused on array and object manipulation. The code, built with D3 v4, demonstrates iterating through arrays to match objects, finding common elements, sorting an array by population, selecting a single object, and using a modulus operator within a loop. Since the problems do not involve SVG manipulation, users must open the developer console to see the output of each solution. The data are static, embedded within the `index.html` file.

Loading thumbnail…

Sample problems 2: objects and arrays

This example presents four JavaScript practice problems focused on array and object manipulation, with output shown only in the browser’s developer console. It demonstrates techniques such as iterating with `forEach()`, filtering array elements using `includes()` for substring matching and set difference, sorting an array of objects by a string property with a custom comparator, and checking numeric properties with the modulo operator. The code uses the D3.js v4 library for loading, but the exercises themselves rely on core JavaScript APIs, including `console.log()`, and include sample datasets of U.S. states with their regions and populations.

Loading thumbnail…

Sample problems 3: objects and arrays

This example presents two JavaScript practice problems for computing the mean population of a small array of U.S. states. The code uses D3 v4’s `d3.mean()` for the first solution, then demonstrates two alternative manual approaches—using `forEach` and a `while` loop—to calculate the same average. All results are printed to the browser’s developer console, as the page includes no SVG or visual output. The data is a hardcoded array of state objects containing name, ID, and population values.

Loading thumbnail…

sample problems for bioinformatics class

This example presents a set of JavaScript practice problems for a bioinformatics class, using D3.js v4 inside an HTML page. The code defines a `count_purine()` function that counts purine bases (A or G) in a DNA sequence string and logs the result to the browser’s developer console. No SVG graphics are rendered; instead, the page instructs students to debug and observe output in the console. The code includes commented-out stubs for additional functions, such as `percent_purine()` and `find_purine_rich()`, which are not yet implemented.

Loading thumbnail…

Oyster conservation data by decade

A radial bar chart visualizes Eastern Oyster conservation data by decade, comparing either adjusted revenue or tonnage via a toggle button. The SVG rendering relies on `d3.arc`, `d3.scaleLinear`, and `transition.attrTween` for animated arcs, while `d3.interpolate` colors each decade. Hovering displays tooltips. The code loads data from `Oyster.csv` and includes axis circles, tick labels, and a custom "hello" text element.

Loading thumbnail…

Household monthly electricity consumption

Radial bar charts display household monthly electricity consumption and oyster harvest revenue by decade, with a button toggling between the two datasets. Each decade appears as a colored arc whose length encodes the metric value, using D3 scales and arcs with hover effects. The visualization loads CSV data from files, animates arcs via `transition.attrTween`, and includes tooltips and an adjustable radial axis.

Loading thumbnail…

Household monthly electricity consumption

This example shows yearly revenue for Eastern oysters from 1950 to 2016 in a radial bar chart, where each arc represents one year and its angular extent encodes the revenue value. The chart animates each arc’s growth using `transition.attrTween` with an interpolator, and provides tooltips on hover. It uses `d3.csv` to load the data, `d3.arc` for the arcs, `d3.scaleLinear` for mapping values to angles, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The data comes from a CSV file containing year, species, metric tons, pounds, and revenue.

Loading thumbnail…

Household monthly electricity consumption

A radial bar chart displays household monthly electricity consumption from the `energy.csv` dataset. Each month is represented as an arc, with its angular extent and radial position encoding the value. The visualization animates the arcs growing into place using `transition.attrTween` and `d3.interpolate`. Built with D3 v4, the chart renders as SVG and includes interactive tooltips on mouseover, revealing each month's exact consumption value.

Loading thumbnail…

Radial Stacked Bar II

This radial stacked bar chart displays the population distribution of U.S. states across seven age brackets, with each state occupying a wedge and stacked segments representing age groups. The chart uses D3 v4 with a custom `d3-scale-radial` plugin, combining `d3.scaleBand`, `d3.scaleRadial`, and `d3.stack` to generate SVG arcs via `d3.arc`. State labels rotate around the outer edge, while circular grid lines and a legend clarify the age categories. Data comes from a CSV file, and the rendering is entirely SVG-based.

Loading thumbnail…

question13

This example renders a simplified version of the Jamaican flag as three vertical SVG rectangles using D3 v4. The code defines an array of objects containing fill colors, x/y positions, and dimensions for the green, yellow, and black stripes. It appends each rectangle to the SVG canvas with `svg.selectAll("rect")`, binding the data and setting attributes like `x`, `y`, `width`, `height`, and `fill` through anonymous functions. The visualization is purely static, with no interaction or transitions, showing a straightforward data-to-shape mapping.

Loading thumbnail…

FLAG

This is a static SVG visualization of a simplified flag made from three vertical rectangles colored green, yellow, and red. It shows how categorical color and horizontal position are mapped from a small inline JavaScript array of data objects, with each record containing a fill value and an x coordinate. The example uses d3.select, d3.append, and the .enter() selection API from d3.v4 to construct the rectangles, relying on SVG attributes like width, height, and fill. The data is defined directly in the code rather than loaded from an external file.

Loading thumbnail…

FLAG

This is a static SVG visualization of a simplified flag made from three vertical rectangles colored green, yellow, and red. It shows how categorical color and horizontal position are mapped from a small inline JavaScript array of data objects, with each record containing a fill value and an x coordinate. The example uses d3.select, d3.append, and the .enter() selection API from d3.v4 to construct the rectangles, relying on SVG attributes like width, height, and fill. The data is defined directly in the code rather than loaded from an external file.

Loading thumbnail…

FLAG

This example displays a static flag composed of three vertical green, yellow, and red rectangles. The code defines an array of data objects with fill colors and x-coordinates, then binds it to SVG `rect` elements using D3 v4’s data join. Each rectangle is positioned and colored through accessor functions that read the bound data, rendering the flag at a fixed size. The visualization uses d3.select, selection.data, and append methods to generate the SVG output.

Loading thumbnail…

The d3 test

This scatter chart plots contig length against GC content from a FASTA file. The code parses sequence headers using `d3.dsvFormat` to extract numeric values, then renders circles with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`. The visualization uses hardcoded sample data as a fallback, with axes and points styled via CSS.

Loading thumbnail…

Sample problems 3: objects and arrays

This example presents four JavaScript practice problems for manipulating arrays of objects, specifically a list of U.S. states with their names, IDs, and populations. The code demonstrates calculating the mean population using both D3’s `d3.mean()` aggregate function and manual iteration with `forEach` and a `while` loop. The visualization itself renders no graphics; instead, it instructs users to open the developer console to view computed results. The page uses D3 v4 and is forked from a series of related blocks by scresawn.

Loading thumbnail…

Sample problems 2: objects and arrays

This example demonstrates four JavaScript practice problems for working with objects and arrays. The code uses a hardcoded array of state objects and a pair of simple arrays to test filtering, comparison, and sorting logic. It relies on the base JavaScript array methods `forEach`, `includes`, and `sort`, along with the d3 `ascending` comparator. All output is printed to the browser’s developer console using `console.log`, as the visualization itself displays only a static heading and instructions.

Loading thumbnail…

Sample problems: objects and arrays

This example presents five JavaScript practice problems for manipulating data structures, using the D3 library (v4) within an HTML page. It demonstrates techniques like iterating through arrays with `forEach`, matching objects to copy properties, finding intersecting array elements with `includes`, and sorting an array of state objects by population using the `sort` method and `d3.ascending`. It also shows logging results to the console and using `d3.range` to create a numeric sequence for a modulus-based filtering exercise, though the final solution is left incomplete.

Loading thumbnail…

US State Map

This example visualizes the geographic distribution of Zika virus cases across US states, with a choropleth map that uses a sequential color scale to encode the total case count per state. The map is rendered as an SVG using the D3.js v4 library, and includes interactive hover states that display a tooltip with the exact case number for each state. Data is loaded from a CSV file and processed with D3's `d3.csv` function, while the U.S. state boundaries are drawn using a collection of SVG path elements provided by the `uStates.js` library. The coloring applies a logarithmic scale to handle the wide range of case values, from states with just a few cases to those with over a thousand.

Loading thumbnail…

US State Map

This visualization is a choropleth map of the United States, colored to show the number of Zika virus cases reported in each state during 2016. It uses a logarithmic color scale to differentiate the magnitude of cases, with darker shades of orange representing higher counts. The map is rendered using D3 v4's SVG paths for each state, and hovering over a state reveals a tooltip with the exact number of cases. The data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

US State Map

The map displays Zika virus case counts per US state, colored according to a gradient that encodes the number of cases. Hovering over a state reveals a tooltip with the state name and its case total. The visualization uses D3 v3 to load CSV data and render an SVG map, with state paths defined in a separate JavaScript file and a custom tooltip HTML builder for interaction.

Loading thumbnail…

Sample problems 3: objects and arrays

This example presents four JavaScript practice problems centered on manipulating arrays of objects, specifically U.S. state data with name, ID, and population fields. The page instructs users to solve the problems in the browser console, as no SVG or visual output is generated. The first problem demonstrates using `d3.mean()` with an accessor function to calculate the average population, while subsequent problems require computing the same statistic manually without D3’s helper. The code relies on the D3 v4 library for the mean calculation and includes sample data hardcoded in the script.

Loading thumbnail…

US State Map

A choropleth map of the United States displays Zika virus case counts by state, with darker purple shades representing higher case numbers. Hovering over a state reveals a tooltip with the state name and its total case count. The visualization uses d3.csv to load the zika_2016.csv data, and the uStates.js library to draw the SVG state paths. Interactive hover effects and tooltips are implemented with D3 event handling and a custom HTML tooltip, providing a clear geographic overview of the outbreak's distribution.

Loading thumbnail…

Random Gene

Four gene rectangles animate horizontally onto a genomic ruler, with forward genes in green and reverse genes in red, each labeled with a letter. The SVG uses d3 transitions with staggered delays to move each gene from off-screen to its start position. Tick marks at 100, 500, and 1000-unit intervals are drawn as black rects, while the gene positions come from a hardcoded JavaScript array. The visualization relies on d3.v4 selection methods and the transition API.

Loading thumbnail…

US State Map

This interactive map displays the geographic distribution of West Nile virus cases across the United States. State boundaries are drawn using SVG paths provided in the `uStates.js` file. The visualization uses D3.js v3 for data binding and rendering, with a tooltip that reveals low, average, and high case values from the `WestNile.csv` dataset on hover. The map supports color-coded choropleth styling and includes animated transitions for state highlighting.

Loading thumbnail…

FLAG

This example displays a simple French flag made of three vertical rectangles. The visualization is built with D3 v4 and renders to an SVG canvas. The code defines a small dataset of three objects with fill colors and x-coordinates, then uses `svg.selectAll("rect")`, `.data()`, and `.enter().append("rect")` to create the rectangles. Each rectangle’s position, size, and color are set via attribute functions that read from the data. The flag is placed on a fixed 960 by 500 pixel stage, with the rectangles starting at y=100 and each having a width of 180 and height of 200.

Loading thumbnail…

FLAG

This example displays a simple French flag made of three vertical rectangles. The visualization is built with D3 v4 and renders to an SVG canvas. The code defines a small dataset of three objects with fill colors and x-coordinates, then uses `svg.selectAll("rect")`, `.data()`, and `.enter().append("rect")` to create the rectangles. Each rectangle’s position, size, and color are set via attribute functions that read from the data. The flag is placed on a fixed 960 by 500 pixel stage, with the rectangles starting at y=100 and each having a width of 180 and height of 200.

Loading thumbnail…

FLAG

This example displays a simple French flag made of three vertical rectangles. The visualization is built with D3 v4 and renders to an SVG canvas. The code defines a small dataset of three objects with fill colors and x-coordinates, then uses `svg.selectAll("rect")`, `.data()`, and `.enter().append("rect")` to create the rectangles. Each rectangle’s position, size, and color are set via attribute functions that read from the data. The flag is placed on a fixed 960 by 500 pixel stage, with the rectangles starting at y=100 and each having a width of 180 and height of 200.

Loading thumbnail…

fresh block

This example displays a static SVG canvas containing three colored rectangles, arranged horizontally with blue, white, and red fills at varying x-coordinates. The visualization is generated using d3.select to append the SVG element with fixed dimensions, and the color data is stored in a JavaScript array with fill and position properties. Though the code defines the flag array with console.log output, the rectangles are not yet rendered to the screen. The implementation relies on D3 v4’s SVG creation APIs, with the data structure prepared for potential future rendering.

Loading thumbnail…

Flags

This example assembles a small collection of abstract flag-like shapes from basic geometric primitives. It shows a sequence of colored rectangles, a red circle, a semi-transparent bordered rectangle, another set of horizontal bands, and a black triangle, all arranged loosely across a wide canvas. The visualization uses the D3.js v4 library to append SVG elements—rectangles, circles, and polygons—directly to the document body. Each shape is positioned and styled with explicit attributes for fill color, size, and opacity, with no underlying data or interactive behavior present.

Loading thumbnail…

Flag w/ Array

Three vertical rectangles form a simplified French flag, with blue, white, and red bands positioned at x-coordinates 100, 300, and 500 on an SVG canvas. The visualization demonstrates array-driven data binding in D3.js v4: a JavaScript array of objects containing fill colors and x-offsets is passed to `svg.selectAll("rect").data(...)`, and each rectangle’s position and color are mapped from the data properties. Rendered via SVG elements, the chart’s static composition highlights how D3 translates structured data into graphical primitives.

Loading thumbnail…

fresh block

The visualization displays a single line of text reading "Yerrr" in a monospace font, positioned near the upper-left corner of an SVG canvas. It is built with D3 v4, using the `d3.select` method to target the HTML body and `append("svg")` to create a 960 by 500 pixel canvas. A `text` element is added with attributes for font size, family, and coordinate placement. The rendering relies on SVG, with the source originating from a gist authored by LaurynKW.