radhadevarapu

Fork of ICE8 - Family Tree

This interactive visualization displays a phylogenetic family tree of animal groups, such as Ecdysozoa, Lophophore, and Trochophore, as an animated, zoomable SVG diagram. The code uses the D3.js v3 library, specifically `d3.layout.tree` and `d3.behavior.zoom`, to lay out and manipulate the hierarchical structure. Each node is colored by its type, and the tree is rendered dynamically from a JSON data source. The implementation includes interactive features like clicking nodes to expand or collapse branches, dragging to pan, and mouse-wheel zooming, all built with custom JavaScript functions and CSS styling.

Fork of Japan Country

This interactive map displays a simplified, green-colored rendering of Japan with yellow borders. A slider controls the level of topographic simplification, filtering out smaller details as the threshold increases. Built with D3.js v4 and TopoJSON, the visualization uses a custom `d3.geoTransform` pipeline to convert GeoJSON features into SVG paths. The `presimplify` function and a user-adjustable threshold dynamically alter the geometry’s complexity, with the map redrawing on input or window resize using the `d3.geoPath` projection. Data originates from a remote TopoJSON file hosted on GitHub.

Fork of England Regional Map

This interactive map displays England’s geographical regions, filled in teal with grey boundaries between adjacent areas. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` to render the regions as SVG paths. Data is loaded from a TopoJSON file using `d3.json` and converted to GeoJSON features and mesh lines via `topojson.feature` and `topojson.mesh`. The React app manages state with a custom `useData` hook, and `d3.geoPath` computes the path geometries for rendering.

Fork of Nikita's USA Country Map

This fork of Nikita's USA Country Map displays the geographic boundaries of all 50 US states and their interiors using an SVG rendering with a blue fill and black state borders. The map uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features from TopoJSON data loaded from `us-atlas@3.0.0`. Built with React and D3 v5, it fetches the dataset via `d3.json`, processes it with `feature()` and `mesh()` from TopoJSON, and responds to user interaction by changing a state's fill to purple on hover.

Fork of Social Network Graph

The visualization displays a social network graph where purple nodes represent people, connected by blue arrows indicating friendship relationships. The network uses a force-directed layout powered by d3.forceSimulation, with link forces, charge forces, collision detection, and centering. Nodes are rendered as SVG circles with labels, and can be dragged interactively. Arrow markers are defined in SVG defs, while node highlighting on hover uses CSS classes. The graph loads from a JSON data file containing explicit source and target person names.

Fork of Fork of ICE8 - Social Network Graph

A social network graph of eight people and eleven "Friend with" relationships, with nodes as red circles labeled by name and directed links with arrowheads. The d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter APIs compute node positions, while SVG circles and lines render the result. Hovering highlights a node with a green stroke. Data comes from a static JSON file containing link endpoints and node IDs.

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a force-directed graph, showing friendships between ten people with labeled nodes and directional links. The layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, while nodes are rendered as large cyan circles with SVG text labels. Links are drawn as lines with arrow markers to indicate direction, and nodes are draggable via D3’s drag behavior, with a hover effect that thickens the node border. The code loads data from a JSON file and uses SVG for all rendering.

Fork of World Map with D3.js!

This example renders a static world map using D3.js and TopoJSON. It loads country boundaries from a world-atlas TopoJSON file, converts them to GeoJSON with `feature()`, and draws them as SVG paths with a `geoEquirectangular` projection and `geoPath`. A dark blue sphere background and yellow countries with white strokes are styled via CSS, with a hover effect that highlights each country in bright yellow.

Fork of Nikita's USA Country Map

This fork of Nikita's USA Country Map displays the geographic boundaries of all 50 US states and their interiors using an SVG rendering with a blue fill and black state borders. The map uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features from TopoJSON data loaded from `us-atlas@3.0.0`. Built with React and D3 v5, it fetches the dataset via `d3.json`, processes it with `feature()` and `mesh()` from TopoJSON, and responds to user interaction by changing a state's fill to purple on hover.

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities exceeding 50,000 population and country-level population data. Cities appear as scaled circles based on population, while countries vary in opacity according to their population figures. The map uses React with d3-geo-projection’s `geoNaturalEarth1` projection and `geoPath` for rendering. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population values from a UN 2019 dataset. Additional geographic lines and graticules enhance the map’s spatial context.

Fork of 2015 Internet Users World Map

This world map colors countries by internet users per 100 people in 2015, using a green sequential scale with six bins. Hovering a country reveals its exact percentage in a tooltip, and users can zoom and pan the map via d3.zoom. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world atlas, d3.scaleOrdinal for the legend, and fetches the internet users dataset from a CSV. Data comes from a Kaggle dataset of World Bank indicators.

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities exceeding 50,000 population and country-level population data. Cities appear as scaled circles based on population, while countries vary in opacity according to their population figures. The map uses React with d3-geo-projection’s `geoNaturalEarth1` projection and `geoPath` for rendering. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population values from a UN 2019 dataset. Additional geographic lines and graticules enhance the map’s spatial context.

Mar 25, 2023

Fork of ICE 7 Area Chart

This fork of an ICE 7 area chart visualizes the number of US university students from 2000 to 2008. The SVG graphic combines a black line and a filled aqua area to show the trend over time, with labeled axes for year and student count. The code uses D3 v5 APIs such as `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to generate the chart, and loads the dataset from a CSV file hosted as a GitHub gist.

Fork of ICE 7 Area Chart

This area chart visualizes the sales of cars in India from 2009 to 2019, using a smooth basis curve to show both the line and the shaded area beneath it. The chart is rendered as an SVG using D3 v5, with scales for time and linear values. Data is loaded from a CSV file, and the visualization employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` APIs to construct the plot. The line and area paths are generated with `line` and `area` generators using `curveBasis`.

Fork of Line Chart

This example shows the number of students at a university from 2000 to 2008, plotted as a single red line over time. The chart uses D3 v5 with an SVG rendering approach, applying `scaleTime` for the year-based x-axis and `scaleLinear` for the student-count y-axis. Data is loaded from a remote CSV file. The line is drawn with the `d3.line` generator, while axes are created via `axisBottom` and `axisLeft`, with labels and a title added as text elements.

Fork of US population

This line chart displays US population change over time, with the x-axis representing years and the y-axis showing population values. The visualization uses the d3.csv function to load data from a gist URL, mapping the date and value fields onto the axes. Built with the vega-lite-api library and rendered using vega-lite and vega, the chart applies a custom config to improve readability, including adjusted font sizes and colors, and includes tooltips via the vega-tooltip handler.

Fork of Fork of Line Chart

This visualization shows US auto sales from 2005 to 2022 as a red line chart, plotting the cost on the x-axis and course on the y-axis. Built with D3 v5, it imports the SVG element and renders axes, labels, and the line using the `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` functions. Data is loaded from a CSV file via the `csv` method, then transformed and mapped to the scales for display.

Fork of Line Chart

This example displays a line chart of US auto sales from 2005 to 2022, using applicant income on the x-axis and loan ID on the y-axis, with red strokes marking the trend. Built with D3 v5, the code uses `csv` to load external loan data, `scaleTime` and `scaleLinear` for axes, and `line` to generate the path. The SVG rendering includes labeled axes, a title, and gridlines via `axisLeft` and `axisBottom`.

Fork of Fork of piechart ic7

This visualization displays the cost of different master’s degree majors as a pie chart, with each slice representing a course’s total cost. A legend on the right pairs each colored slice with the course name and its cost in thousands. The chart uses D3 v5’s `pie` and `arc` generators to compute angles and render SVG paths, with `scaleOrdinal` assigning colors to slices. Data is loaded asynchronously from a CSV file via `d3.csv`, and the legend values are formatted using `d3.format`.

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart using D3 v5. The SVG rendering applies a categorical color scale to the pie segments, with each player’s runs determining the arc size. Data is loaded asynchronously from a JSON file via `d3.json`, then processed with `pie` and `arc` generators. A legend is drawn using appended rectangles and text, formatted with `d3.format`, and each player’s name and run total are displayed alongside the chart.

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart using D3 v5. The SVG rendering applies a categorical color scale to the pie segments, with each player’s runs determining the arc size. Data is loaded asynchronously from a JSON file via `d3.json`, then processed with `pie` and `arc` generators. A legend is drawn using appended rectangles and text, formatted with `d3.format`, and each player’s name and run total are displayed alongside the chart.

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart using D3 v5. The SVG rendering applies a categorical color scale to the pie segments, with each player’s runs determining the arc size. Data is loaded asynchronously from a JSON file via `d3.json`, then processed with `pie` and `arc` generators. A legend is drawn using appended rectangles and text, formatted with `d3.format`, and each player’s name and run total are displayed alongside the chart.

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart using D3 v5. The SVG rendering applies a categorical color scale to the pie segments, with each player’s runs determining the arc size. Data is loaded asynchronously from a JSON file via `d3.json`, then processed with `pie` and `arc` generators. A legend is drawn using appended rectangles and text, formatted with `d3.format`, and each player’s name and run total are displayed alongside the chart.

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows a pie chart of the top 10 countries by deaths from air pollution in 2020, with each segment labeled in thousands and accompanied by a color-coded legend listing country names and values. The chart is rendered as an SVG using D3.js v5, with data fetched from a CSV file via `d3.csv`. The pie layout is generated with `d3.pie()`, arcs are drawn using `d3.arc()`, and colors are assigned via `d3.scaleOrdinal`. Text labels and legends are appended directly to the SVG selection.

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by air pollution-related deaths in 2020. The D3 v5 code loads data from a CSV file via `d3.csv`, calculates the total deaths, and renders a pie using `d3.pie` and `d3.arc` with explicit inner and outer radii. Each slice includes a text label, and a legend on the right displays each country’s name and death count. The chart uses `d3.scaleOrdinal` to assign colors from a predefined array, with the SVG canvas sized at 960 by 500 pixels.

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart using D3 v5. The SVG rendering applies a categorical color scale to the pie segments, with each player’s runs determining the arc size. Data is loaded asynchronously from a JSON file via `d3.json`, then processed with `pie` and `arc` generators. A legend is drawn using appended rectangles and text, formatted with `d3.format`, and each player’s name and run total are displayed alongside the chart.

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart of the top 10 countries for deaths in 2020 caused by air pollution, using annual income as the data dimension. The chart renders as SVG through D3 v5, with each slice colored using `d3.scaleOrdinal` and generated via the `d3.arc` and `d3.pie` APIs. A legend on the right maps colors to professions, showing values formatted in thousands. Data is loaded asynchronously from a CSV file using `d3.csv`, and the code includes unused `d3.json` and `d3.forceSimulation` imports, though only pie and arc functions are applied.

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart of the top 10 countries for deaths in 2020 caused by air pollution, using annual income as the data dimension. The chart renders as SVG through D3 v5, with each slice colored using `d3.scaleOrdinal` and generated via the `d3.arc` and `d3.pie` APIs. A legend on the right maps colors to professions, showing values formatted in thousands. Data is loaded asynchronously from a CSV file using `d3.csv`, and the code includes unused `d3.json` and `d3.forceSimulation` imports, though only pie and arc functions are applied.

Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example displays a pie chart of the top 10 countries by air pollution deaths in 2020, with each slice colored and paired with a legend showing the country name and annual income in thousands. The chart uses D3 v5 to load CSV data from a GitHub gist, and employs the `d3.pie` and `d3.arc` functions to generate the SVG paths for the chart and legend items. Colors are assigned sequentially from a hardcoded array using `scaleOrdinal`, and legend values are formatted with `d3.format`.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv`. Each species is encoded by a different symbol from the `symbols` range, generated using `symbolGenerator.type()`. The chart is rendered as SVG, fills the viewport, and includes labeled axes with custom font styling.

Fork of Reusable D3 Scatter Plot with Symbols

This example visualizes the Iris Dataset as a scatter plot, mapping petal width and sepal length. It uses a reusable D3 scatter plot module that applies a linear scale for axes and an ordinal scale to map the three iris species to distinct symbol shapes. The plot draws SVG symbols for each data point and adds left and bottom axes. Data is loaded asynchronously with d3.csv from a remote URL, and the code demonstrates a modular, extensible pattern for building configurable charts.

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries’ 2020 deaths from air pollution using a pie chart, with annual income categories as the slice values. The chart renders colored arcs and a corresponding legend, with each slice’s value displayed in thousands. The code uses d3.csv to load data from a GitHub gist, then d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG pie segments and legend. Text elements are styled with CSS, and the legend pairs colored rectangles with profession names and formatted income values.

Fork of ICE-6: Rendering Marks and Channels with React & D3

A horizontal bar chart shows the basic cost of Netflix in fifteen countries, sorted by country name. The visualization is built with React and D3 v5, using SVG for rendering. Data is loaded from a CSV file via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` position the bars. Axes are drawn manually with tick marks and text elements, and each rectangle's width encodes the cost value.

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows annual income by profession for fifteen job categories using a horizontal bar chart. It renders an SVG with React and D3 v5, sourcing data from a CSV file via `d3.csv`. The chart builds scales with `d3.scaleBand` and `d3.scaleLinear`, and draws grid lines, axis tick labels, and bars for each profession. The code uses React’s `useState` and `useEffect` hooks to load and store the data, then uses `ReactDOM.render` to display the visualization.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart shows the annual income by profession for the first 15 records from a remote CSV file. The visualization is built with React and D3 v5, rendering SVG marks directly. It uses `d3.csv` to load data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and calls `xScale.ticks()` to generate grid lines. The chart is rendered inside a React component via `ReactDOM.render`, with each bar’s width mapped to the `Annualincome` field.

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows annual income by profession for fifteen job categories using a horizontal bar chart. It renders an SVG with React and D3 v5, sourcing data from a CSV file via `d3.csv`. The chart builds scales with `d3.scaleBand` and `d3.scaleLinear`, and draws grid lines, axis tick labels, and bars for each profession. The code uses React’s `useState` and `useEffect` hooks to load and store the data, then uses `ReactDOM.render` to display the visualization.

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows annual income by profession for fifteen job categories using a horizontal bar chart. It renders an SVG with React and D3 v5, sourcing data from a CSV file via `d3.csv`. The chart builds scales with `d3.scaleBand` and `d3.scaleLinear`, and draws grid lines, axis tick labels, and bars for each profession. The code uses React’s `useState` and `useEffect` hooks to load and store the data, then uses `ReactDOM.render` to display the visualization.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart shows the annual income by profession for the first 15 records from a remote CSV file. The visualization is built with React and D3 v5, rendering SVG marks directly. It uses `d3.csv` to load data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and calls `xScale.ticks()` to generate grid lines. The chart is rendered inside a React component via `ReactDOM.render`, with each bar’s width mapped to the `Annualincome` field.

Fork of Nikita's Pie Chart

A pie chart visualizes movie review ratings from a CSV dataset loaded via a Gist URL, with each slice colored and labeled by movie title alongside a legend showing its numeric rating. Built with D3 v5, the code uses `d3.csv` to fetch data, `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` for color assignment. The SVG renders centered slices and a legend with rectangles and text, formatted using `d3.format`.

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot displays the relationship between flipper length and body mass, with each point colored by species (Adelie, Gentoo, or other) and using bill length and bill depth as additional radius attributes. The visualization uses D3 v5 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circle positions, while the `csv` loader parses the penguin dataset from a GitHub gist. The chart renders circles with `fill` based on species and includes custom axis labels styled in cursive.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every two seconds. Rendered as an animated SVG, it uses `d3.csv` to load data and a custom `scatterPlot` function with `scaleLinear`, `axisLeft`, and `axisBottom` to draw points and axes. The code demonstrates a reusable chart pattern by exposing setter methods like `width` and `xValue`, allowing dynamic reconfiguration without redrawing the entire visualization.

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, illustrating the relationship between sepal length and petal length, with each of the three flower species distinguished by color. The visualization includes labeled axes for the measurements and a color legend identifying the species. Built with D3.js version 7, the example uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` from the `d3-scale-chromatic` library to map data to positions and colors. The axes and legend are constructed programmatically using the `axisLeft` and `axisBottom` functions, while data is loaded asynchronously from a CSV file.

Fork of Scatter Plot

This example plots sepal length against petal length for the Iris Dataset, with each flower represented as a circle. The visualization demonstrates a reusable scatter plot module composed with custom axis and labeling functions. It uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins via `selectAll` and `join`. The code loads the CSV data with `fetch` and `csvParse`, then renders the plot across the full browser window, coloring points by species.

Penguin Data set scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length with points colored by species using a color legend. The code uses D3 v5 with d3.scaleLinear for positioning, d3.scaleOrdinal with schemeCategory10 for species colors, and d3.csvParse to load the CSV data. Axes and labels are rendered via d3.axisLeft and d3.axisBottom, while the legend is built with custom selection joins and circle elements.

Fork of Penguin Data set scatter Plot

This scatter plot displays penguin measurements, mapping flipper length against body mass for individual penguins. The visualization uses color-coded circles to differentiate three penguin species: Adelie (yellow), Gentoo (green), and Chinstrap (brown). Built with D3 v5, the code loads CSV data from a GitHub gist, uses `d3.csv` for parsing, `d3.scaleLinear` and `d3.extent` for scaling axes, and renders SVG circles with `d3.select` and `.join`. Axis labels and a title are added using SVG text elements.

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes annual income by profession for the first 15 records of a CSV dataset, rendering a horizontal bar chart in SVG. It combines React with D3 v5, using `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and manually drawing tick marks and grid lines via JSX mapped over scale domains. React state and hooks manage the asynchronous data loading, while bar rectangles are sized and positioned directly with scale outputs.

Fork of Penguin Data set scatter Plot

This fork of a Palmer Penguins scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each species represented by a distinct color. The code loads CSV data, parses numeric fields, and maps values through linear scales to position circles in an SVG. It uses D3 v5 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with axis labels and a title rendered as text elements.

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length and body mass as the primary x and y axes while encoding bill length and bill depth into circle radii. Data is loaded from a CSV file and parsed using d3.csv, with scales created via d3.scaleLinear and axes rendered using d3.axisLeft and d3.axisBottom. Each point’s color indicates species (yellow for Adelie, green for Gentoo, brown for others), and the SVG circles are joined to data using d3’s selectAll and join pattern. The rendering uses d3.v5 within a React-free plain HTML document.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart shows the annual income by profession for the first 15 records from a remote CSV file. The visualization is built with React and D3 v5, rendering SVG marks directly. It uses `d3.csv` to load data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and calls `xScale.ticks()` to generate grid lines. The chart is rendered inside a React component via `ReactDOM.render`, with each bar’s width mapped to the `Annualincome` field.

Mar 7, 2023

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations World Population Prospects estimates. The chart plots countries along the y-axis and population counts along the x-axis, using a linear scale for population and a band scale for countries. Built with D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and a custom tick formatter that converts numbers to abbreviated units like "B" for billions. The SVG rendering includes gridlines, axis labels, and a title, with styling applied via CSS classes.

Mar 6, 2023

Fork of ICE5

This example displays metadata about a credit card customer dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a preformatted text block. The visualization fetches a remote CSV file using the `d3.csv` API, then calculates and formats the metadata with `Math.round` and `d3.csvFormat`. The page is styled with CSS, including a credit card SVG background image, and uses D3.js v7 within a basic HTML structure. The dataset is linked for reference, and the computed information is presented as plain text in a centered `<pre>` element.

ICE5

This example displays the metadata of a university dataset loaded from a CSV file. Using D3 v7, the code fetches the data with `d3.csv` and computes the file size in kilobytes via `d3.csvFormat`, along with the number of rows and columns. The resulting information is rendered as plain text in a `<pre>` element, while a CSS background image of a credit card and a green accent color style the page. The visualization shows a minimal, text-based summary rather than a graphical chart.

Fork of Hello VizHub

This example demonstrates a minimal D3.js application that sets the text content of an HTML element to display “Hello VizHub!”. It loads D3 v5 from a CDN via UNPKG and uses the `d3.select` API to target a div with the ID `message`, setting its text through the `.text()` method. The code also showcases ES6 module imports, both from the D3 library and from a local module called `myMessage.js`, which exports the message string. The styling is applied through an external CSS file.

Fork of D3 Starter

This example demonstrates the simplest possible D3 version 7 program: it selects the document’s `<body>` element and replaces its content with the text “Hello D3 version 7.” Rendered at a font size of 13 em, the message fills the screen. The code uses the `d3.select` API to query the DOM and the text method to set the content, with a single `index.js` file plus an HTML shell.

Fork of ICE5

This example displays metadata about a university dataset, showing the file size, row count, and column count on a webpage. The visualization uses a custom CSS background image and presents the statistics in a large, bold text format. It loads the data from a CSV file using D3 v7, specifically the `d3.csv` and `d3.csvFormat` API functions to fetch and calculate the byte size, then updates the DOM via `getElementById` and `textContent`. The page also includes a link to view the raw dataset source.

ICES

This page displays summary information about a dataset of universities, showing metadata such as dataset size, row count, and column count. The code loads a CSV file from a GitHub gist using `d3.csv`, then computes the file size from the formatted CSV string and displays the statistics in a `<pre>` element. The page uses D3 v7 and includes minimal CSS styling with a blue background and an image.

Fork of ICE5

This example displays metadata about a credit card customer dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a preformatted text block. The visualization fetches a remote CSV file using the `d3.csv` API, then calculates and formats the metadata with `Math.round` and `d3.csvFormat`. The page is styled with CSS, including a credit card SVG background image, and uses D3.js v7 within a basic HTML structure. The dataset is linked for reference, and the computed information is presented as plain text in a centered `<pre>` element.

Untitled

This example displays metadata about a credit-related university dataset, including file size, row count, and column count, in a plain text container. It loads CSV data from a GitHub gist using D3 v7’s `d3.csv` method, then computes and formats the metadata with `Math.round`, `d3.csvFormat`, and string concatenation before inserting it into the page via `document.getElementById`. The page also applies simple CSS styling, such as a blue background and lightblue bold text, with buttons given rounded corners.

Feb 28, 2023

Fork of Cat smiley

A stylized cat smiley face rendered with SVG paths and shapes, using D3 v7's arc generator to construct precise arc-based features. The visualization combines circles for the face and eyes, ellipses for the nose, and multiple colored lines for whiskers, while arc paths create the mouth, ears, and eyebrow-like accents. Built with React 17 and D3's `arc()` API, the SVG elements are positioned using transforms and coordinate offsets within a 960x500 viewport. The face’s yellow circle, black strokes, and red mouth follow a playful, cartoon-like aesthetic.

Fork of Fork of Let's Make a Face Part I

This example shows a stylized cartoon face built from separate React components for the background circle, eyes, mouth, and teeth. The face is centered on an SVG canvas with a gradient fill, using d3.arc to create the curved mouth and teeth shapes. The code uses React 18 and d3.v7 to compose reusable components like FaceContainer, BackgroundCircle, Eyes, Mouth, and Teeth, passing props for dimensions and offsets. The teeth include straight vertical lines to suggest individual teeth within the arc.

Fork of Smiley Face Part III

This example builds a stylized smiley face using React and D3 v5, rendering entirely as SVG elements. The face is composed of arcs and circles for the eyes, pupils, mouth, and hair, with eyebrows and other features rotated and translated via SVG group transforms. D3’s `arc` generator defines the mouth and eyebrow paths, while React manages the component structure and props. The layout is hardcoded with fixed coordinates, and the rendering is purely visual, with no data-driven input.

Fork of Fork of homework smiley face

This example renders a cheerful smiley face as an SVG graphic using React and D3 v7. The visualization shows a yellow circular head with detailed features, including eyes, eyebrows, a mouth, tongue, ears, and decorative lines, all composed from basic SVG shapes. The code employs D3’s `arc` generator to create the mouth, tongue, and eye-arc paths, while circles, ellipses, and lines are drawn directly. A video tutorial is embedded in the README, explaining the construction process.

Fork of Fork of Fork of Smiley Face Part III

A stylized smiley face built with React and D3 v5, rendered as an SVG. The face uses D3’s `arc` generator to create the mouth and eyebrows, which are rotated and translated via SVG transforms. Eyes, pupils, a triangular nose, and hair-like strokes are drawn as basic SVG shapes. Redundant arcs outline the mouth, and the right eyebrow includes a blue fill with a red stroke. All geometry is computed from fixed dimensions in JavaScript, with no external data source.

Fork of Fork of Smiley Face Part III

This example presents a stylized smiley face constructed with React and D3 v5, rendered as a scalable vector graphic (SVG). The face features custom details including rotated and translated eyebrows and mouth arcs generated with `d3.arc`, along with eyes, pupils, a purple nose, and hair strands. The code demonstrates how React manages SVG elements while D3 provides geometry for complex shapes, with transformations applied via standard SVG attributes.

Fork of Smiley Face Part III

This fork of the Smiley Face Part III example renders a stylized face using React and D3 v5 in an SVG. The code explicitly constructs facial features with D3’s `arc` generator for the mouth and eyebrows, applying rotations and translations via SVG transforms. It layers circles for eyes and pupils, a custom path for the nose, and additional paths for hair. The face uses yellow, purple, blue, and green fills with black outlines, all positioned around a 960×500 viewport.

Fork of Let's make a face with D3.js!

This fork animates a D3.js smiley face by moving its eyebrows up and down in a repeating sequence. The code demonstrates fundamental DOM manipulation, building the face with SVG shapes including a blue circle head, two eyes, eyebrow rectangles, and an arc-generated mouth. The animation uses D3’s `transition().duration()` chained calls to shift the eyebrows’ transform attribute between two vertical positions over two-second intervals. The example uses d3-selection and d3-shape APIs, with the SVG appended to a 960×500 canvas and coordinates centered via a translation.

Fork of Smiley Face Part III

This fork of a Smiley Face example builds a cartoon face from layered SVG shapes within a React component. It shows a yellow circular head with distinct eyes, pupils, a nose, hair, and a mouth, all created using primitive SVG elements like circles and paths. The code leverages React for structure and D3’s `arc` generator (from `d3-shape`) to draw the mouth and eyebrow arcs. It applies explicit transforms—such as rotations and translations—to position the brows and mouth, and uses varied fill colors and stroke styles to add detail.

Fork of Fork of Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows up and down. The example demonstrates DOM manipulation with D3.js v5, using `d3.select` to target the SVG element and appending circles, rectangles, and a path for the mouth. Eyebrow movement is achieved with chained `transition().duration(2000)` calls that alternate the `transform` attribute, while the mouth uses the `d3.arc` generator to define its curved shape. The face is centered via a `g` element with a translated transform.

Feb 20, 2023

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js. The code builds the face using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path created with d3.arc for the mouth. Eyebrows move up and down through chained transition.attr calls, each lasting two seconds. The example uses d3.select and d3.arc from D3 v5, with the entire scene rendered as static SVG elements on a 960×500 canvas.

Feb 20, 2023

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows animate upward and downward. The SVG face is constructed from circles, rectangles, and an arc path, using D3 selections to append elements and set attributes. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, translating the eyebrow group along the Y-axis. The code leverages D3 v5 modules like `select` and `arc`, with inline SVG coordinates defining the face’s layout.

Feb 18, 2023