Skip to main content
Log in
A

avneet12284

@avneet12284·6 public vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization uses React to render SVG circles as data marks, with d3.scaleLinear for axes and d3.csv for data loading. Axis components are custom-built with d3 ticks, and each circle includes a native SVG `<title>` element for hover tooltips. The styling uses the Poppins font and a muted teal color for marks.

Jan 4, 2022
Loading thumbnail…

Fork of Stylized Line Chart

This fork of the stylized line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting time on the x-axis against temperature on the y-axis. It uses d3.scaleTime and d3.scaleLinear for the axes, with d3.line and d3.curveNatural to generate a smooth path for the data points. The React components organize the visualization into separate AxisBottom, AxisLeft, and Marks modules, rendering the chart as SVG (replacing the original scatter plot’s circles with a single connected line).

Jan 4, 2022
Loading thumbnail…

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries in 2020 as a horizontal bar chart, using React for component structure and D3 for data loading and scales. It imports `scaleBand`, `scaleLinear`, and `max` from `d3` to compute bar positions and widths, then renders SVG `<rect>` elements and axis tick marks with `<line>` and `<text>`. Data comes from a CSV file based on United Nations World Population Prospects 2019, fetched via `d3.csv`.

Jan 3, 2022
Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a bare bar chart with no axes, using rectangular bars proportional to each country’s 2020 population. The chart loads data from the United Nations World Population Prospects 2019 CSV, then uses `d3.csv`, `scaleBand`, `scaleLinear`, and `max` to map country names and population values to SVG rectangles. React manages the component state and rendering, while D3 handles the data processing and scales. The bars render in an SVG canvas with no labels or gridlines, focusing purely on the relative population sizes.

Jan 1, 2022
Loading thumbnail…

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries in 2020 as a horizontal bar chart, using React for component structure and D3 for data loading and scales. It imports `scaleBand`, `scaleLinear`, and `max` from `d3` to compute bar positions and widths, then renders SVG `<rect>` elements and axis tick marks with `<line>` and `<text>`. Data comes from a CSV file based on United Nations World Population Prospects 2019, fetched via `d3.csv`.

Jan 1, 2022
Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented as a wedge of a pie chart. The code loads color data from a CSV file using D3’s `csv` utility, then uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading and state. D3’s `pie` and `arc` generators compute the wedge geometry, and React renders each slice as an SVG `<path>` filled with the corresponding hex color. The visualization updates when data arrives, showing a full circle of color segments.

Dec 31, 2021