performautodev

@performautodev·5 public vizzes

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourced from United Nations World Population Prospects 2019 data. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population values on the x-axis. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with tick labels formatted using D3’s `format` to abbreviate millions as “B”. Each bar is a `rect` element with a native SVG `<title>` tooltip, styled with a teal fill and Poppins font.

Sep 6, 2021

Loading thumbnail…

Untitled

This visualization displays daily temperature readings for New York, San Francisco, and Austin over a three-week period in October 2011. The code uses D3 v3 with SVG rendering to create smoothed line charts, with each city’s data series distinguished by color and labeled with a legend and endpoint text. The chart includes a time-scaled x-axis and linear y-axis labeled in Fahrenheit, with values parsed from a TSV data string embedded in the page. A mouse-over effects group is initialized but remains inactive in the rendered output.

Mar 23, 2021

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This visualization displays Fisher’s Iris dataset as a scatter plot of petal length against sepal width, with points colored by species and a categorical legend. The React components render SVG circles and axes using d3.scaleLinear and d3.scaleOrdinal, with data loaded via d3.csv. Tooltips show formatted x-values, while axis labels and a color legend for species provide contextual annotations.

Mar 23, 2021

Loading thumbnail…

hhhhhhhhdrhdhd

This example presents a minimal HTML page that displays a large, centered “Hello HTML” text message. The page uses inline CSS for styling and JavaScript to log “Hello JavaScript!” to the browser’s developer console. It demonstrates the basic integration of CSS and JavaScript within a single HTML file, serving as a starting point for web development without any external libraries or frameworks.

Mar 23, 2021

Loading thumbnail…

Fork of Loading Data with React & D3 (6.5.0)

This example demonstrates how to load and summarize CSS named colors data using React state and D3 utilities. The code fetches a CSV file from a gist via `d3.csv`, stores the parsed result in React’s `useState`, and updates the display after loading completes. It uses `useEffect` to trigger the async fetch, then renders a text message via the `message` function, which formats file size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization shows plain text statistics rather than a graphical chart.

Feb 28, 2021