oabundes

@oabundes·14 public vizzes

World Population Area Chart

This visualization shows world population growth over time using a filled area chart, with years on the x-axis and population counts on the y-axis. The data comes from a CSV file containing yearly population figures, processed using d3.csv to parse and convert values. The chart renders as an SVG, using d3.scaleTime, d3.scaleLinear, d3.area, and d3.curveBasis to generate the smooth filled path, with d3.axisBottom and d3.axisLeft displaying labeled tick marks.

Aug 24, 2020

Loading thumbnail…

Temperature on San Francisco Line Plot

A line and area chart visualizes temperature readings across a week in San Francisco, with time on the x-axis and temperature on the y-axis. The red area under the line emphasizes temperature variation, while axes include labels and gridlines. Built with D3 v5, the code uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.area` with `curveBasis` for the shaded region, and `d3.axisBottom` and `d3.axisLeft` to render ticks. Data comes from a CSV of timestamp and temperature observations.

Aug 24, 2020

Loading thumbnail…

Temperature on San Francisco Line Plot

This visualization presents a line plot of temperature readings over the course of a week in San Francisco, using a time-based x-axis and a linear temperature scale. The data, loaded via `d3.csv` from a remote CSV file, is rendered as a smooth, maroon line using the `d3.line` generator with `curveBasis`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, featuring custom tick styling and labels. The chart appears in an SVG element, with margins and scales set through `d3.scaleTime` and `d3.scaleLinear`, and includes a title and axis annotations.

Aug 24, 2020

Loading thumbnail…

Temperature on San Francisco Scatter Plot

The scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Built with d3.v5, it uses `scaleTime` and `scaleLinear` for axes, `extent` to set domains, and `axisBottom`/`axisLeft` with tick lines to create a grid. Data is loaded as CSV from a remote URL, parsed into `Date` and numeric values, and rendered as SVG circles with a steelblue fill. The chart includes axis labels and a title.

Aug 24, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red semi-transparent circles mark each vehicle, with axes labeled accordingly and gridlines drawn. The visualization uses D3 v5, employing `csv` to load data, `scaleLinear` and `extent` for scaling, `axisBottom` and `axisLeft` for axes, and SVG rendering for output. Data types are parsed and coerced to numbers before plotting.

Aug 24, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG chart. Population values from the CSV are multiplied by 1000, and axis tick labels are formatted using `d3.format` with abbreviations. The chart includes grid lines, a title, and an axis label, with circles styled in steelblue.

Aug 14, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with population values read from a CSV file and scaled using `d3.scaleLinear` and `d3.scaleBand`. It demonstrates customized axes: the bottom axis uses `d3.axisBottom` with a tick formatter that abbreviates numbers (e.g., converting G to B), while the left axis removes its domain and tick lines. The chart is rendered as SVG, with a title and axis label added as text elements. The code imports specific D3 v5 modules, including `select`, `csv`, `format`, and axis components.

Aug 14, 2020

Loading thumbnail…

Top 10 Covid 19 Deaths

This bar chart displays the top 10 countries by COVID-19 deaths, with each bar’s length proportional to the death count from the included CSV data. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders as SVG with `axisLeft` and `axisBottom` helper axes. The chart is composed of steel-blue rectangles positioned via the band scale, while margin-based spacing and explicit axis transforms structure the layout.

Aug 13, 2020

Loading thumbnail…

Making a Barchart

This example shows a horizontal bar chart comparing the populations of ten countries, from China to Mexico. The chart uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, map values to positions, and render axes. Bars are drawn as SVG `rect` elements with a steelblue fill, and population values are multiplied by 1000 in the data-loading step before the visualization is rendered. The layout applies margins and transforms the main group to position the chart within the SVG canvas.

Aug 13, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and a mouth created via `d3.arc` for the half-circle path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas. The eyebrows animate upward and back down over four seconds, using chained `transition().duration(2000)` calls that modify the group’s `transform` attribute. The example relies on D3 v5 selections and the `arc` generator to construct the facial features.

Aug 12, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG elements with CSS styling to create and transform basic geometric shapes. The visualization shows circles, rectangles, lines, and paths arranged in a grid-like layout, with some shapes inheriting default black fills while others are explicitly colored red and green. The code uses raw SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>` inside a `<g>` element with scale and translate transforms. CSS classes and rules in `styles.css` control stroke properties, including a custom `stroke-linejoin` for paths, while the body’s margin and overflow are reset for full-viewport display.

Aug 11, 2020

Loading thumbnail…

HTML Cars Report

This example displays a short car inventory list, highlighting the first 2012 Nissan Leaf entry in red. It demonstrates a basic styled HTML report using plain HTML elements and CSS. The page structure is defined with a header and an unordered list, while the styling relies on a linked `styles.css` file, setting the font size, family, and the `.highlighted` class for emphasis. The data is hardcoded within the HTML markup and does not use any JavaScript or charting libraries.

Aug 11, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that renders the text “Hello HTML” in large, centered type using inline CSS. It also includes a script that logs “Hello JavaScript!” to the browser’s console. The page uses no external libraries or frameworks, relying purely on standard HTML5, CSS, and vanilla JavaScript. The styling is defined via a `<style>` block, and the script runs immediately in the page’s body, demonstrating a bare-bones setup for web development.

Aug 11, 2020

Loading thumbnail…

Car Report

This example displays a text-based car report, showing a filtered list of vehicles under a specified price threshold. It uses React to render the report, with imported modules handling data parsing and report generation. The `cars.js` file provides sample car data as JSON, which is filtered and formatted using the `generateReport` and `formatCar` functions. The final report is displayed in an HTML `<pre>` element, showing each car’s year, make, model, and price.

Aug 11, 2020