Anthony De La Fuente

@tilltheant·4 public vizzes

Making a Bar Chart

This example demonstrates how a bar chart can transition between datasets using D3.js version 6. It fetches vehicle registration data from the RDW Open Data API, counts cars by color per year, and displays the most popular colors for 2017. Users toggle between 2016 and 2017 datasets via radio buttons, triggering animated updates with `transition()` and `duration()`. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, with an SVG rendering approach and a button-based interaction pattern.

Nov 13, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It plots temperature in degrees Celsius against time, with the x-axis labeled “Time” and the y-axis labeled “Temperature.” The code uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.curveBasis to create the smoothed path. Data is loaded via d3.csv, and the SVG rendering includes a title and styled grid lines.

Nov 9, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example draws a cartoon face using D3.js v6 in an SVG container. It shows a circular head with eyes, a mouth, and a small pink rectangle, all positioned using fixed pixel coordinates and attribute setters like `.attr()`. The code imports `select`, `line`, and `arc` from the D3 library, appends SVG shapes including circles, a path for the mouth generated with the `arc()` API, and uses a group element with a transform. No external data source is involved; shapes are placed programmatically.

Nov 3, 2020

Loading thumbnail…

E6 Module & Workflow

This example visualizes parking data special days, showing the fetched dataset of parking locations and a count of occurrences for a selected special day. The workflow fetches data asynchronously from the RDW Open Data API using the `fetch` function and JSON-parsing via `response.json()`. It then applies custom filtering and counting functions from the Sorteren module, which use `map` and `forEach`, respectively, to process the data. The results are logged to the console with `console.log`, and the page is styled with a large font-size via CSS.

Oct 29, 2020