N

Nikithakatta30

@Nikithakatta30·72 public vizzes

Loading thumbnail…

Fork of Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the rate of depression across all ages and selected well-being indicators from the World Happiness Report. Users can switch between economy, social support, generosity, freedom, and perception of corruption using a dropdown menu, which updates the y-axis and its label. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` and `extent` to compute scales, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG axes and circles. Point positions are set via `cx`/`cy` attributes, with tooltips formatted using D3’s `format`.

Loading thumbnail…

Fork of Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the Happiness Score and five selectable y-axis attributes (Economy, Social Support, Generosity, Freedom, and Perception of Corruption) using the Iris Dataset. A dropdown menu updates the y-axis scale and label dynamically, with circles rendered via React and SVG. The visualization uses d3.scaleLinear for axes, d3.csv for data loading, and d3.format for tick labels, all coordinated through React state to trigger re-renders.

Loading thumbnail…

Scatter Plot of Happiness and Y axis attributes

This scatter plot visualizes the relationship between happiness scores and several country-level attributes, including economy, social support, generosity, freedom, and perceived corruption, using data from the World Happiness Report. An interactive dropdown menu allows the viewer to switch the y-axis attribute, updating the visualization dynamically. The plot is rendered as an SVG using React and D3 v5, with `d3.scaleLinear` handling axis scaling and `d3.extent` and `d3.format` for domain and tick formatting. Axis components and data marks (circles) are implemented as reusable React components, with tooltips showing the happiness score on hover.

Loading thumbnail…

Fork of Viz_3

This bar chart displays the top 10 countries with the highest depression rates (all ages) for the year 2019, using data from a CSV file filtered and sorted within the React app. It renders with SVG via D3 v5 and React, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Horizontal bars show the percentage values, with axes generated by custom `AxisBottom` and `AxisLeft` components. The chart is rendered using ReactDOM, and hover tooltips are provided via SVG `<title>` elements.

Loading thumbnail…

Fork of Fork of Making A Bar Chart

This example displays a horizontal bar chart of country populations, with China and India leading and the remaining countries descending in size. The chart uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate axes. Rectangles are appended to an SVG and sized proportionally to population values, which are multiplied by 1000. The visualization is rendered entirely in SVG with a steelblue fill.

Loading thumbnail…

Fork of Green house gas bar chart

This example displays a horizontal bar chart of greenhouse gas emissions for the top 11 GDP countries in 2019, using data from a CSV file loaded via d3.csv. The chart maps emission values to bar widths with d3.scaleLinear and country names to y-axis positions with d3.scaleBand, rendering in SVG. Interactive tooltips appear on mouseover, showing the emission value in MtCO₂e, while bars darken on hover. The visualization uses d3.axisLeft and d3.axisBottom for axes and is built with React and D3 v7.

Loading thumbnail…

Fork of Version two: Top Athletes

This bar chart displays the top 40 Olympic athletes ranked by total medal count, with each bar color-coded by medal type. Hovering reveals a tooltip with athlete name, country, year, event, and medal. The visualization is built using vega-lite-api with d3.csv for data loading, aggregating athlete totals, and filtering the dataset. The underlying data comes from a Kaggle Olympic Games dataset, and the chart uses Vega-Lite's markBar and count aggregations with a custom tooltip handler.

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization uses a horizontal bar chart to display the top 10 most populous countries, sourced from United Nations World Population Prospects 2019 data. The React-based implementation leverages d3.scaleBand, d3.scaleLinear, and d3.format to render SVG rectangles, with population values formatted in billions. Axis components are custom-built using d3 scale ticks, and hovering over a bar reveals its precise value via a native `<title>` tooltip. The chart includes labeled axes and uses a Poppins font styling throughout.

Loading thumbnail…

Happiness and Depression rates with color legend

This scatter plot visualizes the relationship between Happiness Scores and depression rates across all ages, with points colored by year and a color legend that supports interactive filtering. Hovering over a legend year highlights only the corresponding data points and fades the rest. The visualization uses React components for rendering SVG elements, with D3 scales like `scaleLinear` and `scaleOrdinal` to map data to positions and colors. Data is loaded via D3’s `csv` from a GitHub gist, and axes are built using custom React components.

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot displays country-level well-being indicators, with happiness score on the x-axis and a selectable y-axis metric (economy, social support, generosity, freedom, or corruption). Each circle represents a country, with an HTML `<title>` tooltip showing its exact happiness score. The React-based visualization uses D3 v5 scales (`scaleLinear`), axes (`AxisBottom`, `AxisLeft`), and CSV data loading (`d3.csv`) from a GitHub gist. Users switch the y-axis via a dropdown, triggering React state updates that re-render the SVG marks.

Loading thumbnail…

Untitled

This interactive bar chart compares depression rates across the top 10 happiest countries for a selected year. A dropdown menu, populated from the data’s unique years, triggers a redraw. The chart uses d3.csv to load the dataset, d3.scaleBand and d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft for rendering. Bars are colored with a fixed teal fill, and country labels are rotated. The visualization updates dynamically by clearing the SVG and re-rendering for the chosen year.

Loading thumbnail…

Untitled

This interactive scatter plot visualizes the relationship between "Menus" (a perceived social metric) and depression levels across different regions and years, using data loaded via `d3.csv`. The visualization compares various quantitative attributes—Freedom, Corruption, Generosity, and Health—against the "Allages" depression score, with data points colored by year. Users select a specific region and X-axis attribute through dropdown menus, which triggers an `update` function to filter the dataset, rescale the linear axes via `d3.scaleLinear`, and redraw the circles. The code uses D3 v6 APIs for SVG rendering, axis generation (`d3.axisBottom`, `d3.axisLeft`), and categorical color assignment (`d3.scaleOrdinal`).

Loading thumbnail…

Depression vs Happiness

This visualization plots depression rates against happiness scores for different countries, with each circle representing a country and its position determined by those two metrics. A dropdown menu allows viewers to select a specific year, triggering a smooth transition of the data points. The chart uses D3 v6’s scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and SVG circles, with an animated `transition` to update positions when the year changes. Data is loaded from a CSV file via `d3.csv`.

Loading thumbnail…

Count of countries based on each region and year

This visualization shows the count of rocket launches aggregated by country region across years, using a grouped bar chart where each bar’s length represents the total number of rockets and its color distinguishes the region. The chart is built with the Vega-Lite API (`vl.markBar()`, `vl.x()`, `vl.y()`, `vl.color()`), applying a transform that groups data by both year and region before counting occurrences. The data is loaded via `d3.csv()` from a GitHub-hosted CSV file sourced from Kaggle, and the rendering uses Vega’s SVG output with custom tooltips and axis styling from the provided configuration.

Loading thumbnail…

Untitled

This interactive scatterplot explores the relationship between a selectable metric (Freedom, Corruption, Generosity, or Health) and depression rates across all ages, filtered by world region. Colored dots represent different years, with tooltips revealing exact values. The visualization uses D3 v6 to load CSV data via `d3.csvParse`, render SVG elements, and update scales, axes, and circles dynamically through dropdown selectors.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in very large type. The rendering uses an HTML `<div>` element styled with CSS `font-size` and `text-align` properties. The page’s content is static, with no JavaScript logic or data processing beyond the markup and inline styles defined in `index.html`.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup by rendering the text “Hello D3 version 7” in the center of the page. It uses `d3.select` to target the `<body>` element and calls the `.text()` method to insert the string directly into the HTML. The page loads the D3 library from a CDN and applies a large font size via inline CSS. The example serves as a basic starting point for understanding how to begin a D3 project.

Loading thumbnail…

Untitled

A scatterplot maps each country's Happiness Score against a depression metric, with points colored by region and an interactive dropdown to toggle between the age20_40 and allages depression values. Built with d3.v6 and SVG, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color, and `d3.axisBottom`/`d3.axisLeft` for ticks. Data comes from the Kaggle "One Small Step for Data" dataset on world happiness.

Loading thumbnail…

Line Graph

This example visualizes car sales data from 2013–2021 as a grid of colored rectangles, mapping years to the x-axis and countries to the y-axis, with fill intensity reflecting Happiness_Score. Using D3 v5, it employs `scaleBand` for both axes, `scaleLinear` with an `interpolateRgb`-based range for color encoding, and `axisTop`/`axisLeft` to render axes without tick lines. The chart loads a CSV from a GitHub gist, parses years as dates and scores as numbers, and renders SVG rectangles with a steelblue-to-lightgray color gradient. The code highlights D3’s modular imports (`select`, `csv`, `scaleBand`, `scaleLinear`) and SVG rendering for a heatmap-style matrix.

Loading thumbnail…

Untitled

This interactive scatterplot compares a selected social indicator against age-standardized depression rates across countries, with each circle representing a year's data for a chosen region. Users can switch the x-axis between Freedom, Corruption, Generosity, and Health, and filter by geographic region via dropdown menus. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles, with a color-coded legend distinguishing years. Data comes from the `data.csv` file, and the title suggests a thematic focus on societal factors versus depression.

Loading thumbnail…

Untitled

This example displays a choropleth world map colored by the reported happiness score from a CSV dataset covering over 80 countries. The visualization loads world topography via TopoJSON, joins it with the tabular data, and maps each country’s score to a sequential blue color scale using `d3.scaleSequential` and `d3.interpolateBlues`. It renders the geographic boundaries as SVG paths through `d3.geoPath` with a Mercator projection. The underlying libraries are D3 v6 and the world-atlas TopoJSON collection.

Loading thumbnail…

Fork of Fork of Melting Data for Multiple Lines

This line chart displays depression rates by region over time, using temperature data from the Data Canvas - Sense Your City project. The visualization renders SVG paths with d3.line and curveBasis for smooth curves, while d3.scaleTime and d3.scaleLinear handle the axes. Colors are assigned via d3.scaleOrdinal with schemeCategory10, and a custom colorLegend component shows the region key. Data is loaded through React’s useEffect hook and processed with d3.csv.

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization displays population trends by region over time from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. Multiple lines represent different countries, colored via a categorical scale and sorted by their final population values. The chart is built with D3 v5, using `scaleTime` and `scaleLinear` for axes, a `line` generator with `curveBasis` for smooth paths, and `nest` to reshape the melted data. A custom legend and axis labels complement the SVG rendering.

Loading thumbnail…

Fork of Fork of Chart redesign

This chart visualizes daily humidity data as a smooth, curved line over time, with seasonal background bands and mean lines for each season. It uses D3.js v5 within a React framework, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a basis curve for rendering. The data is loaded from a GitHub-hosted JSON file, downsampled before plotting. The SVG output includes a linear gradient defs, season-specific rectangles, and small circular dots for each data point, with a custom CSS-styled y-axis.

Loading thumbnail…

Fork of Chart redesign

This visualization displays daily humidity data from a weather dataset as a time-series line chart, with semi-transparent colored regions highlighting Winter and Summer seasons and gray lines marking seasonal means. The chart sorts data chronologically, downsamples points for the line, and renders individual data points as small circles. Built with D3 v5 in a React framework, it uses `d3.json` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, a custom `downsampleData` function, and SVG rendering with gradient definitions and area generators.

Loading thumbnail…

Fork of Total Number of Rockets Throughout The Years

This bar chart visualizes the total number of rockets launched each year, with bars colored by the company’s country of origin. It aggregates the dataset from Kaggle’s “One Small Step for Data” using a groupby on year and country, counting records per group. The visualization is built with Vega-Lite API v4 and D3 v5, rendering via SVG and custom configuration for axis styling. Tooltips display the count and country for each bar.

Loading thumbnail…

Fork of Fork of ILINet Flu Surveillance Data

This chart displays annual U.S. influenza-like illness (ILI) total cases from 2015 to 2019, using an ordered color encoding where darker lines represent more recent years, making year-over-year comparisons easier. The visualization is built with the vega-lite-api and rendered using vega and vega-lite, with data loaded via d3.csv from a Gist derived from CDC FluView Interactive. The line chart encodes year as color and tooltips show the year, while axes are customized for readability. The author notes that 2018 peaked highest in mid-February, while 2019 had a more extended flu season.

Loading thumbnail…

Fork of Chart

This interactive dashboard visualizes reported crime cases against women across Indian states and union territories, using a choropleth map alongside two donut charts that break down crime types and yearly totals. The main map updates via drop-down menus for year and crime category, while the donut charts independently filter by year or crime type. The visualization is built with d3.v7, using topojson for geographical boundaries, with animated transitions for donut chart updates. The underlying dataset provides state-level crime statistics from 2001 onward.

Loading thumbnail…

Fork of ILINet Flu Surveillance Data

This visualization shows annual ILI flu case totals in the United States as a line chart, with years from 2015 to 2019 encoded by color so darker indicates more recent years. The chart reveals patterns such as 2018 having peak cases in mid-February, while 2019 has a more extended flu season. It uses vega-lite-api with vega-lite and vega, loading CSV data from a Gist that originates from the CDC FluView Interactive. The rendering applies a custom config for axis styling and tooltip handling via vega-tooltip.

Loading thumbnail…

Fork of Fork of D3.js Line Chart

This visualization displays the number of customers per year from 2000 to 2010 using a line chart. The chart encodes years on the x-axis and customer counts on the y-axis, with a thick steelblue line tracing the trend. Built with D3 v7, the code leverages `d3.csv` to parse the data, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the numeric y-axis. The line itself is drawn using `d3.line` within an SVG path, while axes are generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of D3.js Line Chart

This visualization presents a line chart of customer counts from 2000 to 2010, using data loaded from a CSV file. The chart uses an SVG rendering with D3.js v7, employing `d3.scaleBand` for the x-axis (year) and `d3.scaleLinear` for the y-axis (customers). A `d3.line` path generates the line, with axes created via `d3.axisBottom` and `d3.axisLeft`. The example demonstrates a fork of a basic D3 line chart, initially inspired by reusable charts, though the code here is a straightforward implementation with labeled axes.

Loading thumbnail…

Fork of D3.js Line Chart

This chart shows the trend of Happiness Scores for China, India, and Japan over five years, drawing on data from the World Happiness Report. A single line is rendered using an SVG path generated by the D3.js `d3.line` function. The x-axis uses an ordinal scale (`d3.scaleBand`), while the y-axis is a linear scale (`d3.scaleLinear`); both axes are created with `d3.axisBottom` and `d3.axisLeft`. The visualization aggregates the data to show the overall score trajectory, though it does not distinguish between the three countries in its line presentation.

Loading thumbnail…

Fork of 2015 Internet Users World Map

This map visualizes internet usage rates per country for 2015, with countries colored on a green scale based on the percentage of internet users. It includes a color legend, hover tooltips showing exact rates, and zoom functionality that scales the map view. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render the world atlas from TopoJSON, while d3.zoom enables the interactive zooming. Data comes from the Kaggle Internet Users Dataset, processed through D3’s csv parsing and categorical color scaling with d3.schemeGreens.

Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

A scatterplot of NOAA monthly summaries from 1946-2020 lets users compare temperature and wind metrics between SFO and Oceanside stations. A dropdown menu switches the y-axis attribute among yearly options, while an interactive legend filters circles by station through mouse hover, dimming non-selected points. Built with React and D3 v6, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, rendering SVG circles with tooltips showing formatted values.

Loading thumbnail…

Fork of Making A Bar Chart

A horizontal bar chart displays Economy values for China, India, and Japan across multiple years from a CSV file. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for categorical y-axis country labels, and d3.axisLeft/d3.axisBottom to render axes. SVG rectangles are appended and scaled based on the economy metric. The data is transformed by multiplying Economy values by 1000 before rendering.

Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays the population of ten countries, using horizontal bars where length corresponds to population size. Built with D3 v7, the visualization loads data from a CSV file and scales the population values by a thousand. The code employs d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and renders the chart as SVG with steelblue rectangles.

Loading thumbnail…

Bar Chart

This bar chart displays the top 5 countries with the highest Covid-19 happiness scores, ranked along the vertical axis with horizontal bars extending proportionally to each score. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with React components rendering SVG elements. Data is loaded asynchronously from a CSV file using d3.csv, with the dataset displayed coming from a gist about Covid-19 impact. Tooltips are implemented using SVG `<title>` elements showing formatted values, while axes and labels are styled via CSS.

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 countries by Happiness Score from the World Happiness Report data, sorted in descending order before rendering. The chart uses a linear scale for the x-axis (Happiness Score) and a band scale for the y-axis (Country names), with bars filled in steelblue. The code leverages D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load and process the data, while React handles the component structure. The y-axis labels are cleaned by removing gridlines and domain paths, and the x-axis is labeled “Happiness Score.”

Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays Happiness_Score values for countries from a CSV dataset, using horizontal bars with a linear x-scale and banded y-scale. It shows one bar per country, with the bar length encoding the happiness score. The visualization is rendered as SVG using D3 v7, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles. The code loads data via `d3.csv` and applies a margin-based layout within a fixed 960×500 viewport.

Loading thumbnail…

Small Multiple Plots with D3.js

This visualization displays small multiple scatter plots, each representing a country's happiness score against its economy, with points colored by region. The plots are generated from a CSV file using D3 version 6's `d3.csv` fetch method, with scales created via `d3.scaleLinear` and `d3.scaleOrdinal` using the `schemeCategory10` color palette. Each SVG is built with D3's selection API, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The title for each plot combines the ageStandard and Allages fields.

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the relationship between Happiness Score and ageStandard, with each point colored by country. The visualization uses React with SVG rendering, employing d3’s scaleLinear for axes, scaleOrdinal for categorical color mapping, and format for tick labels. Data is loaded from a CSV via d3.csv and parsed with numeric coercion. Hovering over a circle reveals a tooltip showing the happiness score.

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows interactive selection of which measurement attributes (sepal length, sepal width, petal length, petal width, or species) appear on the X and Y axes via dropdown menus. The visualization is rendered as an SVG using React, with D3.js v5 functions like `csv` for data loading and `scaleLinear` for axis scales. Two dropdown components update the selected attributes, triggering re-renders of the axes and circles.

Loading thumbnail…

Fork of Choropleth map with D3.js!

This choropleth map colors countries by income group using a categorical color scale from `scaleOrdinal` and `schemeSpectral`. The visualization loads world geometry from TopoJSON via `world-atlas` and joins it with tab-separated metadata, then renders paths with `geoPath` and a `geoNaturalEarth1` projection. The map supports zooming through `d3.zoom`, highlights countries on hover via CSS, and includes a custom color legend built with SVG circles and text.

Loading thumbnail…

Fork of D3 Scatter Plot Matrix multiple colors

This visualization presents a 4x4 scatter plot matrix comparing seven numeric fields from a happiness dataset, with each point colored by country using the d3.schemeSet1 categorical palette. The code loads CSV data via d3.csv, parses numeric columns, and iterates through all variable pairs to generate individual SVG charts using d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Titles appear only on diagonal cells, while off-diagonal plots show pairwise correlations, and the full window is divided into equal quadrants with hidden scrollbars for seamless viewing.

Loading thumbnail…

Untitled

This scatter plot displays the relationship between a country's Happiness Score and its rate of depressive disorders, with each point's size representing population and color encoding geographic region. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.scaleOrdinal for the categorical color mapping. SVG circles are positioned via the xScale and yScale functions, with axis labels and tick marks generated using d3.axisBottom and d3.axisLeft within a React-rendered SVG container.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

Loading thumbnail…

Fork of Line Chart 2

This chart shows the change in Italy’s FIFA ranking over time as a smooth, curving line plot. The visualization uses React to render SVG elements and D3 v5 scales, including `scaleTime` for the date axis and `scaleLinear` for the ranking axis. The data is loaded from a CSV file via D3’s `csv()` method and parsed into date and numeric values. The line itself is drawn using D3’s `line()` generator with a `curveNatural` interpolation, while custom React components handle the axis ticks and labels.

Loading thumbnail…

geo_1

A world map displays country boundaries and graticules, rendered with a natural Earth projection from d3-geo. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to draw landmasses, interior boundaries, and the globe’s sphere, with data sourced from the World Atlas TopoJSON. React manages the component state, loading the topology via d3.json and converting it with topojson’s feature and mesh functions. Polished styling includes teal landmasses, light gray graticules, and a subtle sphere background.

Loading thumbnail…

Viz_9

This interactive scatter plot displays FIFA player statistics across six national teams (ARG, BRA, ESP, FRA, GER, ITA), letting users compare any two attributes via dropdown menus. The visualization uses React with D3 v5 scales (d3.scaleLinear) to map data to SVG circles, with tooltips showing x-values. Data loads from a CSV via d3.csv. Users can dynamically switch axes, and the plot renders with custom axis components and formatted tick labels using d3.format.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which measurements (sepal length, sepal width, petal length, petal width, species) appear on the x- and y-axes via dropdown menus. The visualization is rendered as SVG using React, with D3.js (d3.v5) handling data loading via `csv`, linear scaling via `scaleLinear`, and axis tick generation. Each data point is drawn as a circle whose position and hover tooltip are determined by the selected attributes.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in very large type. The rendering uses an HTML `<div>` element styled with CSS `font-size` and `text-align` properties. The page’s content is static, with no JavaScript logic or data processing beyond the markup and inline styles defined in `index.html`.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in a large, 13-em font. It demonstrates the core building blocks of a static web page, combining semantic markup with CSS styling and a minimal JavaScript-free approach. The code uses an HTML `<div>` element, inline CSS rules for font sizing and alignment, and inherits the document’s default rendering behavior. It serves as a bare-bones starter template, unlike the more complex React-based implementation it references.

Loading thumbnail…

Viz_3

This bar chart displays the top five most populated countries using data from a Pollution 2019 dataset, with country names on the y-axis and population counts on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles via the `Marks` component. Axes are drawn with custom `AxisBottom` and `AxisLeft` components, while population values are formatted using D3’s `format` function to abbreviate large numbers in billions.

Loading thumbnail…

Pie chart

This visualization is a pie chart that displays the distribution of CSS color names, with each slice colored according to its corresponding RGB hex value from the source data. The chart is rendered as an SVG within a React application, using D3.js v5 for data loading and pie chart geometry. The code fetches color data from a GitHub-hosted CSV file via `d3.csv`, computes the pie slices with `d3.pie`, and draws them using `d3.arc` with an outer radius of half the chart height. Each slice is a `<path>` element filled with the exact hex color it represents.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis for each flower specimen. Rendered as SVG circles with fixed radius, the chart uses D3’s `scaleLinear` functions for both axes, with axis ticks generated by custom React components. The code leverages React hooks (`useState`, `useEffect`, `useCallback`) to asynchronously load the CSV data via D3’s `csv` method, parsing numeric fields before display. Axis labels and tick formatting are applied through D3’s `format` utility, with tooltips provided by SVG `<title>` elements.

Loading thumbnail…

Fork of Fork of Simley Face

A smiling face rendered in yellow SVG circles uses React components to compose its features. The face builds from separate files for the background circle, eyes, mouth, and nose, all positioned within an SVG group translated to the center. D3's arc generator creates the mouth as a curved path, while the surrounding React and D3 libraries manage the component hierarchy and geometry. The static smiley demonstrates modular React composition with D3 for path generation.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays football player statistics across six attributes (ARG, BRA, ESP, FRA, GER, ITA) from a FIFA dataset. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with react state managing the selection. The code uses d3.scaleLinear for scales, d3.extent for domains, and d3.csv to load data, rendering circles as SVG marks with tooltips via the title element. Axis components generate ticks with tick formatting using d3.format.

Loading thumbnail…

Line Chart 2

A line chart tracks the ITA metric over time for a Fifa dataset, with a date-based x-axis and a linear y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data, while the `line()` generator with `curveNatural` smooths the path. Axes are rendered as SVG groups with tick marks and labels, and the data loads asynchronously via `csv` from a GitHub gist.

Loading thumbnail…

Scatter Plot 2

A scatter plot displays the relationship between confirmed and active COVID-19 cases, with each circle representing a data point. The visualization uses React components to render SVG elements, with d3.scaleLinear managing the x and y scales. Axes are generated from array methods like xScale.ticks() and map(), while the data loads through d3.csv with multiplication applied to numeric values. The chart includes axis labels and tooltips showing formatted values using d3.format with SI notation.

Loading thumbnail…

Bar chart

This bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Using React with hooks and D3 v5, it renders SVG rectangles scaled by population via `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes axis tick labels for both scales, though the bars themselves appear without a title or legend.

Loading thumbnail…

Bar Chart

This example displays the top 12 most populous countries as horizontal bars, sized by their 2020 population estimates from the United Nations World Population Prospects 2019. The visualization omits axes, showing only the raw rectangles. Built with React and D3 v5, it uses `d3.csv` to load the data, `scaleBand` for the y-axis positioning, and `scaleLinear` for the x-axis bar lengths, rendering the output as SVG.

Loading thumbnail…

Pie chart

A pie chart displays the distribution of CSS named colors, with each slice colored according to its corresponding hex value. The visualization loads a CSV dataset using `d3.csv` and computes the pie layout with `d3.pie`, assigning each record an equal value. React renders the resulting arcs as SVG paths using `d3.arc`, positioned at the center of a 960×500 viewport. The chart uses D3 v5 and React 16.9, with all slices sharing a common radius and no inner gap.

Loading thumbnail…

Loading data with react and d3

This example demonstrates how React state manages asynchronous data loading with D3. It fetches a CSV file of CSS color names from a GitHub gist using the `csv` function from d3.v5, then displays a summary of the dataset’s size, row count, and column count. The `useState` and `useEffect` hooks handle the data lifecycle, while a separate `message.js` module formats the output using `d3.csvFormat`. The interface simply renders the resulting text summary inside a `<pre>` block.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 in a React framework. It displays a summary of the CSS Named Colors dataset, showing the file size in kilobytes, row count, and column count. The code uses the `d3.csv` method to fetch and parse the data asynchronously, then formats the results with `d3.csvFormat`. It also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. The visualization is text-based, updating a HTML `<pre>` element with the computed statistics.

Loading thumbnail…

data_1

This example displays a text summary of a dataset loaded from a remote CSV file, showing its size in kilobytes, row count, and column count in large monospaced text. It fetches the data from a GitHub gist using `d3.csv`, then formats the data back to a string with `d3.csvFormat` to calculate its length. The resulting message is rendered into a `pre` element via standard DOM manipulation, with D3 v7 handling the asynchronous data loading.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a 960 by 500 pixel SVG canvas, updating its position in real time as the pointer moves. The visualization is built with React (using the `useState` hook) and renders the circle via an SVG `<circle>` element. Mouse movement is captured through the SVG's `onMouseMove` event handler, which updates the circle's `cx` and `cy` coordinates. The example uses D3.js v7 and ReactDOM to render directly into the page's root element, with no external data source.

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse a CSV file from a remote URL using the native Fetch API. It defines an asynchronous function that fetches the text content of a gist-hosted CSV file containing CSS color data, then logs the raw parsed text to the browser console. The code shows a straightforward pattern for retrieving external tabular data without additional libraries, relying solely on modern JavaScript promises and async/await syntax.

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map visualizes World Bank GDP per capita (PPP, current international dollars) for 2020 across countries. The map uses a natural Earth projection with a graticule and country outlines, coloring each nation on a quantile-based YlGnBu color scale from d3.scaleQuantile and d3.schemeYlGnBu, with missing data rendered in gray. It loads country geometries via topojson-client from a 110m atlas, fetches the CSV dataset, and renders the choropleth using d3.geoPath from the d3 library.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in a large, 13-em font. It demonstrates the core building blocks of a static web page, combining semantic markup with CSS styling and a minimal JavaScript-free approach. The code uses an HTML `<div>` element, inline CSS rules for font sizing and alignment, and inherits the document’s default rendering behavior. It serves as a bare-bones starter template, unlike the more complex React-based implementation it references.

Loading thumbnail…

Fork of Fork of Simley Face

A smiling face rendered in yellow SVG circles uses React components to compose its features. The face builds from separate files for the background circle, eyes, mouth, and nose, all positioned within an SVG group translated to the center. D3's arc generator creates the mouth as a curved path, while the surrounding React and D3 libraries manage the component hierarchy and geometry. The static smiley demonstrates modular React composition with D3 for path generation.

Loading thumbnail…

Fork of Simley Face

This example shows a simple, stylized smiley face rendered as an SVG. The face is composed of separate React components for the background circle, eyes, nose, and mouth, all positioned within a central group. The mouth is drawn using the d3 arc generator, while the other facial features are plain SVG circles. The code uses React 18 and d3.v5 to structure and render the static, yellow face on a black-outlined background.

Loading thumbnail…

Simley Face

A smiling face built from geometric primitives is drawn with React components and rendered as SVG. The face uses a yellow background circle, two eyes, a nose, and a mouth, all positioned relative to a central point. The mouth is generated using the d3 `arc` function with inner and outer radii. All shapes are composed within a React component hierarchy, with fixed numeric dimensions passed as props from the main `App` component.