UPW 1963 2.0 with time

100%

UPW 1963 2.0 with time

✓ Published0🌍 Public

Last edited Jan 25, 2023

Created on Jan 25, 2023

Forked from Missing Migrants Project - Aggregation Function

This histogram displays aggregated product values over time, with time binned into monthly intervals on the x-axis and the summed product amounts on the y-axis. It uses React with D3 v5’s `scaleTime`, `scaleLinear`, and `histogram` APIs, and renders SVG rectangles for each bin. The data comes from a CSV file loaded via `d3.csv`, and hovering reveals exact values through SVG `<title>` tooltips.

AI-generated description

A program that loads and visualizes some data

MIT Licensed

Similar vizzes

Loading thumbnail…

1963 UPW Data Viz 1.0

This interactive scatterplot explores the University of the Philippines Week 1963 dataset, allowing users to compare numeric attributes by selecting X and Y axes from dropdown menus. The visualization displays each data point as a colored circle, with hues representing the Topic category and a color legend explaining the mapping. Built with React and D3 v5, the chart uses scales and axes generated by `scaleLinear`, `scaleOrdinal`, `scalePoint`, and custom Axis components, rendering SVG marks with native tooltips.

SSam Hege

73% match

Loading thumbnail…

UPW Pie Chart

This pie chart displays the distribution of United Packing City visits in 1958 by brand, showing each brand’s percentage and total value in thousands. The visualization loads CSV data from a GitHub gist via `d3.csv`. Using `d3.pie` and `d3.arc`, it generates SVG paths with `d3.scaleOrdinal` for color coding. Legends are appended manually, with values formatted using `d3.format`. The chart is rendered entirely with SVG and styled through external CSS.

SSam Hege

71% match

Loading thumbnail…

Untitled

This example presents a histogram of the `price` values from a single-column CSV dataset. Built with React and D3 v4, it creates an SVG visualization with a linear x-axis and automatically binned y-axis counts. The code explicitly uses `d3.scaleLinear`, `d3.histogram`, and `d3.axisBottom`/`d3.axisLeft` to render the distribution, with bars filled in olive. Data is fetched from a remote GitHub-hosted CSV using `d3.csv`, and the histogram bins are defined by the domain and 19 ticks.

Nneojournalist

69% match

Loading thumbnail…

Untitled

This interactive histogram displays the distribution of a single numeric variable from a CSV dataset of prices. A slider dynamically adjusts the number of bins from 1 to 100, with smooth 1000ms transitions updating both the bar widths and the y-axis scale. The visualization uses d3.histogram to compute bin values, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for rendering scales. Bars are drawn as SVG rectangles with a teal fill, while d3’s data join pattern handles entering and exiting elements during updates.

AAbhishek Kumar

68% match

Loading thumbnail…

Hw1 Q3 barplot

This barplot visualizes the running total of a data metric from 1884 to 2010, with the y-axis representing cumulative counts and the x-axis showing years. It uses D3.js v3 APIs such as `d3.scaleBand`, `d3.scaleLinear`, `d3.dsv`, and `d3.axisBottom`/`d3.axisLeft` to load and render data from a CSV file into SVG rectangles. The chart highlights growth trends over time, showing accelerating increases in later decades.

Sswang835

68% match

Loading thumbnail…

Working with Time

This example shows monthly gross profit and units sold over time, with two line charts sharing a time axis. It uses D3 v5 and React, loading data from a CSV file via `d3.csv`. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while `line` draws the paths. The visualization compares two metrics across the same 2020–2021 period, with points and lines styled from the data.

Ggabrielribeirob

68% match

Loading thumbnail…

working with time

A histogram visualizes monthly totals of dead and missing migrants from the Data Canvas - Sense Your City API, with the x-axis showing reported dates across 2019 and the y-axis counting incidents. Built with React and D3 v5, the code uses `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.bin` with `d3.timeMonths` thresholds to group records into monthly bins. SVG rectangles render the bars, with tooltips via SVG `<title>` elements, and custom React components handle axis and mark rendering.

JJenny

68% match

Loading thumbnail…

Untitled

A bar chart displays monthly values from a CSV file, with dates from 2013-01 to 2014-02 on the x-axis and dollar amounts on the y-axis. D3's d3.csv loads the data, d3.time.format parses the dates, and d3.scale.ordinal with rangeRoundBands positions each bar. The x-axis labels are rotated with SVG transforms, while steelblue rectangles encode the values. React and D3 are used in separate index.js and index.html files, though the visible rendering is entirely SVG-based.

SsampayoSomosierra

67% match