nexus1058

@nexus1058·85 public vizzes

Organisation Network Graph

Four organization networks form a force-directed graph, with colored clusters of main nodes and smaller child nodes connected by links. The visualization uses d3's simulation API—`forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter`—to compute node positions, rendered as SVG circles and lines. Dragging nodes via d3's `drag` interaction repositions them, triggering the simulation to restart. Node colors come from a custom palette in `colors.js`, and the graph is built from static data in `data.js`.

Aug 15, 2021

Loading thumbnail…

Organisation Network Graph Starter

Three nodes representing people are drawn as circles in an organisation network, connected by two lines to show a chain of relationships. The visualization demonstrates a force-directed graph using d3.forceSimulation, with forceManyBody for repulsion, forceLink for edge attraction, and forceCenter to keep the layout centered. The SVG rendering shows circles positioned at each node's x and y coordinates, while lines update based on the source and target positions of each link.

Jul 8, 2021

Loading thumbnail…

Organisation Network Graph

This example displays a static network graph visualization, but the visible code focuses on demonstrating VizHub’s integration capabilities. It loads D3 via UNPKG, uses the `select` function from D3 to target a DOM element, and imports a local ES6 module `myMessage.js` to set that element’s text. The rendered graph itself is not implemented in the provided files; instead, the example highlights how to combine D3, local modules, and a CDN within a single project.

Jul 7, 2021

Loading thumbnail…

Corona Deaths (Linear Scale) by Country with Labels

This example visualizes cumulative COVID-19 deaths over time for multiple countries using a linear y-scale. Each country's time series is drawn as a gray SVG path, and hovering over any point via a Voronoi overlay highlights the selected country’s full trajectory in black with a labeled tooltip showing the country name, death count, and date. The chart uses React with D3 v5 scales (`scaleTime`, `scaleLinear`), the `line` generator, and `d3.Delaunay` for hit-testing. Data comes from the Johns Hopkins COVID-19 global deaths time series.

Jul 7, 2021

Loading thumbnail…

Corona Deaths by Country with Labels

This chart displays cumulative COVID-19 death counts over time for multiple countries, using a log-scaled y-axis to accommodate wide numerical ranges. A Voronoi overlay enables hover interactions, highlighting the nearest data point and its corresponding country’s trajectory with a tooltip. Built with React and D3 v5, it uses `d3.scaleLog`, `d3.line`, and `d3.Delaunay` for geometric hit-testing. Data comes from the Johns Hopkins Coronavirus global time-series dataset, rendered as SVG paths.

Jul 6, 2021

Loading thumbnail…

Fork of Global Coronavirus Deaths

This chart displays the global cumulative death toll from COVID-19 over time, using a line plot that rises sharply as cases escalate. A horizontal marker line highlights the 10,000-death threshold, while a vertical marker at the most recent date labels the final data point. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for axes, `line` for the path, and custom React components for axis and marker rendering. The data comes from a pinned version of the Johns Hopkins Coronavirus dataset, loaded via `d3.csv` and transformed by summing daily death counts across all countries.

Jul 5, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

This visualization displays the global cumulative COVID-19 death toll over time as a single red line chart that fills the entire browser window. The line chart uses D3 v5 scales and the `line` generator, with data fetched from the Johns Hopkins CSSE GitHub repository via `d3.csv`. The React component `LineChart` maps dates to the x-axis and death totals to the y-axis, while the custom `useData` hook transforms the raw CSV by summing daily deaths across all countries. The SVG background is styled red, creating a stark, minimalist presentation of the pandemic's trajectory.

Jul 2, 2021

Loading thumbnail…

Fork latest of Corona Deaths by Country with Voronoi Overlay

This interactive line chart displays cumulative COVID-19 deaths over time for each country, using a logarithmic y-scale from Johns Hopkins data. A Voronoi overlay, computed via d3.Delaunay and rendered as SVG paths, assigns each data point a hover region, so moving the mouse highlights the nearest country’s trajectory in black. The chart is built with React, D3 v5 scales and axes, and renders all countries as thin gray lines.

Jun 29, 2021

Loading thumbnail…

Corona Deaths by Country with Voronoi Overlay

This visualization displays cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis to accommodate wide value ranges. The chart employs React and D3 v5’s `scaleTime`, `scaleLog`, and `line` generator to render each country’s trajectory as a distinct path. A Voronoi overlay, built with `d3-delaunay`, partitions the plotting area into cells around every data point, enabling mouse hover detection to identify the nearest country line. Data comes from the Johns Hopkins COVID-19 time-series dataset, processed via `d3.csv` and `timeParse`. The SVG output includes axes with tick marks and gridlines, styled by custom CSS.

Jun 29, 2021

Loading thumbnail…

Fork of Corona Deaths by Country, Labels

This chart visualizes cumulative COVID-19 deaths over time for multiple countries, with each country's trajectory drawn as a gray line on a logarithmic y-axis. A red Voronoi overlay, generated using `d3-delaunay`'s `Delaunay` class, highlights proximity between data points for potential hover interactions. The visualization uses React, with D3 v5 for scales (time and log), axes, and line generation, and renders to SVG. Data comes from the Johns Hopkins COVID-19 time-series dataset, with the x-axis formatted monthly and y-axis using compact notation.

Jun 27, 2021

Loading thumbnail…

Corona Deaths by Country, Labels

This line chart displays cumulative COVID-19 deaths over time for each country, using a log-scaled y-axis to accommodate wide value ranges. Each country’s time series is rendered as a black SVG path, generated with d3.line, while d3.scaleTime and d3.scaleLog map dates and death totals. The chart is built with React and D3 v5, with axes drawn via d3.axisBottom and d3.axisLeft, using data from the Johns Hopkins Coronavirus dataset.

Jun 19, 2021

Loading thumbnail…

Corona Deaths by Country

This chart displays cumulative COVID-19 deaths over time for multiple countries, with each country represented by a colored line. It uses a logarithmic y-axis to accommodate wide variations in death tolls. The visualization is built with React and D3 v5, employing `d3.scaleTime` and `d3.scaleLog` for axes, and D3’s `line` generator for paths. Data is loaded from the Johns Hopkins CSSE time-series CSV, parsed with `d3.csv` and `d3.timeParse`, then rendered as an SVG with custom axis components.

Jun 18, 2021

Loading thumbnail…

Corona Deaths Live Table

This line chart tracks global cumulative COVID-19 deaths over time, using a log-scaled y-axis to accommodate exponential growth. Data is sourced from the Johns Hopkins COVID-19 dataset via a CSV fetch with `d3.csv`, processed into daily totals, and rendered as an SVG path using `d3.line`, `d3.scaleTime`, and `d3.scaleLog`. React manages the component lifecycle, while `d3.axisBottom` and `d3.axisLeft` generate gridlines and tick labels.

Jun 17, 2021

Loading thumbnail…

Corona Deaths Labels

This example displays a line chart of global cumulative COVID-19 deaths over time, using a logarithmic y-axis to accommodate the data’s exponential growth. The visualization is built with React and D3 v5, rendering an SVG path generated by `d3.line`, with axes created via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from the Johns Hopkins CSSE time-series CSV using `d3.csv`, and dates are parsed with `d3.timeParse`. The chart includes gridlines, axis labels, and a headline, with styling applied through CSS.

Jun 13, 2021

Loading thumbnail…

Corona Deaths Log Y Axis

This line chart displays the total number of COVID-19 deaths over time, using a logarithmic y-axis to better show the exponential growth trend. The visualization pulls data from the Johns Hopkins COVID-19 dataset, which is loaded and transformed in the `useData` hook. The chart is built with React and D3 v5, using D3’s `scaleLog` for the y-axis, `scaleTime` for the x-axis, and the `line` generator for the path. Grid lines are drawn via the D3 axis functions, while the SVG rendering is handled explicitly in the `LineChart` component.

Jun 10, 2021

Loading thumbnail…

Corona Deaths Log Scale

This chart displays the global cumulative number of COVID-19 deaths over time, using a line graph with a linear y-axis. The data is loaded from the Johns Hopkins COVID-19 dataset via `d3.csv`, then transformed by summing daily death totals across all countries. The visualization uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with the line generated by `d3.line`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft` within a React component, output as SVG with gridlines.

Jun 10, 2021

Loading thumbnail…

Second React plus d3 Axes

This example displays a React line chart tracking cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus dataset. The chart renders as an SVG, with the line path generated by `d3.line()` and scales created via `scaleTime()` and `scaleLinear()`. Red marker lines highlight the current date and the three-million-death threshold, with the YMarkerLine and XMarkerLine components positioned using the scales. Axes are drawn with `axisBottom()` and custom React components that leverage `useRef` and `useEffect` to integrate D3 selections into the React lifecycle.

Jun 9, 2021

Loading thumbnail…

React plus d3 Axes

This example plots the global cumulative death toll from COVID-19 over time using a React component. The chart displays a black line on a white background, with red marker lines indicating the current date and the three-million-death threshold, while gridlines and axis labels are styled via CSS. The visualization uses React to manage the SVG rendering, while D3 v5 provides the time and linear scales, axis generation (`axisBottom`), line interpolation, and CSV data loading from the Johns Hopkins University repository, with date parsing and reduction over daily columns.

Jun 9, 2021

Loading thumbnail…

Fork of Corona Deaths Linechart with Marker Line with Margins

This D3.js v5 chart visualizes cumulative global COVID-19 deaths over time, sourced from the CSSE at Johns Hopkins. It renders an SVG line chart in React, featuring red marker lines for a threshold of 3,000,000 deaths and the most recent date. The chart uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `line` function to generate the path.

May 17, 2021

Loading thumbnail…

Corona Deaths Linechart with Marker Line

The chart displays global cumulative COVID-19 deaths over time as a thick black line, with a red horizontal marker line fixed at 3 million deaths. Built using React and D3 v5, it renders an SVG path via `d3.line()` with time and linear scales (`scaleTime`, `scaleLinear`). The line’s y-coordinate is derived from the `deathTotal` field, which sums daily death counts from the JHU CSSE time-series CSV. The marker line’s position is computed using the same y-scale, and both elements are drawn directly in the JSX.

May 17, 2021

Loading thumbnail…

Summarizing Corona Deaths for May 14, 2021

This visualization displays the total number of COVID-19 deaths worldwide as of May 14, 2021, rendered as a single large text statement. It loads the Johns Hopkins University time-series dataset, extracts the most recent date column, and sums all values using `Array.reduce`. The code utilizes the `d3.csv` parsing function and the `d3.format` API to format the large number with commas. The resulting message is displayed inside a `<pre>` element styled with dark red, large-font text.

May 15, 2021

Loading thumbnail…

Corona Deaths for May 14, 2021

This visualization displays basic statistics about the global COVID-19 death dataset from Johns Hopkins University, showing the file size, row count, and column count for the data as of May 14, 2021. Using D3 v5, the program loads the CSV file via `d3.csv` and accesses the parsed data's `.columns` property to determine the number of columns. The code formats the file size using `d3.csvFormat` and calculates the byte length, then displays the three metrics in a large `<pre>` element. This example demonstrates a minimal data-loading and summary-display pattern rather than a graphical chart.

May 15, 2021

Loading thumbnail…

New Corona Data 2021

This example displays a large-format text readout of summary statistics for a CSV dataset of CSS named colors. It reports the file size in kilobytes, the number of rows, and the number of columns parsed from the data source. The implementation uses D3 v5’s `d3.csv` and `d3.csvFormat` to load and measure the data, with an alternative commented-out approach using the Fetch API and `d3.csvParse`. The output is rendered into a `<pre>` element with oversized typography, demonstrating basic data loading and parsing workflows in a React-free HTML page.

May 15, 2021

Loading thumbnail…

Corona Deaths 2021

This example displays metadata about a CSV file containing CSS named colors, showing the file size in kilobytes, the number of rows, and the number of columns in large text. Using d3.csv to load and parse the data, it computes and renders these statistics via the d3.csvFormat function. The code also demonstrates alternative data-loading approaches using fetch, async, and await with d3.csvParse, though the primary method relies on d3’s promise-based CSV loading.

May 15, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading a remote CSV dataset of CSS named colors and displaying a summary of its contents. The visualization uses React state management with the `useState` and `useEffect` hooks to fetch data asynchronously via D3’s `csv` utility, then renders a plain text message showing the file size in kilobytes, row count, and column count. The code relies on React DOM for rendering and D3’s `csvFormat` to calculate data size, with the data sourced from a GitHub Gist.

May 15, 2021

Loading thumbnail…

corona virus linechart

This example displays a single, stark statistic: the total global COVID-19 deaths as of the latest date in the Johns Hopkins time-series dataset. It uses `d3.csv` to load the data, sums the last column of deaths across all countries, and formats the total with `d3.format`. The resulting number and date are rendered in large red text using a `<pre>` element, offering a minimal, data-dense view rather than a traditional line chart.

May 14, 2021

Loading thumbnail…

Loading and Parsing CoVid-19 Data

This example demonstrates loading and parsing the Johns Hopkins COVID-19 deaths dataset with D3 v5. It displays basic statistics about the dataset in a large text element: the file size in kilobytes, the row count, and the number of columns. The code uses `d3.csv()` to fetch the CSV file and then `d3.csvFormat()` to calculate the raw data size. It reports the latest date column by examining `data.columns`, providing a textual summary of the dataset’s structure.

May 11, 2021

Loading thumbnail…

Fork of Nice try

This choropleth map shows the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2017, using data from the Missing Migrants Dataset and the World Atlas TopoJSON. Countries are colored on a sequential yellow-to-red scale based on prevalence values, with missing data shown in light grey. The visualization uses React to render SVG paths via d3.geoPath and d3.geoNaturalEarth1, with d3.scaleSequential and interpolateYlOrRd for color encoding, and d3.geoGraticule for overlay lines.

May 10, 2021

Loading thumbnail…

Nice try

This example visualizes the share of the population infected with HIV for the year 2017 as colored points positioned on a world map, with each point representing a single data event. The map uses a Natural Earth projection rendered as SVG paths, with country boundaries and graticules drawn via `d3.geoPath` and `d3.geoGraticule`. Data from the IHME HIV prevalence CSV is loaded and colored through a sequential YlOrRd scale. The React framework coordinates the loading of World Atlas TopoJSON and CSV data, while D3 v5 handles the geographic projections and scales.

May 10, 2021

Loading thumbnail…

FHIV/Aids Choropleth Map

A choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, with countries colored on a yellow-to-red sequential scale by infection percentage and black for missing data. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries from World Atlas TopoJSON using `d3.geoPath`. Data comes from a CSV of IHME estimates filtered by year. The visualization is built with React, SVG, and D3 v5, applying a `scaleSequential` with `interpolateYlOrRd` for color encoding.

May 9, 2021

Loading thumbnail…

Fork of Missing Migrants Log Scale

This scatter plot visualizes events from the Missing Migrants Dataset, showing reported dates against total dead and missing counts on a logarithmic scale. Each circle represents a single migration incident, with hover tooltips revealing the exact date. The visualization uses React for component structuring and D3 v5 for data loading, time scaling, and logarithmic scaling. SVG rendering displays the marks and custom axes, while the data is fetched via d3.csv from a GitHub gist.

May 9, 2021

Loading thumbnail…

Map and Histogram with Brushing

This interactive visualization combines a world map of bubble markers with a linked time-series histogram, allowing users to brush over a date range to filter the geographic data. It plots migrant deaths and disappearances from a global dataset, with bubble size scaled by the square root of the count using `d3.scaleSqrt`. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world atlas data. Brushing is implemented with `d3.brushX`, and the React components re-render filtered circles accordingly. The histogram is built with `d3.bin` and `d3.timeMonths`.

May 3, 2021

Loading thumbnail…

Map and Histogram

A map and histogram visualize the global distribution and monthly totals of migrant deaths and disappearances. The map uses a natural Earth projection with graticules and country borders, while scaled dark red circles represent the number of dead and missing at each location. The histogram below aggregates these incident counts by month. The visualization is built with React, D3 v5 (including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `scaleTime`, and `bin`), and SVG rendering, pulling data from a CSV of missing migrants and world atlas TopoJSON.

May 1, 2021

Loading thumbnail…

Missing Migrants on a Map

This visualization combines a bubble map and a date histogram to show the global distribution of missing migrants over time. The map uses a natural Earth projection with circles scaled by the square root of the total dead and missing count, while the histogram aggregates deaths by month. Both views are rendered as SVG using React components, with D3 v5 utilities for data loading (d3.csv), geographic paths (d3.geoPath), and histogram binning (d3.bin). Data comes from a CSV of missing migrant incidents.

Apr 19, 2021

Loading thumbnail…

Fork of Working with Time

This visualization is a histogram that aggregates the "Total Dead and Missing" values from the Data Canvas Sense Your City Dataset, grouping the data by month using the `d3.histogram` and `d3.timeMonths` functions. It displays the temporal distribution of the data on a time-scaled x-axis, produced with `d3.scaleTime`, and a linear y-axis representing cumulative monthly counts. The React application uses `d3.csv` to load the data, which is then processed and rendered as SVG rectangles via the `Marks` component. Custom `AxisBottom` and `AxisLeft` components create the chart axes, while the `useData` hook fetches the external CSV, and the code specifies a D3 version 5.11.0 environment.

Apr 18, 2021

Loading thumbnail…

Fork of Working with Time

This visualization plots reported migrant deaths and disappearances over time, with each circle representing an incident and its vertical position encoding the number of dead or missing. The scatterplot is built with React components rendering SVG, while D3 utilities handle data loading via `d3.csv`, scales via `scaleTime` and `scaleLinear`, and axis tick generation. Data comes from a Missing Migrants Project CSV file, with tooltips showing formatted dates.

Apr 17, 2021

Loading thumbnail…

Fork of Working with Time

This visualization shows the total number of dead and missing migrants over time, plotted as a scatter plot. Each circle represents a date with its corresponding casualty count, with tooltips displaying the exact date on hover. The chart uses React components to render SVG elements, with D3 scales (scaleTime and scaleLinear) handling the axes and data mapping. The data comes from the Data Canvas Sense Your City Dataset, loaded via D3’s csv function, and the visualization includes styled tick marks and axis labels for clarity.

Apr 17, 2021

Loading thumbnail…

Fork of Fork of Fork of Temperature in San Francisco Line Chart

This line chart displays temperature in degrees Celsius over one week in San Francisco, with the time axis labeled "Time" and the value axis labeled "Temperature." The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path, styled with a maroon stroke. Data comes from the Data Canvas - Sense Your City dataset, loaded via `csv()`. The SVG output includes grid lines, axis labels, and a title, with all elements scaled for readability.

Apr 17, 2021

Loading thumbnail…

Points on a Map III

This visualization displays world cities as scaled circles on a natural Earth projection, with circle radius proportional to population using a sqrt scale. The map shows graticules, land masses, and country borders, with city points overlaid. Built with React and D3 v5, it uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render geographic features, while d3.csv loads city data and d3.scaleSqrt maps population values to radii.

Apr 16, 2021

Loading thumbnail…

Interactive Color Legend III

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users can switch the X and Y axes via dropdown menus, while a color legend distinguishes the three iris species. Hovering over a legend item fades non-matching points and highlights the selected species. The visualization uses React with D3.js scales (scaleLinear, scaleOrdinal) for positioning and coloring, the react-dropdown library for axis selection, and renders SVG circles with tooltips.

Apr 14, 2021

Loading thumbnail…

Scatterplot with Color Legend II

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the x- and y-axes via dropdown menus. It renders circles colored by species using an ordinal color scale, with a legend in the top-right, and includes an SVG title tooltip on each point. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data, with reusable components for axes, marks, and the legend.

Apr 12, 2021

Loading thumbnail…

Fork of Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to compare different measurements (sepal and petal length and width) by selecting from dropdown menus. React manages the UI state and rendering while D3 utilities (scaleLinear, scaleOrdinal, extent, csv) handle data loading, scales, and axes. Points are colored by species using an ordinal color scale, with native SVG tooltips providing values on hover. The visualization demonstrates a hybrid approach where D3 calculates scales and CSV parsing, while React components render the SVG elements.

Apr 11, 2021

Loading thumbnail…

Polished Scatterplot with Menues

This interactive scatterplot displays the Iris dataset, allowing users to compare any two measured attributes (sepal length/width, petal length/width) or species via two dropdown menus. Built with React and D3 v5, it renders SVG circles with hover tooltips showing the x-axis value. Axes are generated using d3.scaleLinear and custom React components, while the dropdowns use the react-dropdown library, and data loading leverages d3.csv.

Apr 8, 2021

Loading thumbnail…

Scatterplot with Menues III

This interactive scatterplot displays the Iris flower dataset, plotting measurements of sepal and petal dimensions. Users can dynamically select which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React for component state management and rendering, while D3 v5 utilities like `csv` load the data and `scaleLinear` computes the axes. Each data point is rendered as an SVG circle with a tooltip showing its value.

Apr 7, 2021

Loading thumbnail…

Scatter Plot with Menues

This interactive scatter plot visualizes the Iris flower dataset, displaying sepal width against petal length for individual specimens. A dropdown menu allows users to change the x-axis attribute, dynamically updating the visualization. The chart uses React to manage state and render SVG elements, while D3 utilities handle data loading via `csv()` and scales through `scaleLinear()`. Custom React components structure the axes, marks, and menu system.

Apr 6, 2021

Loading thumbnail…

wm III

This example renders a world map using a Natural Earth projection, displaying landmasses, graticules, sphere outline, and country borders as separate SVG paths. The visualization loads country boundaries and land features from a TopoJSON data source, using `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic coordinates, while `d3.geoGraticule` generates the latitude-longitude grid. React manages the component state and rendering, with the map data fetched asynchronously via `d3.json` and processed through the `topojson` library’s `feature` and `mesh` functions.

Mar 16, 2021

Loading thumbnail…

Fork of Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 to load CSV data, apply linear and time scales, render axes, and draw a smooth basis-curve line. SVG is used for rendering, and the chart includes axis labels, grid lines, and a title, with styling applied via CSS.

Mar 9, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map the data, `axisBottom` and `axisLeft` for labeled axes, and a `line` with `curveBasis` to draw the smoothed temperature path. The data, loaded via `csv` from a dataset on Gray Area’s Data Canvas, is rendered as SVG with styled grid lines, axis labels, and a title.

Mar 9, 2021

Loading thumbnail…

Working with Time

This visualization displays temperature readings over a one-week period in San Francisco, using a time-series line chart. The line connects daily data points across a time-based x-axis and a linear temperature y-axis, with styled tick marks and axis labels for readability. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for scaling, while `line` and `curveNatural` draw a smooth path through the data. The CSV data is loaded asynchronously via D3's `csv` utility and rendered as an SVG.

Mar 8, 2021

Loading thumbnail…

Line Chart

This line chart visualizes the relationship between sepal length and petal width from the Iris dataset. The visualization uses React to render SVG elements, with D3.js utilities (scaleLinear, extent, format) handling data scaling and axis generation. The scatter plot encodes each data point as a circle, with tooltips displaying formatted sepal length values. The chart includes custom tick formatting, axis labels, and a clean styling scheme using IBM Plex Sans typography and muted colors.

Mar 7, 2021

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping sepal length on the x-axis and petal width on the y-axis. Each point represents a flower specimen, with a tooltip showing its sepal length value. The visualization is built using React components for rendering SVG elements, while D3 v5 utilities handle data loading via `d3.csv` and scales via `d3.scaleLinear` and `d3.extent`. Custom axis components generate tick marks and labels, and the plot uses a dark red mark color with an IBM Plex Sans font.

Mar 7, 2021

Loading thumbnail…

Stylized Bar Chart II

This example displays population estimates for the world’s twelve most populous countries, with horizontal bars labeled by country name. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering bars as SVG rectangles via a custom `Marks` component. The data is loaded as CSV from a GitHub gist using `d3.csv`, with axis formatting via `d3.format`.

Mar 5, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart presents the 2020 populations of twelve countries from a UN dataset, loading the CSV via D3's `csv` utility and rendering each row as an SVG `rect` with React. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with the custom `AxisBottom`, `AxisLeft`, and `Marks` components generating ticks and bars. D3 v5 handles data loading and scaling, while React 16.9 manages the component-based SVG output, styled with a distinctive font and muted tick colors.

Mar 5, 2021

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the 12 most populous countries using UN population data from 2019. React renders SVG bars, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values. Custom `AxisBottom` and `AxisLeft` components generate tick marks, while `Marks` draws the rectangles. The chart loads CSV data via `d3.csv` and uses React hooks for state management.

Mar 4, 2021

Loading thumbnail…

Axes with react and d3

This example displays a horizontal bar chart of the top 12 countries by population in 2020, with country names on the y-axis and population values on the x-axis. It fetches CSV data from a GitHub URL using `d3.csv` and parses the population column as numbers. The chart renders as an SVG using React components, while D3 utilities `scaleBand` and `scaleLinear` compute the positions and widths of the bars, and `ticks()` generates the axis tick labels. The visualization demonstrates integrating React’s state management with D3’s data manipulation and scaling APIs.

Feb 21, 2021

Loading thumbnail…

The Margin Convention US

This visualization displays the top 12 most populous countries in 2020 using a horizontal bar chart, with each bar representing a country’s population. The bars are rendered as SVG rectangles within a React component, using D3’s `csv` loader to fetch and parse the data, then `scaleBand` and `scaleLinear` to map country names and population values to pixel positions. The chart’s layout includes explicit margins, and the data is sourced from a UN population CSV file hosted on GitHub.

Feb 14, 2021

Loading thumbnail…

Fork of Making a bar chart

This example uses React to render a horizontal bar chart of the 12 most populous countries, based on 2020 UN population estimates loaded from a CSV file with D3’s `csv` function. The chart displays each country’s name on the vertical axis, scaled with `scaleBand`, and its population on the horizontal axis, scaled with `scaleLinear`. SVG `<rect>` elements are generated directly in JSX, with widths computed from the population values. The code also includes a simple loading state and uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching.

Feb 14, 2021

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the 12 most populous countries in 2020, using data from a UN population CSV file. It loads the data with `d3.csv` and renders the bars as SVG rectangles using React. The chart maps country names to the y-axis with `d3.scaleBand` and populations to the x-axis with `d3.scaleLinear`, computing the maximum value with `d3.max` for the domain.

Feb 13, 2021

Loading thumbnail…

Fork of rendering data with react

This example visualizes the CSS named colors as a pie chart, with each slice filled by the color it represents. The code loads color data from a GitHub gist using `d3.csv`, then computes the pie layout with `d3.pie` and renders the arcs via `d3.arc` as SVG paths. React manages the loading state and renders the chart, displaying a loading message until the data arrives.

Jan 30, 2021

Loading thumbnail…

rendering data with react

A React application renders CSS named colors from a CSV dataset loaded with d3.csv. Each color is displayed as a horizontal stripe, with the background color set to the RGB hex value from the data. The app uses React hooks (useState, useEffect) to manage asynchronous data loading and conditional rendering. ReactDOM renders the resulting striped SVG-free layout, with a loading message shown while the data fetches.

Jan 29, 2021

Loading thumbnail…

loading data with

This example demonstrates a minimal data-loading workflow that fetches a CSV file of CSS named colors using `d3.csv` and manages the fetched data with React’s `useState` and `useEffect` hooks. The interface shows only a text summary of the dataset, reporting its approximate size in kilobytes, row count, and column count. The view renders as monospaced text in an SVG-capable React app, transitioning from a “Loading…” placeholder to the finalized statistics once the asynchronous request resolves. The code relies on the `d3.csvFormat` utility to calculate file size and React’s declarative rendering to update the display.

Jan 29, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the population of religions by country using a bubble chart. The data, sourced from a CSV file, is rendered with circles positioned by country and religion, with circle size encoding population. Built with the vega-lite-api, it registers Vega and Vega-Lite, and uses a custom configuration to improve label readability. The chart is rendered as an SVG and includes tooltips for detailed population values.

Jan 27, 2021

Loading thumbnail…

loading data in react

This example demonstrates how to load and parse CSV data in a React application using D3’s built-in `d3.csv` method. It displays a summary of the dataset, including its size in kilobytes, row count, and column count, in a `<pre>` element. The code fetches a remote CSV file of named CSS colors from a GitHub gist, then uses `d3.csvFormat` to calculate the data’s byte size and `data.columns` to determine the number of columns. The visualization highlights asynchronous data loading with promise-based handling in D3 v5.

Jan 25, 2021

Loading thumbnail…

loading and parsing csv data

This example demonstrates the process of loading and parsing a CSV file from a remote URL using D3.js version 5. It displays basic metadata about the fetched dataset: the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv()` to retrieve and parse the data, then `d3.csvFormat()` to calculate its length. The results are rendered as large text inside a `<pre>` element, with the source being a gist-hosted CSV containing CSS named colors.

Jan 25, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

Jan 24, 2021

Loading thumbnail…

Fork of loading data

This example demonstrates a simple D3.js workflow for loading a text message into a web page. It shows how to import the `select` function from D3 and a local ES6 module (`myMessage.js`) that exports a string constant. The code uses `d3.select('#message').text()` to set the content of the specified div element, styled with centered, large text via CSS. The page loads D3 v5 from UNPKG, and the script runs in a bundled `bundle.js` file.

Jan 23, 2021

Loading thumbnail…

Fork of loading data

This example demonstrates how VizHub projects can load external libraries and organize code into reusable modules. It loads D3 v5 from UNPKG and uses the `select` function to target a `div#message` element, setting its text content from a locally imported ES6 module. The `myMessage.js` file exports a simple string, while `styles.css` centers the text in a twelve-em font size. The result is a minimal hello-world that shows D3’s import syntax and local module architecture.

Jan 23, 2021

Loading thumbnail…

loading data

This example demonstrates how to load D3.js from a CDN and use local ES6 modules within a VizHub project. The visualization displays the text "Hello VizHub!" centered in the browser window by utilizing the `d3.select` API to target the `#message` div and set its text content. The code also imports a string from a separate local module, `myMessage.js`, and applies styling from an external `styles.css` file, showcasing a minimal setup for combining external libraries with modular code.

Jan 23, 2021

Loading thumbnail…

mouse follower

A single black circle on an SVG canvas tracks the user's mouse cursor in real time, creating a simple interactive visual. The example demonstrates state management in React, using the `useState` and `useCallback` hooks to update the circle's `cx` and `cy` attributes on every `mousemove` event. Rendered with SVG elements, the circle is positioned via React's `onMouseMove` handler, while D3 v5 and React 16 are loaded externally. No data source is involved; the visualization purely reacts to pointer movement within the 960 by 500 pixel viewport.

Jan 21, 2021

Loading thumbnail…

Fork of Fork of new smiley face part V

A grid of 18 small smiley faces, each generated with randomized facial features, fills the viewport. The faces are constructed from SVG primitives—a yellow circle for the head, two smaller circles for the eyes, and an arc path for the mouth. The React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) compose the face, while the `d3.arc` API sets the mouth’s inner and outer radii and angular range. Random `Math.random` values vary stroke width, eye position, and mouth dimensions for every face.

Jan 17, 2021

Loading thumbnail…

Fork of new smiley face part III

This example builds a smiley face from modular React components rendered as SVG. A yellow background circle with a black stroke is combined with two eyes, positioned using offsets, and a mouth drawn with a D3 arc. The mouth’s shape is generated using the `d3.arc` API, specifying inner and outer radii and start/end angles. The React application uses ReactDOM to render the SVG structure, with all elements grouped and transformed to the canvas center.

Jan 17, 2021

Loading thumbnail…

new smiley face part I

This visualization shows a yellow smiley face centered on an SVG canvas, with two black eyes and a curved mouth formed by a thick arc. The face is drawn using React components that render SVG elements, while the mouth is generated with D3’s `arc()` generator, specifying inner and outer radii and angular start and end points. All shapes are positioned relative to a central transform group, using fixed pixel coordinates derived from the 960x500 viewport. The code relies on React 17, ReactDOM, and D3 v5, with no external data source.

Jan 17, 2021

Loading thumbnail…

Fork of smiley face part I

Built with React and D3 v5, this visualization draws a stylized smiling face using SVG elements. The code defines a yellow circle for the head, two arcs for eyes, and a mouth arc created with the `d3.arc()` API, all positioned within a centered `<g>` transform. The face’s dimensions, including eye offsets and radii, are computed from fixed width and height constants. Rendering occurs by mounting a React component that returns the SVG structure into the DOM via `ReactDOM.render`.

Jan 14, 2021

Loading thumbnail…

Fork of cars scatter plot II

This scatter plot visualizes the relationship between horsepower and acceleration for a dataset of cars sourced from the UCI Machine Learning Repository’s Auto MPG Data Set. Each green, semi-transparent circle represents a car, with its horizontal position determined by horsepower and vertical position by acceleration. The visualization uses D3 v6 APIs including `select`, `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. The SVG rendering includes styled grid lines, axis labels, and a title, with data loaded asynchronously from a CSV file.

Jan 14, 2021

Loading thumbnail…

smiley face part I

A static smiley face rendered in SVG is composed of three circles: a large yellow head with a black stroke, and two small black eyes. The example demonstrates how React, through the `ReactDOM.render` method, mounts a simple header element into the DOM, while the face itself is drawn directly in the HTML using SVG circle elements with fixed coordinates. No interactive behavior or animations are present.

Jan 11, 2021

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars from the UCI Auto MPG dataset, with each circle representing an individual car. Built using D3 v6, the visualization employs scaleLinear for axes, axisBottom and axisLeft for ticks, and SVG circles with a green, semi-transparent fill. The code loads CSV data from a remote URL, parses numeric fields, and renders the chart with labeled axes and a title using D3’s selection and CSV modules.

Jan 8, 2021

Loading thumbnail…

scatter plot

This scatter plot displays the population of the ten most populous countries using data from the 2017 United Nations World Population Prospects. Circles are positioned along the x-axis by population and the y-axis by country name, with a steelblue fill and large labels. The visualization uses D3 v6 scales, including `scaleLinear` and `scalePoint`, with axes generated by `axisBottom` and `axisLeft`. The SVG rendering includes a custom tick format that converts large numbers to abbreviated form using D3’s `format` function.

Jan 6, 2021

Loading thumbnail…

Fork of customizing axes

This bar chart shows the population of the 10 most populous countries using data from the United Nations World Population Prospects 2017. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render SVG bars, with custom tick formatting that converts values into billions. Axes are customized by removing domain lines and adding a red population label and title. The chart employs d3.format for axis labels and sets margins to position the visualization within the SVG.

Jan 6, 2021

Loading thumbnail…

customizing axes

This example displays a horizontal bar chart of the ten most populous countries, based on 2018 data from the United Nations World Population Prospects. Population values are encoded by bar length using d3.scaleLinear, while country names are positioned on a categorical d3.scaleBand axis. The chart customizes its axes by removing default domain lines, applying a custom tick formatter that converts billions to a compact "B" label, and styling tick text and grid lines via CSS. An SVG renderer with D3 v6 handles the layout, including margins and descriptive axis titles.

Jan 5, 2021

Loading thumbnail…

making a bar chart

This bar chart displays the number of incidents across age groups, using data from a local CSV file. The visualization uses D3 v6 to map age categories to a band scale on the y-axis and incident counts to a linear scale on the x-axis, rendering rect elements in SVG. Axes are generated with `axisLeft` and `axisBottom`. The chart presents a clear increase in incidents with age, culminating in the 90+ group.

Dec 18, 2020

Loading thumbnail…

making a bar chart

This example shows horizontal bars representing the populations of the ten most populous countries using a bar chart. The D3 v6 code loads the data from a CSV file, scales the values, and renders the bars as SVG rectangles. It uses `scaleLinear` for the width axis and `scaleBand` for the categorical country names, with margins set via an SVG transform.

Dec 13, 2020

Loading thumbnail…

making a bar chart

This visualization displays population data for the ten most populous countries using a horizontal bar chart encoded as SVG rectangles. The chart uses D3 v6’s `csv` loader to parse data, with population values scaled linearly via `scaleLinear` and country names mapped to bands with `scaleBand`. Axes are generated using `axisLeft`, while margins define the plotting area. The bars’ widths and vertical positions are computed from the scaled domains, and the data is multiplied by 1000 to represent actual population figures.

Dec 12, 2020

Loading thumbnail…

face making with D3.js

A face composed of basic SVG shapes appears on a yellow circle with black outlined strokes, including two circular eyes and an arc-shaped mouth. The code uses D3.js v6 to select the SVG element, append circles with fixed radius and center coordinates, and construct a mouth path using the `d3.arc()` function. The rendering occurs entirely through SVG attributes, with the face centered within a 960 by 500 viewport.

Dec 7, 2020

Loading thumbnail…

shapes with svg

This example demonstrates basic SVG shapes— circles, rectangles, and a group—positioned within a 960×500 canvas. It shows how CSS styling and SVG attributes, such as `fill`, `stroke`, and `stroke-width`, control appearance and how a `transform` attribute translates a group of shapes together. The page is a static HTML document using inline SVG elements, with a minimal external stylesheet.

Dec 7, 2020

Loading thumbnail…

shapes with svg

This example demonstrates basic SVG shapes—circles, rectangles, and a path—rendered on a red background using static markup in index.html. It shows how to apply fill colors, stroke styling, and group transformations using the `<g>` element, with shapes appearing both unstyled and with inline attributes. The code directly embeds SVG elements in HTML and uses a separate styles.css file that imports D3’s `select` function, though no dynamic data or interaction is present. The visualization relies solely on declarative SVG syntax without JavaScript-driven updates.

Dec 7, 2020