Skip to main content
Log in
A

Anthony-coding

@Anthony-coding·34 public vizzes

Loading thumbnail…

Let's interact with world map on D3.js!

This interactive world map displays country boundaries hoverable in red, with a dark ocean backdrop and natural Earth projection. Built with D3 v5 and TopoJSON, it loads world-atlas 110m GeoJSON and TSV country-name data, rendering SVG paths via d3.geoPath. Zoom and pan transforms are applied through d3.zoom, while d3.select and Promise.all handle asynchronous data loading.

Nov 27, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example displays a static world map with countries filled in tan against a deep blue ocean, rendered inside an SVG canvas. It uses D3.js version 5.9.2 with the topojson library to convert the world-atlas country boundaries into map features. The projection, d3.geoNaturalEarth1, and the path generator, d3.geoPath, define the map’s shape, while the countries’ geographic data comes from the online world-atlas JSON dataset. The visualization also draws a background sphere for the ocean using a simple path generator call.

Nov 27, 2019
Loading thumbnail…

Let's make a world map with D3.js!

This example shows a world map rendered as an SVG, with countries drawn as filled paths and an ocean background. It uses D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from the TopoJSON `world-atlas` dataset, loaded via the `json` method and converted with `topojson.feature`. The code appends each country as a separate `path` element, styled with a brown fill and black stroke.

Nov 27, 2019
Loading thumbnail…

Bowl of fruit - Click to select

This example shows a bowl of fruit where viewers can hover over apples and a lemon to select them, highlighting the chosen fruit with a black stroke while the others remain unhighlighted. The visualization animates changes in the fruit bowl over time, with fruits being removed and an apple transforming into a lemon. Built with D3 v5, it uses an SVG rendering approach with scales like `scaleOrdinal` for color, radius, text, and font size, alongside `transition().duration()` to smoothly animate position, radius, and text size changes for enter, update, and exit selections.

Nov 27, 2019
Loading thumbnail…

Bowl of fruit - General update pattern

This example demonstrates the general update pattern in D3 by showing a bowl of fruit that changes over time. Initially, five red apples appear as circles, then one apple is removed and another is replaced with a lemon, using the exit selection to remove no-longer-needed elements. The visualization uses D3 v5 with SVG rendering and a scaleOrdinal color scale to map fruit types. It employs d3.select, data joins, and the .exit().remove() method to handle updates at timed intervals.

Nov 27, 2019
Loading thumbnail…

Bowl of fruit - General update pattern

Five apples sit in a row, then the bowl loses an apple, swaps one for a lemon, and drops another apple. The animation demonstrates the general update pattern, using `transition.duration(1000)` to smoothly animate new, existing, and exiting circles. The D3 v5 code uses `data(fruits, d => d.id)` with `Math.random()` IDs, and while an `enter` state starts radii at zero, no explicit `update` transition is defined, though the merge transition applies to all circles.

Nov 26, 2019
Loading thumbnail…

Temperature in San Francisco

This visualization shows the evolution of temperature in San Francisco over time, with a smooth area chart rendered as an SVG. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.area with curveBasis to generate the filled path. The chart includes labeled axes, a title, and a clean grid created via tick lines. The code imports specific D3 v5 modules, such as select, extent, and axisBottom, and applies the d3.axisLeft and d3.axisBottom APIs.

Nov 26, 2019
Loading thumbnail…

Temperature in San Francisco: line charts

This visualization uses a filled line chart to show the evolution of world population from 1960 to 2015. The area under the curve is rendered in yellow, with gridlines and labeled axes for year and population using d3.scaleTime and d3.scaleLinear. Data is loaded from a CSV file via d3.csv, and the chart is drawn as an SVG path generated by d3.area with a curveBasis interpolation.

Nov 25, 2019
Loading thumbnail…

Temperature in San Francisco: line charts

This line chart visualizes the evolution of temperature in San Francisco over time, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5 with an SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and a curve-basis line generator. Data is loaded from a CSV file, parsed with timestamps converted to Date objects, and displayed with a smooth, single-line path.

Nov 25, 2019
Loading thumbnail…

Cars scatter plot

A scatter plot displays the relationship between horsepower and miles per gallon for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map values and render gridlines, while circles are appended to an SVG element. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into numeric fields before being plotted.

Nov 25, 2019
Loading thumbnail…

Cars: scatter plot

This scatter plot displays the relationship between horsepower and fuel efficiency (MPG) for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, while `axisLeft` and `axisBottom` create labeled axes with gridlines. The circles are semi-transparent yellow, and the chart includes a title and rotated axis labels styled via CSS. Data is loaded asynchronously from a CSV file using D3’s `csv` method.

Nov 25, 2019
Loading thumbnail…

Cars scatter plot

A scatter plot displays the relationship between horsepower and miles per gallon for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map values and render gridlines, while circles are appended to an SVG element. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into numeric fields before being plotted.

Nov 25, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospect. It shows population values on a horizontal linear scale, with country names on a vertical band scale. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart. A custom tick formatter converts the population numbers into abbreviated units, replacing 'G' with 'B' for billions. Data is loaded from a CSV file using the `csv` method.

Nov 25, 2019
Loading thumbnail…

Top ten happiest countries

A ranked bar chart presents the top ten happiest countries by score, with Norway leading at 7.54 and Australia and Sweden tied at 7.28 at the bottom. Each bar is labeled with the country name and displays its numerical score at the end. The visualization uses D3 v5 to bind data from a CSV file to SVG rectangles, scaling bar lengths linearly with the score. The chart appears on a white background with no axes, focusing purely on the comparative scores and country order.

Nov 25, 2019
Loading thumbnail…

Points in Motogp 2019

The visualization displays final points totals for MotoGP 2019 riders as a simple text-based list, with each rider's name followed by their score. It uses D3 v5’s `csv` method to parse the embedded data.csv file and logs the parsed data to the console via a promise, while rendering only an empty SVG canvas with no additional graphical elements.

Nov 17, 2019
Loading thumbnail…

Cars Report

This visualization displays a text-based report of cars priced above a specified threshold, formatting each entry as a line containing the year, make, model, and price. After a simulated two-second delay, the asynchronous `getCars` function resolves a hard-coded JSON array, and the `generateReport` utility filters and maps those records using `formatCar`. The final message is rendered into a `<pre>` element via D3’s selection API, with the page styled using a large font size and a steel blue background.

Nov 17, 2019
Loading thumbnail…

Cars Report

A dashboard displays a filtered car report by fetching a static JSON array of five vehicles with `getCars()`, a promise resolving after a two-second delay. It shows cars priced above $2,000, formatted as `year make model: $price` via `formatCar`, and renders the multiline output into a `<pre>` element using `d3.select` and `.text()`. The initial loading state appears before the data arrives, demonstrating asynchronous data handling with D3 v5.

Nov 17, 2019
Loading thumbnail…

Cars Report

This example displays a car report by filtering a list of cars to include only those priced under $2,000, formatting each entry with the year, make, model, and price, and presenting the results as plain text. The page initially shows a “Loading...” message while `getCars` fetches the data from an embedded JSON array after a simulated two-second delay. The code uses JavaScript promises, array methods like `filter` and `map`, and template literals within the `formatCar` and `generateReport` functions, while the HTML and CSS style the output with a large white monospace font on a light blue background.

Nov 17, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations estimates. It uses d3.scaleBand and d3.scaleLinear to map countries and populations, with d3.axisLeft and d3.axisBottom for the axes. The code customizes the x-axis tick format with d3.format, removing axis domain lines and adding a custom population label. A title clarifies the chart’s purpose, and data is loaded from a CSV file.

Nov 15, 2019
Loading thumbnail…

Cars Report

This example displays a list of five used cars, showing only those priced under $2,000 as formatted text lines. The page initially shows a “Loading...” message while a Promise from `getCars` resolves after a two-second timeout. Once resolved, `generateReport` filters the parsed JSON data and uses `formatCar` to build each line with year, make, model, and price. The result is rendered into a `<pre>` element, styled with Ubuntu font and a light blue background.

Nov 14, 2019
Loading thumbnail…

Cars Report

This example presents a text-based report of car listings, filtering five vehicles by price and formatting them into a list. It uses an asynchronous JavaScript function with a simulated delay to load the car data. The visualization relies on D3 v5 for the web page setup, while the report generation uses custom ES6 modules: `formatCar` for string formatting and `generateReport` to filter and join the results. The filtered output is displayed in a styled HTML element with a large Ubuntu font and a light blue background.

Nov 14, 2019
Loading thumbnail…

Cars Report

This example displays a plain-text message, "Hello you!", centered on a light blue background. The visualization demonstrates a minimal data-report setup using D3 v5 and a custom module. It imports a string from `My_message.js` and the `select` function from D3, then uses `select('#message').text(message)` to inject the text into the HTML element. The page’s styling comes from `styles.css`, applying the LightBlue background and white text.

Nov 14, 2019
Loading thumbnail…

Face with d3.js

This example renders a single red circle on an SVG canvas using d3.js version 5. The code selects the SVG element, sets its background color to red, and appends a circle with a radius of 200 pixels. It demonstrates basic SVG manipulation with d3’s `select` and `append` methods, showing how to build simple geometric shapes in a web page.

Nov 13, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup where an SVG element is selected and given a red background, showcasing the basic structure of a VizHub project. The code imports the `select` function from D3 v5 and applies it to the SVG in `index.html`, with styling separated into `styles.css`. It serves as a simple illustration of how D3 selections and DOM manipulation work within the VizHub environment.

Nov 13, 2019
Loading thumbnail…

Face with d3

This example uses SVG with d3.js to draw a simple face. The rendering approach builds the facial features directly through d3 selections and SVG shapes, with the `select` method from d3 managing the root SVG element. The face is constructed entirely from code, using basic geometric elements like circles and paths to create eyes, a nose, and a mouth. The page includes a minimal CSS reset and loads d3 v5 from a CDN, resulting in a clean, static visualization without interaction or data binding.

Nov 13, 2019
Loading thumbnail…

Face with d3

A face is drawn as a single large red circle on an empty SVG canvas, demonstrating basic SVG shape creation with d3. The example uses d3.select to target the svg element, applies a red background via the style method, and appends a circle with a radius of 200 pixels using d3.append and d3.attr. The SVG container is fixed at 500 by 960 pixels, and the circle is centered by default. The code relies on the d3 v5 library loaded from a CDN, with styling handled by the car.css file.

Nov 13, 2019
Loading thumbnail…

Face with d3

This example draws a simple face using D3 v5 and SVG, rendering a single large circle as the primary visual element. The code selects the SVG container and appends a circle element, setting its radius to 200 pixels via the `attr` method. The page loads D3 from a CDN and applies basic CSS to remove margins and hide overflow. The visualization demonstrates fundamental D3 selection and SVG shape creation with a minimal, abstract representation.

Nov 13, 2019
Loading thumbnail…

Face with d3

This example renders a face using D3.js, HTML, CSS, and SVG. It displays a simple facial diagram composed of SVG shapes, showing how basic geometric primitives can be assembled into a recognizable figure. The code uses the `d3.select` API to target the SVG element and appends a circle as the initial facial component. The visualization relies on D3 v5 and renders entirely through SVG elements within an HTML page, demonstrating a minimal approach to creating vector-based illustrations with D3.

Nov 13, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling through a static composition of circles, rectangles, lines, and paths. The visualization shows how geometric primitives combine with varying fill colors, stroke properties, and transform attributes to create a structured layout. The SVG element uses nested groups with translations and scaling to position shapes, while specific fills are applied both globally and individually. The code leverages raw SVG elements like `circle`, `rect`, `line`, and `path` within an HTML5 document, with CSS handling viewport margins and overflow. The rendering approach is purely declarative, with no interactivity or data binding present.

Nov 13, 2019
Loading thumbnail…

Cars Report

Cars Report displays a text-based list of used cars, showing the year, make, model, and price for each vehicle under a $2,000 threshold. The page initially shows “Loading...” and then populates with the report after a simulated two-second delay. It uses JavaScript promises (`getCars`) to fetch JSON data embedded in the source, and string formatting via a custom `formatCar` function. The output is rendered into a `<pre>` element styled with CSS, including a custom Google Font and a dark blue background.

Nov 9, 2019
Loading thumbnail…

Report Cars

A report of basic cars displays the price of a single car from a small dataset, showing a Fiat Panda priced at 1690. The view renders this value as large text on a dark blue background with a custom Ubuntu font. The code loads data from an embedded JSON array, parses it into a JavaScript object, and uses D3 v5’s selection API to set the text content of a `<pre>` element. Styling is handled entirely through CSS, with no interactive or graphical charts involved.

Nov 9, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "bonjour," in large type within an HTML page. It demonstrates a minimal use of D3.js, loading the library via a CDN link, while the primary logic resides in JavaScript files. The `index.js` file imports an array of car objects from `cars.js` but currently only assigns a hardcoded string to the page's message element, ignoring the dataset. The code uses standard DOM manipulation to set the text content of a `<pre>` element.

Nov 9, 2019
Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset of four vehicles, rendered as large text on the page. It imports car data from a separate module using ES6 syntax, parses a JSON string with `JSON.parse`, and accesses the `make` property of the first object. The result is written into a `pre` element via `document.getElementById` and `textContent`, using a minimal D3 v5 setup with no visualization or animation.

Nov 9, 2019
Loading thumbnail…

Cars Report

This example demonstrates a minimal "Cars Report" page that displays the text message "Hello VizHub!" as its primary content. The visualization uses D3.js version 5, specifically the `select` API, to target the `#message` div and set its text content, while a custom ES6 module (`myMessage.js`) provides the message string. The page is styled with a dark blue background, light text, and an Ubuntu font via CSS, emphasizing a clean, single-element report rather than a data-driven graphic. The rendering relies on standard HTML and CSS for presentation, with no external datasets or complex chart types involved.

Nov 9, 2019