Renato Francia Castillo

Scatterplot

This scatterplot displays the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects, with country names on the y-axis and population along the x-axis. Each bar’s length is proportional to the population value, formatted in billions using d3.format. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis with a custom tick format, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to generate axes with grid lines. The chart is rendered as an SVG with a title and axis label, and bars are styled with a steelblue fill.

Mar 4, 2021

Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` for the axes, with a customized x-axis that formats values in billions. The chart includes a title, axis label, and horizontal grid lines.

Mar 3, 2021

Choropleth Map with Interactive Filtering

This choropleth map shows global economies by income group, with a color legend that filters countries by category. The map renders world geography using d3.geoPath with a Natural Earth projection, while a d3.scaleOrdinal with a spectral scheme assigns colors. Clicking a legend entry dims non-matching countries and highlights the selected group, using D3 v5’s zoom behavior for panning. The visualization loads TopoJSON and TSV data from the World Atlas package and draws everything as SVG.

Choropleth Map

This choropleth map colors countries by economic group, drawing from world-atlas TopoJSON and TSV data joined by country ID. The visualization renders the map with D3’s `geoNaturalEarth1` projection and `geoPath` generator, while an ordinal color scale from `schemeSpectral` assigns shades to each group. A custom color legend displays every category with circles and labels, and users can zoom and pan via D3’s `zoom` event, which updates the group’s transform. Hovering a country highlights it in red and shows its name and economy in a tooltip.

Choropleth Map

This choropleth map visualizes world economies by coloring each country according to its economic classification, using a spectral color scale created with `d3.scaleOrdinal` and `schemeSpectral`. The map renders as an SVG using `d3.geoPath` with the Natural Earth projection, displaying country data loaded from the world-atlas TopoJSON and TSV files. Interactive zooming via the `zoom` event lets users explore regions, while a custom `colorLegend` function shows the categorical color assignments.

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. It uses d3.tree layout with d3.linkHorizontal to render the connecting paths, while d3.zoom enables panning and scaling of the SVG view. Country names appear as text labels with font sizes decreasing by depth level. The data comes from a JSON file containing the nested geographic hierarchy. Text styling employs the Playfair Display font with white shadows for readability.

Temperature in San Francisco Area Chart

This area chart displays a week of temperature data (in Celsius) for San Francisco, sourced from Data Canvas - Sense Your City. It uses D3 v5 to render an SVG visualization with a time-scaled x-axis and a linear y-axis. The main area path is drawn using `d3.area` with basis curve smoothing, while axis ticks and labels are generated with `d3.axisLeft` and `d3.axisBottom`.

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, using data from Data Canvas - Sense Your City. The visualization plots temperature against time, with a smooth curve generated by d3.line and curveBasis. The chart includes labeled axes for Time and Temperature, with a title, and uses d3.scaleTime and d3.scaleLinear for scaling, along with axisBottom and axisLeft for the ticks. The SVG rendering is driven by D3 v5, with styling applied via external CSS for the line, labels, and ticks.

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature in Celsius on the y-axis. Each circle represents a temperature observation, with the title "A Week in San Francisco" displayed above the plot. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for tick marks, and renders SVG circles via data binding. Data is loaded from a CSV file using d3.csv, and the dataset originates from Data Canvas - Sense Your City.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red semi-transparent circles represent individual car models, with axes labeled accordingly. The visualization is built using D3 v5, employing `scaleLinear` for scaling, `axisBottom` and `axisLeft` for gridlines and ticks, and SVG circles for rendering. Data is loaded asynchronously via `csv` and parsed before rendering.

Cars Scatter Plot

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes such as miles per gallon, horsepower, and weight. The graph uses red, semi-transparent circles, with a 30% opacity to reveal overlapping data points. Rendered as an SVG, the visualization employs d3's `scaleLinear`, `axisLeft`, and `axisBottom` functions to construct the coordinate system, while custom CSS styles the axis labels, tick marks, and title for enhanced readability.

Customizing Axis

This example shows a horizontal bar chart of population data for ten countries, with a customized axis layout using margins to position the labels and tick marks. The visualization uses D3 v5 with an SVG rendering approach, importing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 library. Population values from the CSV file are multiplied by 1000 before being mapped to the x-axis scale, while country names are mapped to the y-axis band scale. The chart displays the data as steelblue rectangles, with the bottom axis explicitly translated to the inner chart height.