Cecilia831

@Cecilia831·22 public vizzes

Fork csv data

A bar chart visualizes population growth per year from a small CSV dataset, with red rectangles representing values and a 24-pixel text label reading "XYZ Foods Stock Price." The chart uses D3 v5 to load the data via `d3.csv`, parse population values as numbers, and render SVG rectangles. Scales are created with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, though the width and height attributes are set directly from raw data values, resulting in a sparse, incomplete layout.

Jun 6, 2021

Loading thumbnail…

Fork of Minimal Reusable Charts Pattern

This fork of the Minimal Reusable Charts Pattern displays a scatter plot of the Iris Dataset, mapping sepal length to the x-axis and sepal width to the y-axis. The visualization uses D3’s `scaleLinear` and `extent` functions to compute the scales, and renders circles via SVG. It demonstrates a reusable chart module pattern, where the `scatterPlot` function exposes setters like `.data()`, `.width()`, and `.height()`. Data is loaded asynchronously from a GitHub gist using `d3.csv` and parsed with numeric coercion.

Jun 6, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

Jun 5, 2021

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API, displaying a summary of the dataset’s size, row count, and column count on a page. The code uses `d3.csv` with a Promise chain to fetch CSS Named Colors data from a GitHub gist, then computes the file size in kilobytes via `d3.csvFormat`. An alternative commented-out approach uses `async`/`await` with `fetch` and `d3.csvParse` to achieve the same result, highlighting both modern JavaScript patterns for handling asynchronous data loading.

Jun 5, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with each bar colored according to the country’s national flag colors from a 2018 UN estimate. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` to map population values and country names, and `axisLeft` and `axisBottom` for axes. Customized axis labels and tick formatting abbreviate large numbers, while the data is loaded from a CSV file using `csv`.

Jun 4, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large text element. It uses `d3.csv()` with promises to fetch the CSS Named Colors dataset, then calculates the formatted CSV length in kilobytes using `d3.csvFormat`. The visualization also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, as well as a nested promise example, illustrating different approaches to asynchronous data loading in D3 v5.

Jun 4, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

Jun 4, 2021

Loading thumbnail…

Fork of D3 Git History Streamgraph v1

This visualization displays XYZ Foods stock prices from 2011 to 2021 as a simple bar chart, rendered as SVG rectangles with a steelblue fill. The page includes a text title and dynamically appends paragraphs labeled “New paragraph!” for each data entry. It loads the CSV data via `d3.csv`, assigns it to the global `dataset` variable, and appends the bars and text elements to the body using D3 v5 selections. The chart uses a basic join pattern with `enter()` to create marks, though the bars are not explicitly sized in the visible code.

Jun 3, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the UN Population Division, with each bar colored according to a country-specific hex code or named color from the dataset. The visualization uses D3 v5 to load the CSV, apply linear and band scales, and render axes with custom tick formatting that converts billion units to "B". Population values, originally in thousands, are multiplied by 1000 before plotting, and the graphic includes a labeled x-axis and title while removing extraneous axis lines for a cleaner presentation.

May 29, 2021

Loading thumbnail…

Fork of COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

This visualization displays the rolling 7-day average of COVID-19 deaths across the United States from the New York Times dataset. A D3.js scatter plot maps dates on the x-axis against death averages on the y-axis, with labeled axes and a title. The code implements a reusable scatter plot framework using d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, and renders the chart as an SVG that fills the browser window.

May 29, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses the D3 v5 library to load data from a CSV file and render an SVG graphic. Population values are scaled linearly on the x-axis, while country names are positioned on a band scale along the y-axis. The chart is styled with a steelblue fill for the bars, and axes are generated using D3's `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` functions.

May 25, 2021

Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This fork of a reusable D3 scatter plot visualizes NY Times Covid-19 rolling averages for US states, plotting deaths per 100k against cases per 100k. Built with D3 6.7.0, it uses a `scatterPlot` module with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG. The chart is fully responsive, sized to the window, and styled with the Share Tech font. Data is fetched via `csv` from the GitHub repository, with each state represented as a circle of fixed radius.

May 25, 2021

Loading thumbnail…

Fork of Customizing Axes

A horizontal bar chart displays the population of the top 10 most populous countries, using 2018 UN estimates. Each bar is colored according to a value in the dataset. The visualization uses D3 v5's `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and formats tick labels with `format`. The SVG renders bars with custom colors and a title, with axes labeled to aid interpretation.

May 18, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the text “Hello HTML” in large, centered type, styled entirely through inline CSS. It serves as a bare-bones template for HTML, CSS, and JavaScript integration. The body's JavaScript logs “Hello JavaScript!” to the browser’s developer console, using the native `console.log` API. No external libraries or frameworks are employed; the page relies solely on standard HTML elements and vanilla scripting.

May 18, 2021

Loading thumbnail…

Fork of Not so Smiley Face

A stylized smiley face rendered in SVG, with a red circular head, two black eyes, and a downward-opening mouth arc that makes the expression look "not so smiley." The face is positioned at the center of a 960x500 viewport, while the mouth is drawn separately from a fixed coordinate. Built with React for component structure and D3’s `arc` generator to compute the mouth path, the code defines the head radius, eye offsets, and mouth dimensions as constants. The visualization demonstrates combining React’s declarative JSX with D3’s geometry utilities for custom SVG drawing.

May 18, 2021

Loading thumbnail…

Fork of A Bar Chart(Platform)

This interactive bar chart displays global video game sales across different platforms, with a dropdown menu allowing users to switch between regional sales metrics (Global, EU, JP, NA, and Other). Built with React and D3 v5 (using `scaleBand` and `scaleLinear`), the visualization renders SVG rectangles with tooltips showing sales values. Data from Kaggle’s video game sales dataset is loaded via `d3.csv`, while custom axis components handle tick formatting with `d3.format`.

May 15, 2021

Loading thumbnail…

Fork of Sterbefälle in Österreich 2000 - 2020

The visualization displays weekly deaths in Austria from 2000 to 2020, with each year drawn as a separate line on a shared calendar-week axis. Semi-transparent overlapping lines reveal overall patterns and outliers, while one year (2020) is highlighted with a fully opaque line and larger point markers. It uses React with D3 v5, employing `nest()` to group data by year and `d3.line()` with `curveNatural` for smooth paths. Data comes from Statistik Austria via CSV, rendered as SVG, with opacity values manually varied per year to emphasize recent trends.

May 15, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js can load and display data from a local ES6 module while also using D3 to update the DOM. It shows a simple text message and a car data value (the year 2000) rendered on the page. The code uses `import { select } from 'd3'` to manipulate the `#message` div, imports data via a local `cars.js` module, and reads a property from the parsed JSON array. The visualization relies on D3 v5 loaded from UNPKG, with styling applied through an external stylesheet.

May 15, 2021

Loading thumbnail…

Cars Report

This example is a simple “Cars Report” page that displays a static text message. It demonstrates the basic mechanics of a VizHub project, including loading D3 via UNPKG and using local ES6 modules. The code uses the D3 `select` API, though the main functionality relies on vanilla JavaScript to set the text content of an HTML element via `document.getElementById`. The page’s styling is defined in an external CSS file, and the example serves as a minimal template for building more complex visualizations.

May 15, 2021

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization uses a streamgraph to show D3's Git commit history, with each layer representing a D3 repository and thickness indicating weekly commit counts after smoothing. The layer order reflects when each repository was first introduced, revealing the transition from the monolithic `d3` repository to the 4.0 package explosion. Built with D3 v6, it uses `d3.area`, `d3.stack` with `stackOffsetWiggle`, and `d3-area-label` for labeling, while loading commit data from a JSON gist. Interactivity includes hyperlinks to each repository.

May 15, 2021

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization displays the commit history of D3 repositories as a streamgraph, where each layer represents a repository and its thickness shows smoothed weekly commit counts. The layer order follows the chronological introduction of each repository, revealing the shift from the monolithic d3 repository to the 4.0 package explosion. The code uses d3.stack with stackOffsetWiggle and stackOrderAppearance, array-blur for smoothing, d3-area-label for labeling, and d3.scaleOrdinal with hcl colors. Data comes from a JSON file of all D3 commits, rendered as SVG paths with hover effects that highlight individual layers.

May 15, 2021

Loading thumbnail…

first visulization

This visualization is a Sankey diagram that shows the flow of organizational names from their ideological categories (such as armed, communist, Islam, liberation, national, peoples, and revolution) through decades (1970-2010) to world regions. The diagram reveals how these categorized organizations are distributed across time periods and geographical areas. Implemented using the Google Charts Sankey library, the data is loaded from a JSON file and rendered with weighted links, where each connection represents a count of organizations, displaying the hierarchical relationships between the categories, time periods, and regions.

May 15, 2021