dleese1

@dleese1·5 public vizzes

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization renders SVG rectangles for each bar with a React-based component hierarchy, using d3-scale functions like scaleBand and scaleLinear to map country names and population values. The chart incorporates a custom text width measurement utility to position the axis label, and includes tooltips showing formatted population values. The design uses a clean aesthetic with Poppins font, teal bars, and muted axis styling.

Oct 18, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders bars as SVG rectangles positioned by a scaleBand and scaleLinear, with axis labels and tick formatting using d3.format. A native canvas element measures text width to position the axis label, while tooltips provided by SVG title elements reveal population values in billions.

Oct 18, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders static text. It displays the string "AAAA" centered on the page using a CSS class with a large font size. The code uses React and ReactDOM to create and mount a functional component, importing a text constant from a separate module, though the imported value is not used in the final render. The rendering approach relies on React’s virtual DOM and direct DOM manipulation through `ReactDOM.render`.

Oct 18, 2020

Loading thumbnail…

React Starter

This React Starter example displays the static text “AAAA” centered on the page. It uses React and ReactDOM to render a single component with a large font size, while importing a separate text variable from an importtext module. The code loads React production builds from a CDN and renders the app into the root div.

Oct 18, 2020

Loading thumbnail…

Untitled

This example demonstrates a minimal interactive data visualization built with React. It displays a simple dataset, rendered as a basic chart or plot, where users can explore the values. The visualization leverages React's state management and rendering capabilities to update the display dynamically. The core functionality is implemented using React's component system and standard JavaScript, with the chart's visual elements drawn directly in the browser. The code serves as a foundation for more complex React-based data visualization projects.

Oct 18, 2020