brunoevione

@brunoevione·10 public vizzes

1) ScatterPlot - Iris Dataset

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each circle represents a sample, with opacity to reveal overlapping points and native SVG tooltips showing exact values on hover. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and React components like `AxisBottom`, `AxisLeft`, and `Marks` to render the SVG. Data loads asynchronously via `d3.csv` from the United Nations World Population Prospects 2019 gist.

Apr 3, 2021

Loading thumbnail…

5) Bar Chart - Styling

This bar chart displays the top 10 countries by population in 2020, using data from the United Nations World Population Prospects 2019. The chart is rendered with SVG in React, leveraging D3 v5 scaleBand and scaleLinear for axes and positioning. Custom axis components generate ticks, while a marks component maps data to styled rectangles with tooltips. The chart uses the Poppins font, a teal fill for bars, and formats population values with d3.format for readability.

Apr 3, 2021

Loading thumbnail…

4) Bar Chart - Refactoring

This bar chart displays population estimates for ten countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization is built with React and D3 v5, rendering bars as SVG rectangles via a modular structure. D3 scales—`scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis—handle the mapping, while separate components for the bottom axis, left axis, and marks help organize the code. The chart highlights an approach that separates concerns for easier reuse in other visualizations, with the loading state shown as plain text until data arrives.

Apr 2, 2021

Loading thumbnail…

3) Bar Chart - Adding Axis using Keys as required by React

This example shows a horizontal bar chart of population data for ten countries, with labeled axes. Built with React and D3 v5, it uses d3.csv to load and parse United Nations World Population Prospects 2019 data, then renders SVG bars via React components. The chart employs d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, using d3 max to compute the domain. React keys, derived from tick values and country names, are applied within map functions to satisfy React's reconciliation requirements, as highlighted in the accompanying README. Axis ticks are generated with xScale.ticks().

Apr 2, 2021

Loading thumbnail…

2) Bar Chart - Adding Axis

This example displays the top 10 most populous countries as a horizontal bar chart with labeled axes. The chart uses React to manage state and render SVG elements, while D3 v5 provides data loading via `csv`, scales with `scaleBand` and `scaleLinear`, and generates axis ticks. D3’s `max` determines the x-axis domain from the United Nations World Population Prospects 2019 data, and margin conventions position the SVG groups for tick marks and labels.

Apr 2, 2021

Loading thumbnail…

1) Bar Chart - Margin Convention

This example displays a bar chart of the top 10 most populous countries, but with all axes and labels removed, resulting in a "pathetic" chart where bars are unreadable without context. The visualization uses React state to fetch and parse the UN population data from a CSV, then renders the bars as SVG rectangles via the `d3.scaleBand` and `d3.scaleLinear` API, positioned within a fixed margin and viewport. The chart intentionally omits tick marks, gridlines, and text, leaving only colored rectangles whose lengths encode population values.

Apr 2, 2021

Loading thumbnail…

Visualizing CSS Colors - d3Arc

This visualization displays all CSS named colors as equal-sized slices in a circular arc chart rendered as an SVG. The data is loaded from a CSV file using D3’s `csv` utility, and each color’s hex value fills its corresponding arc segment. The chart is built with React’s `useState` and `useEffect` hooks to manage the fetched data, while D3’s `arc` and `pie` functions compute the arc paths. A loading placeholder appears until the data arrives.

Mar 22, 2021

Loading thumbnail…

Visualizing CSS Colors

This visualization displays all 148 CSS named colors as a sequence of thin horizontal stripes, each rendered as a div whose background color corresponds to a row from the loaded dataset. The code fetches the CSS color data from a CSV file using D3’s `csv` utility, stores it in React state via `useState` and `useEffect`, and maps each row to a colored div. React handles the rendering of each stripe, while the dataset from Curran’s gist provides the hex values.

Mar 22, 2021

Loading thumbnail…

Mouse Follower

This example shows a single black-outlined circle that follows the mouse cursor across an SVG canvas. Built with React and rendered as SVG, it tracks pointer movements using the `onMouseMove` event handler, which updates the circle's `cx` and `cy` coordinates via React's `useState` and `useCallback` hooks. The initial position is centered on a 960×500 viewport, and the circle has a fixed radius of 15 pixels.

Mar 20, 2021

Loading thumbnail…

Fork of Smiley Face Part IV - React Components

A grid of randomly generated smiley faces is rendered as SVG using React components for each facial feature. The code defines reusable React components for the background circle, eyes, mouth, and face container, with D3’s `arc` API generating the mouth path. Each face receives randomized props for stroke width, eye offset, eye radius, and mouth dimensions, creating varied expressions. The faces are produced by mapping over a D3 `range` array and rendered into a virtual DOM via `ReactDOM.render`.

Mar 18, 2021