Tell us what works and what could be better. We read every submission.
@andresrojas1·7 public vizzes
This example demonstrates how to load and inspect data from an external CSV file using D3.js. The page renders a static SVG composition containing text, lines, a rectangle, a circle, and a polygon, while the d3.csv() method asynchronously fetches "percentage_of _people_using_internet_america.csv" and logs the parsed array of JSON objects to the browser console. The visualization itself is purely decorative, serving primarily to illustrate the data-loading workflow rather than to map data to visual elements.
This example demonstrates how to load and parse a CSV file using D3.js. The page contains minimal markup—just a paragraph suggesting users check the browser console—and a script that calls d3.csv() on a file of internet usage statistics. The CSV is transformed into an array of JavaScript objects, each with Country or Area, Year, and Value properties, which are then logged to the console for inspection. This illustrates the basic data-loading and parsing workflow in D3 v3, with no visualization on screen.
This example demonstrates how to load and inspect CSV data using D3 v3. The page displays a simple text message while the d3.csv() function asynchronously loads the file "individuals using the Internet.csv", which contains internet usage statistics by country and year. Once loaded, the CSV rows are automatically parsed into an array of JavaScript objects, and the data is logged to the browser console for verification. The visualization itself is minimal—the primary purpose is to show the data-loading process and confirm the parsed structure in the console.
This example demonstrates how to load and parse an external CSV file using D3 v3. The page displays only a short text message, while the real action happens in the browser console: d3.csv reads betterlifeindex.csv, transforms its rows into an array of JavaScript objects, and logs the resulting data structure to the console for verification. The CSV contains country-level internet usage statistics with columns for Country or Area, Year, and Value. This minimal example focuses on the mechanics of data loading in D3, showing how the csv() method asynchronously fetches and parses tabular data into JSON-like objects.
A choropleth map shows the percentage of individuals using the Internet across countries from 2003 to 2013. Each country is colored on a continuous scale, with darker shades representing higher internet usage. A time slider allows users to animate through the years, revealing global trends in connectivity. The visualization is built with D3.js, using data from a CSV file that includes country, year, and percentage values. The map updates dynamically as the user scrubs through the timeline, highlighting the rapid expansion of internet access in many regions over the decade.
The visualization is a scatterplot of the Better Life Index, plotting countries along two axes of well-being metrics and coloring each point by country. It uses `d3.csv` to load the data, `d3.scaleLinear` for position and color scales, and `d3.forceSimulation` with collision detection to arrange the circles. Hovering highlights a country and displays a tooltip with all its metric values; clicking pins the selection. Axis labels and a title are included, and the chart is rendered with SVG circles and HTML tooltips.
This example visualizes a force-directed network graph from two text files, “Important.txt” and “Less important,” authored by Andres Rojas. It uses `d3.forceSimulation` to compute node positions and `d3.geoPath` to render geographic-like shapes, with `d3.select` and `transition.attrTween` animating node movement. The data source is parsed from the text files’ content, and the graph’s layout is driven by simulated physics. The visualization shows the relative importance of each text chunk, with more prominent nodes representing the “Important” file.