TrustPaul

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

This example creates a yellow smiley face by drawing circles with D3.js onto an SVG canvas. The face features two black eyes and a mouth formed using D3's `arc` shape generator, which defines the path as a semi-circular stroke. It demonstrates fundamental DOM manipulation by selecting the SVG element with `d3.select` and appending shapes with chained `.attr` methods. The code also uses a `g` group element with a translate transform to position the facial features relative to the canvas center.

May 9, 2021

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

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face consists of a large yellow circle for the head and two smaller black circles for eyes, all positioned using D3’s `select` and `append` methods with explicit `attr` calls for coordinates and styling. The code imports only `select` from D3’s module API, computes dimensions from the SVG element, and hardcodes eye spacing and offsets. No interactive or animated behavior is present, focusing purely on static shape construction.

May 9, 2021

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

This fork of Mike Bostock’s D3.js face tutorial demonstrates basic SVG construction and animation by building a smiley face with moving eyebrows. The code selects an empty `svg` element and applies a red background via `svg.style`. It relies on vanilla D3 v5 methods, including `select` and likely `append` and `transition` to manipulate shapes, though only the initial selection is visible in the provided snippet. The example uses SVG markup inside a 960×500 viewport, with styles defined in a separate CSS file.

May 9, 2021

Bowl of Fruit

A bowl of fruit is represented by two red circles, initially displayed as apples. The visualization demonstrates D3's data join pattern: circles are appended to an SVG based on an array of fruit objects, then one fruit is removed from the data after a one-second timeout, causing the corresponding circle to exit. The code uses d3.select, selection.data, selection.enter, and selection.exit to manage the dynamic update, with the fruit data defined via an ES6 module that creates apple objects.

Dec 8, 2020

Scatter Plot with Menus

This scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, letting users choose which numeric columns to plot on each axis via dropdown menus. The visualization animates the transition of circles to their new positions over two seconds when a menu selection changes. Built with D3 v5, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module to render the SVG and animate the points.

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned by two user-selectable axes. Dropdown menus let the user choose which data columns map to the X and Y coordinates, triggering a re-render of the visualization. Built with D3 v5, the implementation uses d3.scaleLinear for axis scaling, d3.axisLeft and d3.axisBottom for gridlines, and d3.transition to animate points when data changes. SVG output renders red semi-transparent circles with labeled axes.

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let viewers choose which car attributes map to the X and Y axes, with all columns available as options. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and animates circle positions with a staggered `transition().duration(2000)` when selections change. SVG rendering displays red semi-transparent circles, with axis labels updating dynamically to reflect the selected columns.

Stylized Scatter Plot

A stylized scatter plot of the Iris Dataset shows the relationship between petal length and sepal width for individual flowers. The visualization uses React to render SVG circles as data marks with a Poppins font and muted color palette. The code leverages the d3.csv function for data loading and cleaning, along with d3.scaleLinear for axis scaling and d3.format for tick label formatting. Axis components are custom React components that generate tick marks and labels, while tooltip titles display formatted values on hover.

Stylized Scatter Plot

A stylized scatter plot of the Iris Dataset shows the relationship between petal length and sepal width for individual flowers. The visualization uses React to render SVG circles as data marks with a Poppins font and muted color palette. The code leverages the d3.csv function for data loading and cleaning, along with d3.scaleLinear for axis scaling and d3.format for tick label formatting. Axis components are custom React components that generate tick marks and labels, while tooltip titles display formatted values on hover.

Menus with React

This example demonstrates a simple interactive menu built with React, showing how a dropdown selection updates a displayed value. It uses the `Dropdown` component, which renders a `<select>` element and calls `onSelectedValueChange` on user input. The page includes a static label and an initial dropdown with options for Dog, Cat, and Rat, styled with large fonts. The code relies on React 16.9 and ReactDOM, with the HTML structure defined in `index.html` and logic in `index.js`, though the visible behavior is limited to the static markup and component definition.

Menus with React

This example demonstrates a simple pet-selection menu built with React. A dropdown control lets a user choose from six pet names, and the app displays the current selection in the browser console. The visualization uses React’s `useState` hook to manage the selected value, and a reusable `Dropdown` component renders the native `<select>` element and its `<option>` entries based on an array of name–label pairs. The interface is styled with regular CSS, and the rendered HTML is injected into a `#root` div using `ReactDOM.render`.

Working with Time

This example visualizes weekly temperature data from San Francisco using a scatter plot, where each point represents a temperature reading plotted against time. The visualization leverages React for component structure and d3.csv for data loading and parsing. Axes are rendered using custom React components that utilize d3 scale functions for positioning, with interactive tooltips displaying timestamp information via the SVG title element. The code demonstrates integration between React’s declarative rendering and D3’s data manipulation capabilities.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates custom D3 axis styling, including formatted tick labels that convert billions to "B" and faint grid lines. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.axisLeft` and `d3.axisBottom` to render axes. A click handler on the body re-renders the visualization.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes by removing the y-axis domain and tick lines, adding an x-axis label, and formatting tick labels with `d3.format` to abbreviate numbers (e.g., converting G to B). The chart uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and renders with SVG. Data is loaded from a CSV file, with populations multiplied by 1000 to reflect actual values.

HTML Starter

This example renders a set of rectangular bars using D3 v6, with each bar’s height mapped from a hardcoded numeric array. The SVG canvas is set to 500 by 500 pixels, and the D3 selection’s `.data()` and `.enter()` methods create rectangles positioned along the x-axis at 0, with y-coordinates calculated as the height subtracted from a fixed value. The page also demonstrates basic HTML/CSS structure and logs a message to the browser console, illustrating a minimal setup for data-driven graphics in a React-free environment.

face making with D3.js

This example creates a simple cartoon face using D3.js version 6 within an SVG canvas. It draws a yellow circle for the head, two black circles for the eyes, and a semicircular mouth using the `d3.arc` path generator. The code uses `d3.select` to target the SVG element, then appends shapes with attributes for position, radius, and fill color, with the mouth path defined by inner and outer radii plus a start and end angle.

Guidance for Multi-Type Entity

This interactive visualization maps multi-type entity relationships, showing how domains, IPs, certificates, and WHOIS records interconnect. Users can select a source node from a dropdown to highlight its network neighborhood, with edge thickness and node size reflecting relationship importance and degree. The graph is rendered as SVG with animated transitions, using D3’s force simulation for layout and a custom color legend for filtering. Data comes from CSV files, with Dijkstra’s algorithm computing distances from the selected node to prioritize relevant connections. The implementation leverages React with d3.v5, including `forceSimulation`, `scaleOrdinal`, and zoom/pan interactions.

Working with Time

A scatter plot displays San Francisco temperature readings over one week, with time on the x-axis and temperature on the y-axis. Each point represents a measurement, and hovering reveals the exact day via a tooltip. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculation, and d3.csv for loading the Data Canvas Sense Your City dataset. Custom axis components generate ticks and labels, while circular marks encode the data points.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders an SVG with horizontal bars, a linear x-scale for population values, and a band scale for country categories. The visualization includes custom-styled axes in muted colors, tooltips formatted with D3’s `format` API, and uses React components for axes and marks.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders an SVG with horizontal bars, a linear x-scale for population values, and a band scale for country categories. The visualization includes custom-styled axes in muted colors, tooltips formatted with D3’s `format` API, and uses React components for axes and marks.

Stylized Scatter Plot

A stylized scatter plot of the Iris Dataset shows the relationship between petal length and sepal width for individual flowers. The visualization uses React to render SVG circles as data marks with a Poppins font and muted color palette. The code leverages the d3.csv function for data loading and cleaning, along with d3.scaleLinear for axis scaling and d3.format for tick label formatting. Axis components are custom React components that generate tick marks and labels, while tooltip titles display formatted values on hover.

Let's make a map with D3.js!

This example displays a world map using a blue sphere background and light green country polygons, with a thin black stroke outlining each nation. It loads geographic boundaries from the World Atlas TopoJSON dataset and renders them as SVG paths via `d3.geoPath` with the `d3.geoAlbersUsa` projection. The code uses `topojson.feature` to convert TopoJSON geometry into GeoJSON features. A video link in the README suggests the visualization accompanies a tutorial on creating maps with D3.

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It draws country boundaries as SVG paths projected with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map loads geographic data from the world-atlas countries-110m JSON file, converts TopoJSON to GeoJSON with the `feature` function, and appends each country path to the SVG. The visualization demonstrates a basic choropleth-free mapping workflow with styled countries and a blue sphere background.

Pathetic Bar Chart

This example shows the top 10 most populous countries as horizontal bars, with no axes or labels, making the chart deliberately bare and difficult to interpret. The bars are rendered as SVG rectangles inside a React component, using the `useState` and `useEffect` hooks to load and manage data. It fetches population data from the United Nations World Population Prospects 2019 via `d3.csv`, then uses `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the x-axis scaling, with `d3.max` to determine the domain. The chart intentionally omits axes, ticks, and labels, leaving only colored rectangles of varying widths.

Pathetic Bar Chart

A pathetic bar chart displays the top 10 most populous countries with horizontal rectangles and no axes, lacking any scale or labels. Built with React and D3 v5, it uses `d3.csv` to load United Nations World Population Prospects 2019 data, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The SVG renders each bar without axes, making the chart intentionally minimal. An external `bundle.js` contains the React code, which iterates over the data to draw the rectangles.

Pathetic Bar Chart

This example displays the top 10 most populous countries as a pathetic bar chart with no axes, using React to render SVG rectangles. The chart lacks scales for axes but uses `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for horizontal bar widths based on population values. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The bars are drawn with React components, and the visualization updates once the CSV data is fetched and sorted by descending population.

Rendering Data with React & D3

A radial burst visualization displays CSS named colors, encoded as colored arcs arranged around a central point using D3's `arc` and `pie` generators. The example loads color data via `d3.csv` and renders it as SVG paths within a React component. It demonstrates integrating React's state management with D3's data manipulation utilities, where React handles DOM updates while D3 computes the geometric layout. The code also includes a commented alternative for manually calculating arc start and end angles without the pie generator.

Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, rendered as SVG rectangles sized by population from the United Nations World Population Prospects 2019. The React app loads the CSV data using d3.csv, sorts by the 2020 population estimate, and scales the bars with d3.scaleBand for vertical positioning and d3.scaleLinear for width. The bars fill the entire viewport, emphasizing the pathetic lack of any chart furniture, and the code uses React hooks like useState and useEffect to manage the asynchronous data loading.

Loading Data with React & D3

A React app fetches CSS named colors from a GitHub-hosted CSV file using d3.csv, then stores the parsed data in React state. While loading, a large “Loading…” message appears via a `<pre>` element. Once the data arrives, the app renders an SVG canvas of 400 by 600 pixels, though the code snippet is incomplete and does not display a chart. The example demonstrates asynchronous data loading with D3 v5 utilities and React’s `useEffect` and query-based conditional rendering.

Rendering Data with React & D3

A radial burst of concentric, color-coded arcs shows the full CSS named color palette, with each arc segment representing a single color from the dataset. The visualization loads the `cssNamedColors.csv` file using D3's `csv` utility and arranges the segments with D3's `pie` layout function, while React handles the SVG rendering of each `<path>` element. The arcs are drawn using D3's `arc` function with inner and outer radii, with each segment's fill color directly referencing the `RGB hex value` from the data.

Loading Data with React & D3

This example demonstrates loading CSS named color data from a remote CSV file using D3’s `csv` utility, then rendering each color as a horizontal stripe via React state and the `useEffect` hook. The app displays a temporary “Loading…” message until the data arrives, after which it maps the rows to colored divs. It uses React 16.9 and D3 v5, with the data sourced from a gist by Curran.

Loading Data with React & D3

This example demonstrates how to load and display a summary of CSS named colors data using React and D3. The app fetches a CSV file from a GitHub gist using the `d3.csv` function, then stores the result in React state with the `useState` and `useEffect` hooks. While loading, it displays a simple "Loading..." message, and once the data arrives, it renders the file size, row count, and column count using the imported `message` utility. The visualization highlights the integration of D3’s data-loading capabilities with React’s component-based state management.

Rendering Data with React & D3

A radial burst of concentric, color-coded arcs shows the full CSS named color palette, with each arc segment representing a single color from the dataset. The visualization loads the `cssNamedColors.csv` file using D3's `csv` utility and arranges the segments with D3's `pie` layout function, while React handles the SVG rendering of each `<path>` element. The arcs are drawn using D3's `arc` function with inner and outer radii, with each segment's fill color directly referencing the `RGB hex value` from the data.

Let's make a face with D3.js!

This interactive face visualization uses D3.js version 6 and React to render a single yellow circle that follows the mouse cursor. The SVG canvas is 500 by 500 pixels, and the app tracks mouse movement through a handler that updates the circle’s coordinates using React state. The code imports `select` and `arc` from D3 but only applies the circle element here. It displays real-time position logging to the console, demonstrating a basic interactive pattern with SVG rendering.

Nov 25, 2020

Smiley Face Part I

This example renders a static smiley face using SVG primitives within a React 17 application. It shows a large yellow circle with a black stroke as the face, two smaller filled circles as eyes, and no mouth, created directly in the markup. The visualization uses SVG elements like `circle` for shapes and relies on the UMD build of React for setup, though no React-specific features are demonstrated. The drawing is hard-coded at 960 by 500 pixels with CSS hiding page overflow.

Nov 25, 2020

HTML Starter

This example shows a minimal HTML page displaying the static text “Hello HTML” alongside a JavaScript console message. It demonstrates the foundational web technologies of CSS for styling the body’s font size and alignment, and JavaScript for logging output. The rendering approach is a plain DOM element styled with inline CSS, with no external data or visualization libraries. The code includes a script tag that calls `console.log` to output “Hello JavaScript!” to the browser’s developer tools, illustrating the basic integration of markup, style, and script.

Nov 25, 2020

Smily Face

A smiling face rendered with React and D3, composed of SVG circles and an arc path. The yellow face, outlined in black, has two dark eyes and a curved mouth created using the `arc()` generator from D3. The `BackgroundCircle` React component draws the face and stroke, while the mouth uses `startAngle` and `endAngle` to form a half-circle. The visualization is centered with a group translation, and all shapes are positioned relative to the canvas center.

HTML Starter

This example shows a minimal HTML page displaying the static text “Hello HTML” alongside a JavaScript console message. It demonstrates the foundational web technologies of CSS for styling the body’s font size and alignment, and JavaScript for logging output. The rendering approach is a plain DOM element styled with inline CSS, with no external data or visualization libraries. The code includes a script tag that calls `console.log` to output “Hello JavaScript!” to the browser’s developer tools, illustrating the basic integration of markup, style, and script.

HTML Starter

This example demonstrates a minimal setup for rendering an SVG circle using React and D3.js, with all styling defined in CSS within an HTML page. It shows a single circle positioned at a fixed coordinate inside a 500x500 SVG container, rendered by the ReactDOM `render` method. The code combines a React component definition in `index.js` with a static HTML file that loads React, ReactDOM, and D3 v6 from CDNs. The circle’s appearance is determined by default SVG styling, and the example serves as a bare-bones foundation for interactive visualization projects.

HTML Starter

This example demonstrates a minimal React and D3 visualization, rendering a yellow circle with a black outline and a single arc path positioned at the center of an SVG canvas. The code imports React, ReactDOM, and the `arc` function from D3, using it to create a quarter-circle path with inner and outer radii. The SVG is sized 960 by 500 pixels, with the circle and arc drawn via JSX elements and a `d3.arc()` generator. The visualization relies on React for DOM rendering and D3 v6 for geometric path computations.

Make a face with D3.js!

This example shows a stylized yellow face built with SVG elements, including eyes, eyebrows, and a smile, which animate by moving the eyebrows up and down. The face is constructed using D3.js v6 selections to append circles, rectangles, and an arc-generated path for the mouth. The code uses `d3.select`, `d3.arc`, and `.transition().duration()` to create the two-second eyebrow movement loop. A separate text input and button trigger a JavaScript alert, though the face animation runs independently of that interaction.

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” centered at a very large font size. The page uses plain HTML, CSS for styling, and JavaScript to log “Hello JavaScript!” to the browser console. It demonstrates the foundational structure of a web page without any external libraries, serving as a starting point for more complex visualizations.

HTML Starter

This example demonstrates a minimal React application that renders a single yellow circle with a black border on an SVG canvas. The circle is centered within a 960 by 500 pixel viewport using hardcoded coordinates. The code imports React and ReactDOM, defines a functional component that returns SVG markup, and mounts it to the root DOM element using `ReactDOM.render`. It loads React and ReactDOM from CDN UMD builds, with the component code transpiled into `bundle.js`.

Nov 21, 2020

HTML Starter

This example demonstrates a minimal HTML page that renders a simple SVG face using basic shapes—a yellow circle with black outlines for the head and eyes. It shows how to use CSS to reset page margins and hide overflow, ensuring the graphic occupies the full viewport. The code uses plain HTML, CSS, and JavaScript-free SVG elements, directly embedding a `<svg>` tag with two `<circle>` elements. This serves as a bare-bones starting point for more complex web visualizations, with no external libraries or data sources involved.

Nov 21, 2020

HTML Starter

This example shows a minimal HTML page displaying the static text “Hello HTML” alongside a JavaScript console message. It demonstrates the foundational web technologies of CSS for styling the body’s font size and alignment, and JavaScript for logging output. The rendering approach is a plain DOM element styled with inline CSS, with no external data or visualization libraries. The code includes a script tag that calls `console.log` to output “Hello JavaScript!” to the browser’s developer tools, illustrating the basic integration of markup, style, and script.

Nov 21, 2020

Boul Fruit

This example displays five red apple shapes as circles arranged horizontally across an SVG canvas. The visualization uses D3.js v6 APIs including `select`, `arc`, and `range` to generate and bind fruit data objects, then appends SVG circle elements with attributes for positioning, fill color, and radius. The code demonstrates a simple data-driven approach where an array of fruit objects is mapped to visual elements, with the final fruit removed from the array before rendering. The SVG dimensions are read dynamically from the DOM attributes, and the styling is handled via an external CSS file.

Let's make face with d3

A yellow circle with eyes, eyebrows, and a smile forms a face using D3.js selections and SVG shapes. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls, demonstrating declarative sequencing. Code uses `select`, `attr`, and `arc` from D3 v6 within a React project, parsing the SVG’s width and height attributes to center the face. The mouth is drawn with an `arc()` path generator, and all elements are grouped with `translate` transforms for relative positioning.

World Population Area Chart

This area chart visualizes world population growth from 1800 to 2015, with the x-axis mapping years and the y-axis showing population in billions. The smooth curve, generated using D3 v6’s `area()` generator with `curveBasis`, fills the space beneath the line in steelblue with a red stroke. Data is loaded from a CSV file via `d3.csv`, and both axes use `scaleTime` and `scaleLinear` with `axisLeft` and `axisBottom` for ticks and gridlines. The SVG rendering includes axis labels and a title, with tick formatting converting large numbers to abbreviated "B" values.

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses a smooth area chart with a maroon fill and stroke, plotting temperature against time. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to render the SVG. Data is loaded via `csv` from a remote file, with timestamps parsed as `Date` objects and temperatures converted to numeric values.

Scatter Plot cars

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle represents a car, with position determined by d3.scaleLinear scales mapping acceleration to the x-axis and weight to the y-axis. The visualization uses d3.csv to load data, d3.axisBottom and d3.axisLeft for labeled axes with grid lines, and renders all elements as SVG via d3.select. Axis labels and a title are added as text elements, with styling applied through external CSS.

Nov 19, 2020

Customizing Axes

This example shows a horizontal dot plot of the world’s ten most populous countries, with each country represented by a circle positioned along a linear population axis. The y-axis uses a point scale for country names, while the x-axis is customized with tick formatting that converts large numbers into abbreviated “B” for billions. Built with D3 v6, the code uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, and removes default domain lines to streamline the chart’s appearance. Data is loaded from a CSV file and rendered as SVG circles.

Nov 19, 2020

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with a custom x-axis that formats large population numbers using abbreviations (e.g., “B” for billions) and removes the default domain line. The y-axis also hides its axis line and tick marks, leaving only country labels. Built with D3 v6, it uses `scaleLinear` for the population range, `scalePoint` for categorical countries, and custom `axisBottom` and `axisLeft` tick formatting. Data comes from a CSV file, and the chart is rendered as SVG with styled tick text and a title.

Nov 19, 2020

HTML Starter

This example demonstrates the minimum requirements for an HTML page that integrates CSS for styling and JavaScript for basic interactivity. The page uses a `style` block to center the body text and set an extremely large font size, while inline `script` tags execute simple JavaScript commands. It includes a generic function definition and logs a message to the browser’s developer console, relying on the standard JavaScript `console.log` API. The example serves as a foundational template for building more complex visualizations without external libraries.

Nov 18, 2020

HTML Starter

This example shows a bare minimum HTML page that renders the text “Hello HTML” at a massive scale using CSS. It demonstrates how to combine HTML, CSS, and JavaScript in a single file, with the script logging “Hello JavaScript!” to the browser’s console. No external libraries or data are used; the page relies solely on standard DOM elements and the `console.log` API for interactivity.

HTML Starter

This example displays a blank, centered page with the body text set to an extremely large font size. It uses a minimal HTML structure with inline CSS styling to control layout and typography. The code loads no external libraries or data, and the included `data.csv` file is not referenced or processed. The page serves as a bare starter template for future visualization work, with an empty script tag ready for custom JavaScript.

HTML Starter

This example demonstrates a bare minimum HTML page that integrates CSS and JavaScript, serving as a foundational template for web-based visualizations. The page uses plain HTML elements styled with embedded CSS, while JavaScript is included in an inline script tag, though it remains empty in this version. It references a country CSV file and an input dataset, indicating potential data loading capabilities. The code relies on standard web APIs—HTML5, CSS, and native JavaScript—without external libraries, emphasizing simplicity and direct browser functionality. The visual output is currently minimal, showcasing the structural setup rather than a complex rendering.

HTML Starter

This example displays the text “Hello HTML” in the center of the page at a massive 13em font size, with a plain white background. It demonstrates the minimal structure of an HTML page combining CSS for styling and JavaScript for browser console output. The code uses inline CSS within a `<style>` tag and a `<script>` element that logs “Hello JavaScript!” to the developer tools. No external libraries are required, showcasing the foundational web technologies of HTML, CSS, and JavaScript.

HTML Starter

This example shows a minimal HTML page that combines CSS styling with JavaScript functionality. A large “Hello HTML” message appears centered on the page with a 13em font size, while the browser’s developer console logs the text “Hello JavaScript!”. The code uses standard HTML elements, a `<style>` tag for CSS rules, and a `<script>` tag for inline JavaScript. It demonstrates the fundamental roles of these three web technologies without external libraries or data processing.

HTML Starter

This example displays a horizontal bar chart comparing the populations of five countries, drawn as green SVG rectangles. The visualization uses D3 v6’s `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` to position bars and ticks, with data loaded from a local CSV file via `d3.csv`. The chart is entirely rendered through SVG elements within a React-agnostic HTML page, styled with CSS for body text and tick labels.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders an SVG with horizontal bars, a linear x-scale for population values, and a band scale for country categories. The visualization includes custom-styled axes in muted colors, tooltips formatted with D3’s `format` API, and uses React components for axes and marks.

HTML Starter

This example shows a simple bar chart of population data for several countries, loaded from a CSV file. The bars render in green using SVG rectangles, with a linear x-scale for population and a band y-scale for country labels. D3 v6 handles the data loading via `d3.csv`, the scales, and the axes, while CSS sets the page’s large font size and bar color. The chart is drawn inside a 500x500 SVG with margins applied through a group transform.

Makeing a Bar Chart with D3

This example shows a horizontal bar chart ranking country populations using D3. The SVG chart maps country names to a band scale on the y-axis and populations to a linear scale on the x-axis, drawing steel-blue rectangles with axes generated by `d3.axisLeft` and `d3.axisBottom`. The code loads data from a local CSV file via `d3.csv` and parses the population values as numbers. The React starter code imports select, scales, and axes from D3 for modular integration.

HTML Starter

This example shows a simple bar chart of population by country, rendered as an SVG using D3 v6. The chart maps population values to bar widths with `d3.scaleLinear` and country names to vertical bands with `d3.scaleBand`. Data is loaded from a CSV file using `d3.csv`, parsed into numbers, and then appended as `rect` elements to an SVG. The code demonstrates a bare-bones HTML page combining inline CSS, JavaScript, and D3 to create a static visualization.

Nov 14, 2020

HTML Starter

This example displays a horizontal bar chart of population data for six countries, loaded from a local CSV file. The chart renders as an SVG using D3 v6, with bar widths scaled linearly against the maximum population and countries positioned along a band scale. The visualization is generated through a D3 script that appends an SVG to the HTML body and draws rectangles based on the data, with basic CSS styling applied to the page.

Nov 13, 2020

HTML Starter

This example shows a minimal HTML page displaying the static text “Hello HTML” alongside a JavaScript console message. It demonstrates the foundational web technologies of CSS for styling the body’s font size and alignment, and JavaScript for logging output. The rendering approach is a plain DOM element styled with inline CSS, with no external data or visualization libraries. The code includes a script tag that calls `console.log` to output “Hello JavaScript!” to the browser’s developer tools, illustrating the basic integration of markup, style, and script.

Nov 13, 2020

HTML Starter

This example displays a bar chart of population data for several countries, loaded from a CSV file. The bars are rendered as SVG rectangles, with a linear scale mapping population values to widths and a band scale mapping country names to vertical positions. The code uses D3 v6 methods such as `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` to construct the visualization. The HTML page includes inline CSS and JavaScript, with the chart drawn entirely through D3’s selection and data-join pattern.

Nov 13, 2020

HTML Starter

This example shows a bar chart of population data for several countries, rendered as SVG rectangles. The visualization loads data from a CSV file using `d3.csv`, converts population values to numbers, and maps them to bar widths with `d3.scaleLinear`. Country names are mapped to vertical positions using `d3.scaleBand`, though the range is left empty. The code appends a static SVG canvas and rects without explicit x or y positioning, leaving the chart incomplete. It demonstrates a minimal HTML page combining D3 v6 and vanilla JavaScript.

React Starter

This example demonstrates a simple D3.js bar chart rendered with SVG inside a React application. The code binds an array of two data values to rectangle elements, setting their width and vertical position based on the data. The chart shows two steelblue bars of different lengths, with the SVG container sized at 800 by 300 pixels. The implementation combines D3 v6’s data join and selection methods with React’s component structure, using standard SVG attributes like `x`, `y`, `width`, and `height` to position the visual elements.

HTML Starter

This example demonstrates a minimal HTML page that uses D3 v6 to render a single blue rectangle onto an SVG canvas within a React-based project structure. The page includes embedded CSS that centers and enlarges body text, while a script appends an SVG element with fixed 500x500 dimensions, then selects and appends a rectangle with hardcoded position and size attributes. The code also logs a message to the browser console and serves as a bare-bones starting point for visualization development.

React Starter

This example shows a simple bar chart built with React and D3, displaying a collection of six static values as blue rectangles. The SVG bars are appended to the body using D3’s `selectAll` and `data` joins, with each rectangle’s width derived from the array element and its vertical position calculated from the index. While the code includes a CSV-driven React starter scaffold, the visible chart renders from the hardcoded `data` array, not the external file. React’s root element remains unused for the visualization itself.

React Starter

This example demonstrates a minimal React application that renders a large, centered “Hello React!” message on a plain white page. The code uses React’s `ReactDOM.render` method to mount a functional component into a `div` with the ID `root`. The component returns a simple `<div>` with a CSS class that sets the font size to 13em. No data visualization or interactive behavior is present; it serves as a starting template for integrating React with other libraries.

Nov 11, 2020

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders an SVG with horizontal bars, a linear x-scale for population values, and a band scale for country categories. The visualization includes custom-styled axes in muted colors, tooltips formatted with D3’s `format` API, and uses React components for axes and marks.

Nov 2, 2020

Stylized Bar Chart

This example visualizes the top 10 most populous countries as a stylized horizontal bar chart. The bars represent each country’s population, sorted in descending order, with a linear scale on the x-axis and a band scale for country categories. Built with React and D3 (d3.scaleBand, d3.scaleLinear, d3.max, d3.format), it renders SVG rect elements, includes axis ticks and labels, and uses a hover tooltip. Data comes from the United Nations World Population Prospects 2019 CSV, filtered to the first ten rows, with a custom font and muted color palette.

Nov 2, 2020

React Starter

This React starter example loads population data from a CSV file using the D3 `csv` function and parses the numeric population column. It sets up an SVG element by reading its width and height attributes with `select` and D3 selections, then logs the processed data to the console. The page includes a placeholder message and references a bundled React application, though no chart is rendered in the provided code. The example serves as a minimal template for integrating D3 data loading with a React build setup, using D3 v6 in a plain HTML file.

Oct 31, 2020

HTML Starter

This example presents a bare-bones HTML page that integrates CSS and JavaScript to load and log a simple CSV dataset of country populations using D3 v6. The code uses the `select` and `csv` functions from D3 to fetch the data from `data.csv` and then logs the parsed rows to the browser console. A minimal stylesheet sets the body font size, and the page renders static text while the data loading process occurs. The visualization itself is not yet drawn; it only demonstrates the foundational setup for a future chart.

Oct 31, 2020

Making a bar chart

This example demonstrates a bar chart built with D3 v6 and React, where each country from a CSV dataset is represented by a static rectangle. The code uses `d3.csv` to load and parse population data, converting the numeric values, then appends SVG `rect` elements via `selectAll().data().enter()`. The bars are fixed at 300 by 300 pixels, so the visualization shows the data structure rather than proportional sizes. The chart renders in an SVG container using declarative D3 selections.

Oct 30, 2020

Shapes with svg

This example uses D3.js to draw a yellow circle with a black stroke on an SVG canvas, representing a face with a single black eye. The code appends SVG circle elements using D3 selections, setting attributes like radius, center coordinates, and fill colors directly. The circle’s size and position are derived from the SVG’s width and height attributes, while the eye is positioned relative to those dimensions. The visualization demonstrates basic SVG shape creation and attribute manipulation through D3’s `select` and `append` methods.

Oct 30, 2020

New Car Report

This visualization displays a single car record from a static JSON dataset, showing the year, make, and price of the first entry. The React application parses an embedded JSON string containing six car listings and renders the selected record as plain text. The interface uses an HTML pre element with large font styling to display the message, while the formatcar helper function demonstrates how individual car attributes could be formatted, though it is not invoked in the current rendering logic.

New Car Report

This example displays the message “hello world” in a pre-formatted element. It uses vanilla JavaScript to select an element by its ID and update its text content. The code defines a `cars` array but does not use it, and the page is rendered through a React starter setup bundled with `bundle.js`. The visualization does not include any charts or data-driven graphics.

React Starter

This example demonstrates how to integrate React with a minimal visualization setup, rendering a simple "Hello React!" message centered on the page. It uses React 16.13.1 and ReactDOM to mount a functional component into a root div. The styling is applied via CSS in the HTML head, and the bundled JavaScript is loaded from `bundle.js`, showing a basic React rendering workflow.

React Starter

This example demonstrates how to integrate React with a minimal visualization setup, rendering a simple "Hello React!" message centered on the page. It uses React 16.13.1 and ReactDOM to mount a functional component into a root div. The styling is applied via CSS in the HTML head, and the bundled JavaScript is loaded from `bundle.js`, showing a basic React rendering workflow.

React Starter

This example demonstrates how to integrate React with a minimal visualization setup, rendering a simple "Hello React!" message centered on the page. It uses React 16.13.1 and ReactDOM to mount a functional component into a root div. The styling is applied via CSS in the HTML head, and the bundled JavaScript is loaded from `bundle.js`, showing a basic React rendering workflow.

React Starter

This React starter example displays the word “Hello” in large, centered text using a minimal React setup. It renders a single message component into the DOM via `ReactDOM.render`, employing React 16.13.1 loaded from a UMD build. The visualization relies on the `root` div and a bundled JavaScript file, with styling applied through an inline `<style>` block. The code demonstrates a basic React integration without additional data or interactive features, serving as a template for building more complex charting applications.

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello paul” in large, centered type, with a console message logged to the browser’s developer tools. The rendering relies on plain HTML and CSS, using a `<style>` block to set the body’s font size and text alignment, while a separate `<script>` tag calls `console.log` to output “Hello JavaScript!”. No external libraries or data sources are involved; the page serves as a bare-bones template for starting web projects without frameworks.

HTML Starter

This example shows a bare-bones HTML page that displays the text “Hello HTML” in large, centered type. The page uses plain HTML and CSS for layout, with a small inline script that logs “Hello JavaScript!” to the browser’s console. It demonstrates the minimal structure of a web document without relying on any external libraries or frameworks. The code serves as a starting point for building more complex visualizations in React or other tools.

HTML Starter

This example shows a bare-bones HTML page that displays the text “Hello HTML” in large, centered type. The page uses plain HTML and CSS for layout, with a small inline script that logs “Hello JavaScript!” to the browser’s console. It demonstrates the minimal structure of a web document without relying on any external libraries or frameworks. The code serves as a starting point for building more complex visualizations in React or other tools.

Cars Report

The Cars Report displays a static text message, “hello world,” rendered inside a preformatted HTML element. It uses a React starter setup and imports car data from a `cars` module, though the visualization itself does not yet process or visualize that dataset. The code directly manipulates the DOM via `document.getElementById` to set the message’s content, relying on a bundled JavaScript file generated by a build tool. The example demonstrates a minimal integration of data import and DOM updates without any charts or interactive graphics.

Oct 2, 2020

Untitled

This example shows an interactive terrain visualization built with React and D3.js, displaying a 3D surface rendered on an HTML canvas. The code uses `d3.forceSimulation` to position nodes in a network layout, while `d3.geoPath` generates geographic shapes from projected data. The data appears to be a dataset of geographic coordinates, with the visualization applying a custom projection and color encoding to represent elevation or another spatial attribute. The scene is rendered through a canvas element, with the React framework managing state and updates between user interactions and the underlying D3 rendering pipeline.

Oct 2, 2020