lemonxixixi

@lemonxixixi·6 public vizzes

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset. Red circles represent each vehicle, with axes labeled and a title displayed. The visualization uses D3 v5 with `scaleLinear`, `axisBottom`, and `axisLeft` to construct the plot, while `csv` loads the data. The SVG rendering applies semi-transparent circles and custom tick styling via CSS.

Feb 24, 2021

Loading thumbnail…

Fork of Auto MPG Summary

This visualization presents a text-based summary of the UCI Machine Learning Repository’s Auto MPG dataset. It displays the total number of rows, columns, and rounded file size in kilobytes, followed by a pretty-printed JSON preview of the first ten data records. The page uses D3 v5’s `select`, `csv`, and `csvFormat` functions to fetch the remote CSV, compute row and column counts, and format the output for display. The black background and green monospaced text create a terminal-like aesthetic, with large `<pre>` elements rendering the results.

Feb 24, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, with population values expressed in thousands. It shows customized d3.axisBottom and d3.axisLeft instances, including tick formatting with d3.format that converts G to B, removed domain lines, and rotated axis labels. The SVG rendering uses d3.scaleLinear and d3.scaleBand, with data loaded via d3.csv and manipulated through d3.select and d3.max.

Feb 24, 2021

Loading thumbnail…

Fork of React Starter

This example draws a simple yellow smiley face in SVG using React and D3.js. It defines the face shape with a React component, rendering two eye circles and a mouth arc positioned on a larger yellow circle with a black stroke. The mouth is generated by D3’s `arc` function, with specified inner and outer radii and angled start/end points. The code uses ReactDOM to mount the component into a root div, combining React’s declarative JSX with D3 v6 geometry helpers for the path data.

Feb 22, 2021

Loading thumbnail…

Fork of React Starter

A fork of the React Starter template displays the single word "Hello" in massive, centered type. The React application renders this static message using the `React` and `ReactDOM` production libraries loaded from unpkg, with the component output injected into the `#root` div. The presentation relies on inline CSS styling with a 13em font size, demonstrating a minimal setup for a React-based visualization without additional data or interactive behavior.

Feb 22, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a blank SVG canvas with a single empty circle element. The code, written in plain HTML, contains no visible data or rendering logic beyond the markup structure. It serves as a minimal template for embedding SVG graphics in a webpage. The page uses the standard HTML5 `<!DOCTYPE html>` declaration and relies on the browser’s native SVG rendering capabilities. No external libraries or JavaScript are referenced, making it a static, visual placeholder.

Feb 22, 2021