Y

yoghurtx

@yoghurtx·28 public vizzes

Loading thumbnail…

patient number and site number

This visualization displays patient numbers and site numbers as interactive bar charts within a scrollable panel, using clickable legends and entity selection to filter displayed data. Built with Vega and jQuery, it renders the chart through a Vega specification that defines custom signals, scales, and legends. The interface includes a “Show All” button to expand the view, while the underlying implementation uses Vega’s data joins and signal system to manage chart height and interactivity.

Loading thumbnail…

Recruitment Rate

This visualization displays recruitment rates across studies and countries using a heatmap-like grid, where each cell represents the cumulative recruitment rate (CRR) for a specific study-country pair. Users can filter the display by selecting countries and studies through multi-select dropdowns, and sort rows and columns by study code or country name in ascending or descending order. The visualization is built with Vega, using its declarative specification to define scales, signals, and data transforms, alongside jQuery for handling the selection interface and triggering updates to the Vega view.

Loading thumbnail…

Country Performance

Country Performance maps total scores by country using a Leaflet map with a color-coded choropleth layer. The visualization uses GeoJSON country boundaries loaded from an external file and D3.js v5 to bind performance data to each region. A legend and information panel display score ranges, while the map supports zooming and panning through Leaflet's built-in interaction. Data includes latitude, longitude, and total scores for each country, rendered through SVG paths generated by D3.

Loading thumbnail…

Country Performance

This example visualizes asthma prevalence across countries using an interactive Leaflet map, with data drawn from a static JSON table. The map displays colored country polygons based on prevalence values, and users can explore the geographic distribution of the data. The code integrates Leaflet for map rendering and tile layers, alongside D3.js for data manipulation, while loading GeoJSON country boundaries from an external script. A legend and info control provide context for interpreting the prevalence ranges shown on the map.

Loading thumbnail…

Country Performance

This example visualizes asthma prevalence across countries using an interactive Leaflet map, with data drawn from a static JSON table. The map displays colored country polygons based on prevalence values, and users can explore the geographic distribution of the data. The code integrates Leaflet for map rendering and tile layers, alongside D3.js for data manipulation, while loading GeoJSON country boundaries from an external script. A legend and info control provide context for interpreting the prevalence ranges shown on the map.

Loading thumbnail…

Country Performance

This example visualizes asthma prevalence across countries using an interactive Leaflet map, with data drawn from a static JSON table. The map displays colored country polygons based on prevalence values, and users can explore the geographic distribution of the data. The code integrates Leaflet for map rendering and tile layers, alongside D3.js for data manipulation, while loading GeoJSON country boundaries from an external script. A legend and info control provide context for interpreting the prevalence ranges shown on the map.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates geometric SVG shapes—circles, rectangles, lines, and paths—arranged in a static composition within a 960×500 viewport. It shows how CSS classes control stroke styling, while inline attributes set fill colors, with groups using transforms to position and inherit presentation attributes. The rendering relies on raw SVG elements and CSS rules, without any JavaScript or external libraries.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern with a bowl of fruit animation. It shows how data joins handle entering, updating, and exiting elements: apples disappear, one apple transforms into a lemon, and fruit positions shift accordingly. The code uses `selection.data()`, `selection.enter()`, `selection.exit()`, and `selection.merge()` within a custom `fruitBowl` function, animating circle radii via `transition().duration(1000)`. Fruits are generated with `d3.range` and `Math.random()` IDs, rendered as SVG circles and text elements with a `scaleOrdinal` color scale.

Loading thumbnail…

Cars Report

This example generates a report of cars priced under a given threshold. After a two-second delay, it displays a text list of matching vehicles, formatted as "year make model: $price." The visualization fetches car data asynchronously via a promise in `getCars`, filters and formats it with `generateReport`, and updates the page content. It uses plain JavaScript with ES6 modules and the Document Object Model (DOM) to inject the final message.

Loading thumbnail…

Choropleth Tutorial - Leaflet

This choropleth map displays country-level total scores using a color-coded legend, rendered with the Leaflet library. It loads GeoJSON country boundaries from a remote source and joins them with score data from a local JSON file. The map includes interactive features like hover tooltips and a legend to explain the color scale. The visualization uses Leaflet’s tile layer and GeoJSON API to create the thematic map.

Loading thumbnail…

Choropleth Tutorial - Leaflet

A world map marks geographical distribution with colored markers and a choropleth overlay. Countries are tinted by a global score using a discrete color scale, while interactive tooltips and popups reveal detailed metrics for each location. The visualization is built with Leaflet, using tile layers for the basemap, GeoJSON for country boundaries, and custom markers bound to tooltips and popups. An info panel updates on hover, displaying scores for the selected country.

Loading thumbnail…

Choropleth Tutorial - Leaflet

A world map marks geographical distribution with colored markers and a choropleth overlay. Countries are tinted by a global score using a discrete color scale, while interactive tooltips and popups reveal detailed metrics for each location. The visualization is built with Leaflet, using tile layers for the basemap, GeoJSON for country boundaries, and custom markers bound to tooltips and popups. An info panel updates on hover, displaying scores for the selected country.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates D3's general update pattern, showing apples and lemons as circles that are added, removed, or converted to different types. The visualization uses d3.scaleOrdinal for color and radius mappings, while data joins with key functions handle enter, update, and exit selections. SVG circles and text labels animate their radius changes via transition().duration(1000). The code uses d3.range to generate initial data and setTimeout to trigger state changes over time.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for animated data visualizations. A row of five apples is rendered as SVG circles, and over time, fruits are removed, one apple is transformed into a lemon, and another is deleted, all while the remaining fruits smoothly transition to their new positions using d3 transitions. The visualization uses a color scale and radial size scale mapped to fruit types via `scaleOrdinal()`, and the `fruitBowl` function manages the enter, update, and exit states through jQuery-style selection merging.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five colored circles represent fruit in a bowl, demonstrating the general update pattern. Apples are red and large, lemons yellow and small. A timer sequentially removes, replaces, and filters fruits, animating circle radius and x-position over one second. The visualization uses d3 v5's `select`, `range`, `scaleOrdinal`, and custom `.transition()` methods to handle enter, update, and exit states with SVG animations.

Loading thumbnail…

World population area plot

This area plot shows the growth of world population over time, with a smoothed curve based on the year and population columns. It loads data from a CSV file and renders it as an SVG. The visualization uses D3’s `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` to generate the filled path, and `axisLeft` and `axisBottom` for grid lines and labels. The y-axis tick labels are formatted with `format` to abbreviate billions, and the dataset comes from the world-population-by-year-2015 CSV.

Loading thumbnail…

World population area plot

This area plot shows the growth of world population over time, with a smoothed curve based on the year and population columns. It loads data from a CSV file and renders it as an SVG. The visualization uses D3’s `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` to generate the filled path, and `axisLeft` and `axisBottom` for grid lines and labels. The y-axis tick labels are formatted with `format` to abbreviate billions, and the dataset comes from the world-population-by-year-2015 CSV.

Loading thumbnail…

Temperature in San Francisco

This visualization tracks global population trends with a smooth, maroon area chart. It displays data from the World Population by Year 2015 dataset, sourced from VizHub. The years are plotted on a time-scaled x-axis against population counts on a linear y-axis. The code constructs the chart using d3.scaleTime, d3.scaleLinear, and d3.area, while d3.axisBottom and d3.axisLeft generate the gridlines and labels. The population values are converted to numbers and the years to Date objects before rendering. The title appears at the top, and the chart is drawn using an SVG path.

Loading thumbnail…

Temperature in San Francisco

This visualization shows a week of temperature readings in San Francisco as a smooth area chart, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file, with timestamps parsed as dates and temperatures as numbers. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the filled path, alongside `axisLeft` and `axisBottom` for labeled axes with gridlines. The SVG output includes a maroon area, axis labels, and a title, all styled via external CSS.

Loading thumbnail…

Temperature in San Francisco

This line chart visualizes temperature readings in San Francisco over a week, using time on the x-axis and temperature on the y-axis. The data, loaded from a CSV via `d3.csv`, is rendered as a smooth path using `d3.line` with `curveBasis`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales are set via `d3.scaleTime` and `d3.scaleLinear`. The chart includes labeled axes and a title, with styling applied through CSS.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, with positions scaled by d3.scaleLinear and axes generated using d3.axisLeft and d3.axisBottom. The SVG rendering includes tick marks and labeled axes, with the chart built using D3 v5’s selection and scale APIs after parsing the CSV data with d3.csv.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries. Each circle represents a country, positioned along a linear x-axis for population and a categorical y-axis for country name. The chart uses D3 v5, rendering as SVG, and employs `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs. The data from `data.csv` is loaded via D3's `csv` function, with population values multiplied by 1000. The chart includes a title and axis labels, with a clean, margin-based layout.

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays the population of the top 10 most populous countries, with country names on the y-axis and a linear population scale on the x-axis. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, with tick labels formatted like '1.42B'. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles, with a title and axis label added as text elements.

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking countries by population, with bars ordered alphabetically along the y-axis and population values on the x-axis. It uses d3.csv to load the data, d3.scaleLinear for the x-scale, d3.scaleBand for the y-scale, and d3.axisLeft and d3.axisBottom to render the axes. The SVG rect elements are filled with steelblue, and the chart is positioned within margins. Population values are converted from thousands to raw numbers before rendering.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—with CSS styling and transforms. It shows how fixed SVG attributes like `fill` and `stroke` interact with stylesheet rules, as seen with the `.lines` group using black strokes and a teal path with rounded joins. The code uses plain SVG elements within an HTML file, leveraging a `scale` transform and nested `translate` groups for positioning. No external libraries are employed; rendering relies entirely on native SVG and CSS.

Loading thumbnail…

Cars Report

This example displays a simple text report of cars, showing each vehicle's year, make, model, and price. It loads a static JSON dataset with a simulated delay, then filters and formats the results into a list. The code uses a JavaScript Promise for asynchronous data retrieval, an ES6 module for data formatting, and the DOM API to update the page's content directly. No external visualization libraries are used; the output is plain text presented in a large font.

Loading thumbnail…

Cars Report

This example generates a text-based report of cars filtered by maximum price. It loads car data from a hardcoded JSON array via a simulated asynchronous `getCars()` Promise, then applies a `filter` and `map` pipeline in `generateReport` to format each matching car as a string. The output, rendered in a `<pre>` element with a large font, lists the year, make, model, and price. The code uses JavaScript ES6 modules, `Promise`, and DOM `textContent` updates, with no D3 visualization.

Loading thumbnail…

Cars Report

This example demonstrates a car report application that filters a static JSON dataset of five cars by price and displays the results as a text listing. It uses asynchronous data loading via a custom Promise-based `getCars` function with a simulated two-second delay, then processes the data with the `generateReport` and `formatCar` helpers. The visualization is plain HTML text rendered into a `<pre>` element, updated through the DOM API, with no D3 or charting library involved.