P

pplomith

@pplomith·38 public vizzes

Loading thumbnail…

LineChart+ColorLegend

A multi-line chart displays patient biomarker values over time, with each line representing a different marker and a color legend identifying them. The visualization uses D3 v5 within a React application, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeSet1` for colors. Data comes from a CSV file loaded via `d3.csv`, and hovering over a line highlights it while dimming others.

Loading thumbnail…

MultiLine with tooltip

A multi-line chart displays several vital-sign measurements over time for a single patient, with each line colored by metric type. The visualization uses D3 v5 to render SVG paths and includes a custom tooltip that appears on hover. The code relies on d3.nest, d3.line, d3.area, and d3.scaleOrdinal, with jQuery used for tooltip interactions. Data comes from a local CSV file with patient measurements. Mouseover events highlight the hovered line and dim the others, while a vertical gridline helps compare values across time points.

Loading thumbnail…

Fork of Fork of MedData - TimeLine 222 NESTED

A fork of the MedData timeline visualization displays nested medical measurements over time. The chart uses SVG rendering with D3 v5 to draw layered line and area paths representing different patient vitals, including heart rate and diastolic pressure, distinguished by color. A vertical time axis and tooltip are implemented, though interaction handlers are not wired. Data is loaded from a CSV file containing patient records. The visualization nests the data by measurement type using `d3.nest()` and sorts the series.

Loading thumbnail…

medLC3

The visualization displays patient vital-sign measurements over time, focusing on diastolic pressure as the selected metric. It renders an animated SVG line chart with area fills, where data points are highlighted as circles and paths are clipped to the chart region. Using d3.v5, the implementation leverages `d3.line`, `d3.area`, `d3.nest`, and `d3.scaleTime` to organize and draw the series, with a brush-like tooltip interaction. The source data comes from a local CSV file loaded via `d3.csv`, and the visual includes axis ticks, a legend, and a colored line representing the selected pressure readings.

Loading thumbnail…

Fork of MedData - TimeLine TT

This fork of MedData displays a Gantt chart timeline for task scheduling, with colored bars representing task categories like development, coding, and promotion across a time scale. The visualization uses d3.timeScale and d3.timeFormat to map dates, while d3.scaleLinear with interpolateHcl generates the color gradient. The SVG rendering includes a grid background, task rectangles with rounded corners, and text labels positioned within each bar. A separate line chart component appears to be present in the code structure.

Loading thumbnail…

MedData - TimeLine

This interactive timeline visualizes a patient’s diastolic pressure over time, rendered as a red area chart with a smoothed line. Users can hover over the chart to update a vertical selection line, with a tooltip displaying the date and value. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, and `area` generators, along with a brush for zooming. Data is loaded from a CSV file and filtered by the selected metric.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications, with each country colored according to its economy category. Users can click items in the interactive color legend to filter the map, highlighting matching countries and dimming all others, while hovering over the legend reveals tooltips. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render the map from TopoJSON world data, and d3.scaleOrdinal with schemeSpectral to assign colors. Zoom and pan functionality are implemented via d3.zoom, and the legend filtering uses click handlers with opacity transitions.

Loading thumbnail…

Fork of Fork of Fork of MedData - TimeLine 222 NESTED WITHOUT AREA

This example displays time-series medical data for a single patient, filtering the dataset to show only the selected metric (Diastolic pressure) across time. The visualization uses nested line charts and area fills, with each line representing a data category and color-coded via `scaleOrdinal` and `schemeSet1`. The chart is built with D3 v5, using `nest()` to group data, SVG rendering for paths, and includes interactive tooltips and a listening rectangle for mouse events. Data is loaded from a CSV file containing patient measurements.

Loading thumbnail…

ZoomInteractiveLineChart

This interactive line chart visualizes calcium measurement values over time for a single patient, using a smooth curve to connect data points from a CSV file. Users can zoom into the timeline using a brush gesture, which updates the x-axis domain and redisplays the data at the new scale. The chart includes a tooltip that appears on mouseover, showing the date and value at the cursor position, indicated by a red circle on the line. The visualization is built with D3 v5, using SVG rendering, scales for time and linear axes, a line generator with curve basis, and a brush for zoom interactions.

Loading thumbnail…

Fork of MedData - TimeLine 222

A line chart displays a single patient's diastolic blood pressure readings over time from 2010 to 2017, using data from a CSV file. The chart features a smoothed red line with a semi-transparent area fill beneath it, along with axes and a tooltip. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `line`, `area`, and `axisBottom`/`axisLeft` to render SVG elements. An interactive zoom and mouse event handlers are included, though the tooltip functionality is partially commented out.

Loading thumbnail…

Fork of Melting Data for Multiple Lines 12

This visualization shows regional population trends over time, with multiple colored lines representing different world regions from 1950 to 2100. The chart uses a line chart with a time-based x-axis and a population y-axis, featuring interactive zoom functionality. The code leverages d3.csv, d3.nest, d3.line with curveBasis, d3.scaleTime, and d3.scaleOrdinal with schemeCategory10. A custom colorLegend component renders a categorical legend. The data comes from UN population estimates, processed through a custom melt function that reshapes the dataset for visualization. The SVG rendering includes grid lines and axis labels.

Loading thumbnail…

Med Data - LineChart

This chart displays calcium concentration levels for a single patient over time. A red vertical line indicates the currently selected date, and hovering over the chart triggers a tooltip that shows the exact date and value. The visualization is built with D3 version 5, using `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the axes and line within an SVG container. Data is loaded from a CSV file containing multiple medical markers, though only the calcium series is displayed.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing an individual vehicle. The chart uses d3.scaleLinear for both the x and y axes, with d3.extent to set the domains based on the minimum and maximum values in the data. d3.axisBottom and d3.axisLeft create the labeled axes, while circles, sized with a fixed radius, are positioned using the scaled coordinates. The data comes from the auto-mpg CSV file, and the visualization is rendered as an SVG.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their United Nations region using an ordinal spectral color scale. The visualization renders geographic boundaries with D3’s geoNaturalEarth1 projection and geoPath, while loading country shapes and metadata from the world-atlas TopoJSON and TSV sources. A custom color legend explains the region-to-color mapping, and hovering highlights individual nations. The map supports zooming and panning through D3’s zoom event handler, with the sphere background filled in blue.

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users can select which data columns map to the X and Y axes through two dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with SVG rendering. Selecting a new column triggers an animated transition where circles move to their new positions over one second, using `transition().duration(1000).delay((d, i) => i * 10)` for a staggered effect. The plot is updated via a custom `dropdownMenu` module and `scatterPlot` function.

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, showing six major world regions as distinct colored lines from 1950 to 2100. The chart uses a line generator with curveBasis for smooth paths, while a color legend identifies each region. The code melts wide-format UN population data into tidy rows, combining estimates and medium-variant projections from CSV files. It employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.nest, and d3.axisBottom/axisLeft, rendering as SVG with custom tick formatting for abbreviated population values.

Loading thumbnail…

InteractiveYearLineChart

An interactive line chart displays blood calcium values over time for a single patient, with a vertical red line marking a selected year. Users hover over the chart to see a tooltip with the exact date and value, while a brush allows zooming into time ranges. The chart uses d3.scaleTime, d3.line, d3.brush, and d3.bisector on data loaded from a CSV file. SVG rendering and mouse events drive the interactions, with a dashed line and tooltip circle updating dynamically.

Loading thumbnail…

YearInteract

This visualization shows a time series line chart where users can brush along the x-axis to zoom into a specific date range, with a double-click resetting the view. The chart renders a steelblue line using SVG paths and D3 v5's `d3.brushX`, `d3.scaleTime`, and `d3.axisBottom`, while transitions animate the axis and line when the domain changes. Data comes from a comma-separated CSV file with date and value columns.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a multi-line chart of population over time for world regions, with an interactive vertical line that lets users select a specific year. Moving the mouse across the chart updates the selected year, demonstrating how user input can drive state changes in a visualization. The code uses d3.nest to group data, d3.scaleTime and d3.scaleLinear for axes, and a custom colorLegend function with d3.scaleOrdinal. It loads UN population estimates from CSVs and renders the chart as SVG with d3.line and curveBasis.

Loading thumbnail…

CircleMap - Sars-Covid-2019

A world map uses proportional red circles to display confirmed SARS-CoV-2 cases per country, with circle size scaled by case count and a legend indicating magnitude. The visualization builds on a Natural Earth projection via `d3.geoPath`, loads CSV and TopoJSON data, and projects centroids with `d3.geoCentroid` to position circles. It employs `d3.scaleSqrt` for radius encoding, `d3.format` for tick labels, and `d3.zoom` for panning and zooming, rendering with SVG.

Loading thumbnail…

ModData

ModData visualizes COVID-19 confirmed case data for multiple countries across 2020 and 2021 using an SVG bar chart. The D3 v5 code loads data from a CSV file, aggregates confirmed cases by country across both years, and renders the results as bars. It uses d3.csv to parse the dataset and a custom aggregation function that sums confirmed cases per country before storing them in a global array for display.

Loading thumbnail…

Fork of Circles on a Map

This visualization displays the population of each country in 2018 using green circles overlaid on a geographic map. The area of each circle is proportional to the country’s population, using a square-root scale. Users can pan and zoom the map, and hover over a country to see its name and population, or “Missing data” if unavailable. The map is rendered with SVG using D3 v5, leveraging `geoPath` and `geoNaturalEarth1` for the projection, with data from the UN and a world atlas TopoJSON.

Loading thumbnail…

Interaction World Map

This example displays a world map rendered with SVG paths, where countries are filled in light green and turn red on hover. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features from a TopoJSON file loaded from the world-atlas package. The map supports zooming and panning through `d3.zoom`, which applies SVG transforms to the map group. Country names are resolved by joining the TopoJSON data with a TSV table, enabling tooltips via appended `title` elements.

Loading thumbnail…

Circle Map - Coronavirus PT.2

The visualization displays the cumulative confirmed COVID-19 cases per country from January to June 2020, shown as a circle map where each circle’s size corresponds to case counts. It uses D3 v5 to load and process CSV data, parsing dates and summing confirmed cases by year and country. The rendering is SVG-based, with styled tick marks and circles drawn using D3's time formatting and CSV parsing APIs.

Loading thumbnail…

Circle Map - Coronavirus

A circle map visualizes the global spread of the coronavirus pandemic, plotting each country as a circle sized by its confirmed case count. The visualization uses D3.js (version 5) to render SVG circles on a map, with the data loaded from a local CSV file containing daily country-level statistics for confirmed cases, recoveries, and deaths. The map appears to show the progression over time, with each circle's position likely representing a geographic location and its area scaled to the number of confirmed infections.

Loading thumbnail…

BarChar - Religioni + Color Legend

This example shows the top 10 most populated countries with horizontal bars, where each bar’s length represents the total population (in billions) and the y-axis orders countries categorically. The chart uses a color legend in the form of steelblue rectangles, and the visualization reads from a CSV file containing country, religion, and population data. Built with D3 v5, it applies `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with custom tick formatting to display populations in compact notation. The rendering uses SVG elements appended within a fixed-width `<svg>` container.

Loading thumbnail…

LineChart Exercises

This example displays a blue line chart showing how a numeric value changes over time, with dates on the x-axis and values on the y-axis using a time scale and linear scale respectively. The visualization reads data from a CSV file containing two numeric ordered columns, parsing the date and value fields before rendering. Using D3 v5, it employs `scaleLinear`, `scaleTime`, `line`, `axisBottom`, and `axisLeft` to construct the chart, appending a path element with the generated line data to an SVG group with specified margins.

Loading thumbnail…

Fork of Interazione con flusso di dati unidirezionale - Original - pt2

Five circles representing apples and lemons are rendered in an SVG and animate through a series of state changes: removal of a fruit, a type change, and filtering out another item. Using d3.v5’s data join, the circles update with smooth transitions, while mouseover and mouseout events trigger a selected state, highlighting the fruit with a black stroke. The code leverages `selection.data`, `.enter()`, `.merge()`, `.exit()`, and `.transition().duration()`.

Loading thumbnail…

Interazione con il flusso di dati unidirezionale

A React component renders an interactive bowl of fruit as SVG circles, using D3 scales to map fruit type to color and radius. Clicking a circle selects it, shown by a black stroke, with selection state managed through React hooks for unidirectional data flow. The visualization updates declaratively as props change, while commented-out code hints at possible D3 transitions for dynamic data updates. Built with React, D3 v5, and SVG rendering.

Loading thumbnail…

Blank Canvas

This example displays two linked visualizations of Gapminder data from the year 2000: a horizontal bar chart of fertility rates on the left and a scatterplot of life expectancy versus fertility on the right. Clicking a bar or circle highlights that country in both views by turning non-selected elements grey, while a second click resets the highlighting. Built with D3 v5, the bar chart uses `scaleLinear` and `scaleBand` for axes, while the scatterplot encodes cluster membership through a categorical color scale. Both views load their shared dataset from a CSV file and render as SVG.

Loading thumbnail…

Interazione con flusso di dati unidirezionale - Original

Five circles render as apples and animate with transitions as data changes. When clicked, the selected fruit gets a black stroke. The dataset shrinks, one apple mutates to a lemon, and another element is removed across timed updates. Using D3 v5, the code applies a data join with `selection.data`, `enter`, `merge`, `exit`, and `transition.attr` to update SVG circle positions, radii, and colors based on ordinal scales.

Loading thumbnail…

Color and Size legend

This example demonstrates two reusable legend components for scatterplots: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps fruit names to red, yellow, green, and orange circles, while the size legend displays five circular ticks sized proportionally to values from 0 to 10. Both are built with D3 v5, using `d3.scaleOrdinal`, `d3.scaleSqrt`, and the enter-merge-exit pattern to bind SVG groups, circles, and text elements.

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of the world’s countries, organized by continent and subregion, with each leaf node labeled by country name. Using D3 v5, the code builds the tree layout with `d3.tree()` and renders horizontal links via `d3.linkHorizontal()`, while country names appear as SVG text elements with font sizes scaling by depth. Pan and zoom interactions are enabled through `d3.zoom()`. Data is loaded from a JSON file with `d3.json()`.

Loading thumbnail…

PlayersGoal

This visualization is a horizontal bar chart showing fertility rates for various countries in the year 2000. The bars are ordered by the dataset's country field, with the fertility rate mapped to the bar's length from zero. The chart uses D3 v5's `d3.scaleLinear` and `d3.scaleBand` to position the bars, along with `d3.axisBottom` and `d3.axisLeft` for the axes. Data comes from the `gapminder2000.csv` file, and the rendering is done via SVG.

Loading thumbnail…

Course D3

A horizontal bar chart displays the top 10 most populous countries, ranked by population with a linear scale for the x-axis and a band scale for the y-axis. The visualization uses d3.csv to load data from a CSV file, converting population values from strings to numbers before rendering. Rectangles represent each country's population, with axis labels and a title added via d3.axisBottom, d3.axisLeft, and SVG text elements. The chart employs d3.scaleLinear and d3.scaleBand for scaling, with margins defining the inner plotting area.

Loading thumbnail…

Map D3

This map shows the countries of the world on a natural Earth projection, with oceans in blue and landmasses in light green. The visualization uses `d3.geoNaturalEarth1` as the projection and `d3.geoPath` to generate the SVG paths for each country. It loads world boundary data from the world-atlas package in TopoJSON format, then converts it to GeoJSON using the `topojson` library’s `feature` function before rendering. The entire graphic is drawn as SVG elements.

Loading thumbnail…

Fork of Rendering dynamic data - pt2

This example shows a fruit bowl visualization with apples and lemons that updates dynamically over time, demonstrating how D3 handles data joins. The code uses d3.scaleOrdinal to map fruit types to colors and radii, and d3.range with setTimeout to simulate buying and eating fruit. As data changes, SVG circles and text elements are added, removed, or updated in place using selection joins. The example was built with D3 v5 and renders to an inline SVG element.

Loading thumbnail…

Rendering dynamic data

Five circles, colored by a D3 ordinal scale, animate across an SVG canvas as JavaScript modifies an array of fruit objects. The example uses the D3 version 5 API to demonstrate data joins with `enter`, `merge`, and `exit` selections, plus `transition().duration()` to animate radius and position changes over time.