H

HaileabGH

@HaileabGH·35 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Auto MPG dataset, allowing users to explore relationships between attributes like horsepower, weight, and acceleration. Two dropdown menus let viewers select which columns map to the X and Y axes. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for axes. Points animate into position using d3 transitions, with SVG circles rendered at 10px radius and opacity 0.3.

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot from a fork of a D3 v5 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with each point representing a car. Users select which numeric columns map to the x and y axes via two dropdown menus, built with a custom `dropdownMenu` function that manipulates HTML `select` elements. The `scatterPlot` module uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to render the SVG axes and circles, while `d3.transition` animates the points over two seconds whenever the axis selection changes.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets viewers explore the relationship between different attributes of cars from the classic Auto MPG dataset by selecting which columns map to the X and Y axes via dropdown menus. The visualization uses D3.js (version 5) to render circles with animated transitions, scaling each axis with `d3.scaleLinear` and adding axes via `d3.axisBottom` and `d3.axisLeft`. The user can compare variables such as miles per gallon, horsepower, and weight.

Loading thumbnail…

Stylized BarChart

A stylized horizontal bar chart displays the top 10 most populous countries, using length-encoded bars sorted by population value. The visualization, rendered as SVG within React, uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with tick labels formatted using `d3.format` to abbreviate large numbers. The chart loads data from the United Nations World Population Prospects 2019 dataset, applying custom CSS styling to the axis ticks and marks.

Loading thumbnail…

Fork of ILINet Flu Surveillance Data

This example displays annual U.S. influenza-like-illness (ILI) total cases by week, with each year from 2015 to 2019 drawn as a separate colored line for direct year-over-year comparison. The visualization is built using the Vega-Lite API, which wraps vega-lite and vega, and relies on d3 for CSV data loading. It aggregates weekly ILITOTAL values by year, region, and week from CDC FluView data sourced via Gist, and encodes the year using an unordered color scale, which complicates interpretation since the year values are ordinal but the palette does not imply ordering.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The chart plots time on the x-axis and temperature on the y-axis, with each city’s measurements rendered as a distinct colored, smooth curve using d3.line with curveBasis, plus a textured legend built from d3.scaleOrdinal and schemeCategory10. The visualization is rendered as SVG, using d3.axisBottom, d3.axisLeft, d3.nest for grouping, and d3.extent to set scales, with a blended multiply stroke effect on the paths.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, with `format('.2s')` to abbreviate population numbers (e.g., "1.4B"). The visualization renders as SVG with custom axis components and a tooltip via the `<title>` element, styled with Poppins font and a teal color scheme.

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, using United Nations World Population Prospects 2019 data loaded via d3.csv. React components render SVG elements, with d3.scaleBand positioning countries on the y-axis and d3.scaleLinear mapping population values to bar widths. The d3.format function applies SI notation to axis ticks, converting values like "1.3G" to "1.3B". Color-coded teal bars include native SVG tooltips showing precise population figures on hover.

Loading thumbnail…

Untitled

This interactive bar chart displays the ten most populous countries in the world, using horizontal bars to compare their 2020 population estimates. Built with React and D3 v5, the visualization renders as an SVG, with scales and axes created through `d3.scaleBand` and `d3.scaleLinear`. Data is loaded from a CSV file of the UN World Population Prospects 2019, with population values formatted into billions. The chart includes labeled axes, tick marks, and tooltips that appear on hover for each bar.

Loading thumbnail…

Untitled

This bar chart displays the top 10 most populous countries for the year 2020, using data from the United Nations World Population Prospects 2019. The visualization uses a horizontal bar layout, where each bar’s length encodes population, with a formatted axis label converting values into a readable "B" (billions) format. Built with React and D3 v5, the code constructs a linear scale (`d3.scaleLinear`) for the x-axis and a band scale (`d3.scaleBand`) for the categorical y-axis. The rendering is SVG-based, with interactive tooltips showing exact population values on hover. The chart is styled with a teal color for bars and a clean sans-serif font, presenting the data in an accessible, static format.

Loading thumbnail…

Untitled

A horizontal bar chart displays the ten most populous countries in 2020, with population values encoded as bar lengths. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `AxisBottom` and `AxisLeft` components render tick marks and labels, while `Marks` creates the rectangular bars. Population data comes from the United Nations World Population Prospects 2019, loaded via D3's `csv` function and formatted with `format`.

Loading thumbnail…

Population

This visualization displays the ten most populous countries as horizontal bars, sorted by population size. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the axis scales and layout. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via D3’s `csv` method and formatted with `d3.format`. Each bar includes a tooltip showing the population value. The code also defines custom `AxisBottom` and `AxisLeft` components to generate tick marks and labels, with styling applied through CSS classes.

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the ten most populous countries using horizontal bars, with the underlying data from the United Nations World Population Prospects 2019. Rendered in SVG via React, the chart’s axes and rectangles are built from D3 scale components (`scaleBand`, `scaleLinear`) and custom components (`AxisBottom`, `AxisLeft`, `Marks`) that generate tick lines and labels. Population values are formatted with D3’s `format('.2s')` to display abbreviations like “B” for billions, while a `<title>` element provides tooltips. The visualization uses the Poppins font and a muted color scheme for the marks and axes.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Stylized Bar Chart

This example displays a horizontal bar chart of the ten most populous countries, with each bar’s length proportional to its 2020 population estimate. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes and positioning. Data is loaded from a United Nations World Population Prospects 2019 CSV file, and formatted with d3.format to show values in billions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders an SVG with horizontal bars, axes, and tooltips. The y-axis uses a band scale for categorical country names, while the x-axis applies a linear scale with SI-formatted tick labels (e.g., “1.4B”). The code splits visualization logic across separate components for axes and marks, loading CSV data via the `useData` hook and `d3.csv`.

Loading thumbnail…

Fork of Fork of Fork of Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries, with each bar's length proportional to its 2020 population estimate. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG renders the chart, with axes drawn manually via `AxisBottom` and `AxisLeft` components, while `Marks` renders rectangles with native tooltip titles. Population values are formatted using D3's `format` function to abbreviate numbers (e.g., 1.4B). Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously via `useData`.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, ordered by population with a formatted axis showing values in billions. The chart uses React components to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sorted before rendering. Stylized with the Poppins font and teal bar fills, the visualization includes tick marks, axis labels, and tooltips via SVG `<title>` elements.

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the ten most populous countries using horizontal bars, with the underlying data from the United Nations World Population Prospects 2019. Rendered in SVG via React, the chart’s axes and rectangles are built from D3 scale components (`scaleBand`, `scaleLinear`) and custom components (`AxisBottom`, `AxisLeft`, `Marks`) that generate tick lines and labels. Population values are formatted with D3’s `format('.2s')` to display abbreviations like “B” for billions, while a `<title>` element provides tooltips. The visualization uses the Poppins font and a muted color scheme for the marks and axes.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the message "Hello HTML!" in large, centered text. It shows how to structure a basic document with embedded CSS and JavaScript. The page uses a `<style>` block to define a `.message` class with a font size of 13em and text alignment, applied to a `<div>` element within the `<body>`. The implementation relies solely on standard HTML and CSS, without external libraries or frameworks, and serves as a starting point for building more complex visualizations.

Loading thumbnail…

Fork of Fork of Fork of Stylized Bar Chart

This horizontal bar chart displays the top 10 most populous countries, ranking them by their 2020 population estimates. The visualization is built using a React front-end with D3.js v5 for data processing and SVG rendering. The code employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and the csv function to load data from the United Nations World Population Prospects 2019 dataset.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as horizontal bars, ranked by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. Built with React and rendered as SVG, the chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and custom React components (AxisBottom, AxisLeft, Marks) to draw the grid lines, tick labels, and rectangles. Hovering over a bar reveals the population value via an SVG <title> tooltip.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the message "Hello HTML!" in large, centered text. It shows how to structure a basic document with embedded CSS and JavaScript. The page uses a `<style>` block to define a `.message` class with a font size of 13em and text alignment, applied to a `<div>` element within the `<body>`. The implementation relies solely on standard HTML and CSS, without external libraries or frameworks, and serves as a starting point for building more complex visualizations.

Loading thumbnail…

Fork of HTML Starter

This visualization compares poverty rates in the US and Los Angeles County from 1996 to 2018 using a multi-line chart. The D3.js code (v5) loads CSV data from the Federal Reserve Economic Data, computes summary statistics, and renders the time series with SVG lines. The visualization uses `d3.scaletime` for the time axis and `d3.scaleLinear` for the poverty percentage values.

Loading thumbnail…

D3.js

This example demonstrates a minimal HTML page that uses JavaScript to dynamically change the color of all paragraph elements to blue. The code retrieves paragraphs using the Document Object Model (DOM) API `document.getElementsByTagName`, iterates through them, and applies an inline CSS style property via `style.setProperty`. It relies on standard browser APIs rather than external libraries, with the script loaded asynchronously through the `defer` attribute in the HTML markup. The page contains no visual data visualization, focusing instead on basic DOM manipulation and styling.

Loading thumbnail…

Fork of D3.js

This example demonstrates how to set the text color of all paragraph elements to blue using vanilla JavaScript’s `getElementsByTagName` and `style.setProperty`. The code iterates through the collection of paragraphs and applies the styling directly. It uses a minimal HTML page with a referenced `app.js` script, which executes with the `defer` attribute to ensure the DOM is fully parsed before manipulation. No external libraries or frameworks are involved.

Loading thumbnail…

D3.js

This example visualizes a force-directed graph using D3.js v7, rendering nodes and edges within an HTML page styled with CSS. It employs `d3.forceSimulation` to compute layout physics, with the simulation updating node positions and drawing them as circles and links as lines onto an SVG or DOM element. The code loads data from an external source and dynamically appends SVG elements via D3’s data join, letting the structure respond to the imported dataset. Written as a minimal React-free setup, it demonstrates core D3 v7 APIs for interactive network visualization.

Loading thumbnail…

Fork of Fork of D3.js

This example demonstrates a minimal web page that loads the D3.js version 7 library and logs the library object to the browser console. The page uses a simple HTML structure with a single empty div element. It relies on the `console.log(d3)` command to output the entire D3 API, revealing the available functions and modules. The data source is the d3.v7.min.js file hosted on the official D3.js CDN, and the rendering approach is a bare-bones HTML integration without any custom visualizations or user interactions.

Loading thumbnail…

Fork of D3.js

This example loads D3.js v7 in a minimal HTML page and immediately logs the library object to the browser console. It uses a plain `index.html` with a script tag pointing to the official D3 CDN, alongside a single `app.js` file containing the console log call. No data or visual output is rendered; the page simply demonstrates that the D3 bundle is correctly included and accessible for further development.

Loading thumbnail…

D3.js

This example demonstrates the fundamental structure of a D3.js visualization within a minimal HTML page. The page loads a single external JavaScript file, `app.js`, which is executed after the document is parsed. The body of the page is empty at load time, indicating that the visualization is generated entirely through JavaScript. The code uses the core D3.js library, though no specific API calls are visible in the provided files, and it serves as a blank canvas for adding charts or interactive graphics. The implementation is ready for React integration, as noted in the accompanying README.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using CSS font sizing. The code loads D3.js v7 through multiple methods—a CDN script tag, a Skypack module import, and an npm package—repeatedly selecting all `div` elements with `d3.selectAll` and `selectAll` from d3-selection. It also demonstrates various ways to import D3 modules, including dynamic `import()` and Promise-based imports of d3-format and d3-geo, though the page itself only renders the static text message without further D3-driven interactivity or data visualization.

Loading thumbnail…

Fork of HTML Starter

This example displays a static "Hello HTML!" message centered on a blank page. The code includes multiple attempts to select all `div` elements using different D3 v7 APIs, including `d3.selectAll` from the standard build and Skypack, alongside imports from `d3-selection` and `d3-scale`. The rendering is pure HTML and CSS, with no data visualization or interactive elements present.

Loading thumbnail…

Untitled

This example uses D3 v7 to render data from the v3 dataset. The code relies on `d3.forceSimulation` to position nodes and `d3.geoPath` to project geographic elements, drawing them into an SVG container. The visualization integrates a React framework to manage the component structure, while the HTML page loads D3 via a script tag. The chart appears to show spatial or network relationships derived from the dataset, with forces controlling node layout and paths depicting geographic boundaries or connections.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the message "Hello HTML!" in large, centered text. It shows how to structure a basic document with embedded CSS and JavaScript. The page uses a `<style>` block to define a `.message` class with a font size of 13em and text alignment, applied to a `<div>` element within the `<body>`. The implementation relies solely on standard HTML and CSS, without external libraries or frameworks, and serves as a starting point for building more complex visualizations.

Loading thumbnail…

Untitled

This example demonstrates a data visualization that uses CSS and JavaScript within a minimal HTML page. It leverages interactive elements to display information, with the rendering approach based on the styling and scripting logic embedded directly in the provided files. The visualization is built using the React framework, as indicated by the project metadata, and utilizes the core web technologies of HTML, CSS, and JavaScript to create its dynamic visual output.

Loading thumbnail…

California coronavirus cases: Tracking the outbreak - Los Angeles Times

This interactive article tracks the spread of COVID-19 across California, presenting a choropleth map of case counts by county alongside time-series charts of new cases and deaths. The visualization uses React with D3.js, leveraging `d3.geoPath` for map rendering and SVG for all graphics. Data is displayed dynamically, allowing users to explore the outbreak’s progression from early 2020 through late 2021, with the page sourcing its information from the Los Angeles Times’ reporting.