Skip to main content
Log in
S

SUPERMAN79355

@SUPERMAN79355·13 public vizzes

Loading thumbnail…

Temperature In San Fransisco Scatter Plot

This scatter plot displays temperature readings over time in San Francisco, with each red circle representing a data point. The x-axis shows timestamps while the y-axis indicates temperature values. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes and gridlines, with circles rendered as SVG elements. Data is loaded asynchronously from a CSV file via `csv()` and parsed into date and numeric formats.

Jul 3, 2020
Loading thumbnail…

Top 10 most Covid-19 Infected Countries

This scatter plot displays the top 10 countries most infected by COVID-19, with each circle’s horizontal position representing the number of cases and its vertical position the country name. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map case counts and countries, while `axisBottom` and `axisLeft` render the axes. Data from `data.csv` is loaded via `d3.csv`. Circle size is fixed, and the color is red.

Jul 3, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most COVID-infected countries, using 2018 population estimates from the United Nations World Population Prospects. The visualization uses d3.scaleLinear and d3.scaleBand to map case counts and country names, with d3.axisLeft and d3.axisBottom for custom axes. The code formats tick labels using d3.format, removes default axis lines, and appends custom text labels for the chart title and axis caption.

Jul 3, 2020
Loading thumbnail…

Top 10 Most Covid-19 Infected Countries

This bar chart shows the top 10 most populous countries, with population values from the United Nations World Population Prospects 2017 estimate. It uses an SVG rendering with a linear x-scale and band y-scale, formatted axis ticks, and gridlines. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and the format function, with data loaded from a local CSV file.

Jun 28, 2020
Loading thumbnail…

Temperature In San Fransisco Scatter Plot

This scatter plot visualizes hourly temperatures in San Francisco over time, with each circle representing a reading plotted by timestamp and temperature. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and scales, while circles are appended to an SVG with red fill and partial opacity. Data is loaded from a CSV via `csv`, with timestamps parsed into `Date` objects and temperatures converted to numbers. The visualization includes labeled axes and a title, rendered entirely with SVG elements.

Jun 24, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled "Horsepower" and "Weight." The visualization uses D3 v5 with `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. Data is loaded via `csv()` from a remote source and parsed with unary plus operators before rendering.

Jun 23, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the populations of the ten most populous countries, with circles positioned along a linear scale for population and a point scale for country names. The visualization is rendered as an SVG using D3 v5, leveraging `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart. Data is loaded from a CSV file and processed with `csv` and `format`. The plot uses a steelblue fill for circles, with grid lines and labeled axes to clarify the population values.

Jun 13, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the world’s most populous countries, using 2018 estimates from the United Nations World Population Prospects. Circles are positioned along a single axis, with each country labeled, while a legend and footnote clarify the visual encoding. The visualization is built with D3 v5, using an SVG renderer and scale functions to map population values to screen coordinates. Styling is applied via external CSS, and the data is loaded from a CSV file.

Jun 12, 2020
Loading thumbnail…

Shapes with SVG and HTML

This example demonstrates how to draw a face using basic SVG shapes—circles, rectangles, a polygon, and an arc—positioned relative to the canvas center. The code leverages D3 v5 selection and attribute methods (`select`, `attr`, `append`) to build each element, with the mouth created via the `d3.arc()` function. It uses a fixed 960×500 coordinate space, with hardcoded pixel offsets for facial features like eyes and eyebrows, all rendered as SVG within a React-free HTML page.

Jun 6, 2020
Loading thumbnail…

Shapes with SVG and HTML

This example uses raw SVG elements to display basic shapes, including two circles and two rectangles, on an HTML page. The shapes are styled with inline SVG attributes, with two shapes receiving custom fill colors—a purple circle and a pink rectangle—while the others use default black fills. The code directly employs SVG’s `<circle>` and `<rect>` elements within an `<svg>` container, rendered via standard HTML markup, with a linked stylesheet that resets the body margin and defines a `.highlighted` class. No JavaScript libraries are used; rendering relies purely on built-in SVG support in the browser.

Jun 4, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered in the browser window. The page uses a plain HTML document with inline CSS to set the body’s text alignment and font size to 13em. No JavaScript or external libraries are involved; it relies solely on the browser’s default rendering of HTML elements. The visualization serves as a bare-bones starter template for embedding content in a gallery.

Jun 4, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple car inventory report as a static HTML page. It shows three used vehicle listings with their model years, names, and prices, with the first entry highlighted in red. The page uses plain HTML markup with a linked stylesheet, defining a large monospace body font and a `.highlighted` class for the red text. No JavaScript or data-loading APIs are involved; the data is hardcoded directly in the `index.html` file.

Jun 3, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered in the browser window. The page uses a plain HTML document with inline CSS to set the body’s text alignment and font size to 13em. No JavaScript or external libraries are involved; it relies solely on the browser’s default rendering of HTML elements. The visualization serves as a bare-bones starter template for embedding content in a gallery.

Jun 3, 2020