DataFeast_71

@DataFeast71·12 public vizzes

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

Mar 23, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle and tooltips revealing the car’s name. It is constructed using the Vega-Lite API (vl) within a D3.js (d3.v5) framework, which registers Vega and Vega-Lite for rendering. The data is fetched as CSV from a GitHub gist using d3.csv. The code configures axis styling, disables zero-scaling for both quantitative fields, and uses semi-transparent, filled points for overlap visibility.

Mar 23, 2021

Loading thumbnail…

using Vega lite API

A circular scatterplot visualizes Mexican states based on population and surface area, with color encoding state names and tooltips revealing additional details. The view uses the Vega-Lite API to construct the spec programmatically, registering Vega and Vega-Lite instances for rendering. Data is loaded asynchronously via D3’s CSV parser and styled with custom axis and title settings for readability. The visualization renders to fit the full browser window in SVG format.

Mar 23, 2021

Loading thumbnail…

Cars Scatter Plot

This visualization shows the population of the top 10 most populous countries using a bar chart, with each country represented by a circle whose horizontal position reflects its population size. The chart uses D3 v6 with `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG elements. The data comes from a CSV file containing 2018 population estimates per the World Population Prospects 2017, with values multiplied by 1000 in the loading step. Circles are styled with steelblue fills, and the chart includes labeled axes and a title.

Nov 22, 2020

Loading thumbnail…

Scatter Plot

This scatter plot shows the populations of the top 10 most populous countries, with bubbles positioned horizontally by population and vertically by country name. The visualization uses D3’s `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis, with axis helpers `axisBottom` and `axisLeft`. Data is loaded from a local CSV file using `csv`, and the population values are multiplied by 1,000. The chart is rendered as SVG, with circles styled steelblue, and the y-axis grid lines extend across the plot.

Nov 22, 2020

Loading thumbnail…

Customizing Axis

This bar chart displays the 2018 population estimates for the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. The x-axis uses a custom tick formatter via `d3.format` to abbreviate numbers with suffixes, and gridlines extend across the chart. The visualization is built with D3 v6, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, rendering as SVG. Data comes from the World Population Prospects 2017 dataset.

Nov 22, 2020

Loading thumbnail…

Make a BarChart

This example visualizes the populations of the ten most populous countries using a horizontal bar chart, based on 2018 estimates from World Population Prospects 2017. The chart encodes country names on a band scale and population counts on a linear scale, with bars rendered as SVG rectangles. It loads data from an external CSV file via `d3.csv`, converts population values from thousands to absolute numbers, and builds the axes using `axisLeft` and `axisBottom`. The implementation relies on D3 v6 modules such as `scaleLinear`, `scaleBand`, and `select`.

Nov 16, 2020

Loading thumbnail…

Make a BarChart

This bar chart displays population estimates for the top ten countries, with horizontal bars sorted by descending value from China to Mexico. It uses d3.csv to load the comma-separated data, then applies d3.scaleLinear for the x-axis and d3.scaleBand for the categorical y-axis. The SVG rendering relies on d3.axisLeft and d3.axisBottom to generate tick marks, while rectangular elements are appended and positioned via the band scale’s bandwidth.

Nov 16, 2020

Loading thumbnail…

Make a BarChart

This bar chart displays the populations of the ten most populous countries, with each bar’s length proportional to the population value. It uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render the axes. Data is loaded from a CSV file, and population values are multiplied by 1000 before rendering. The visualization is drawn as SVG rectangles styled with steelblue fill, with a margin-based layout and a band padding of 0.1 to separate bars.

Nov 16, 2020

Loading thumbnail…

Make a BarChart

Nov 16, 2020

Loading thumbnail…

Let's make a face!

A single large circle sits at the center of an SVG canvas, rendered with a thick black outline and no fill. The example demonstrates basic D3 shape creation and attribute manipulation, using `d3.select` to target the SVG element and `circle.attr` to set the circle's radius to 200 and horizontal position to half the viewport width (960/2). The code imports only the `select` function from D3 v6, leaving the vertical position at its default, and the page styling removes margins and hides overflow for a clean, full-window display.

Nov 13, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that combines HTML, CSS, and JavaScript in a single file. It displays the text "Hello HTML" in large, centered type styled through inline CSS, while JavaScript logs "Hello JavaScript!" to the browser’s console via `console.log`. No external libraries or data sources are used; the page relies solely on native browser APIs and static markup. The code serves as a bare-bones starting point for web development, illustrating the separation of structure, presentation, and behavior.

Nov 13, 2020