martajimpac

@martajimpac·4 public vizzes

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

This choropleth map of Spain overlays bubble markers on each province to compare COVID-19 cases and vaccination rates. Circle size encodes case counts via `d3.scaleSqrt`, while fill color uses `d3.scaleSequential` with `d3.interpolateRdYlBu` for vaccination percentages. The map is rendered with `d3.geoMercator` and `d3.geoPath` from TopoJSON data, with interactive tooltips and legend components built from `d3.csv` data and custom SVG groups.

Dec 14, 2021

Loading thumbnail…

Fork of Color and Size Legends

This fork demonstrates reusable D3 legend components for both ordinal color scales and sequential size scales. Two separate legend modules render circles and labels in SVG, with colorScale mapping fruit names to colors and sizeScale using d3.scaleSqrt for proportional areas. The color legend displays four categorical items, while the size legend applies d3.ticks to generate five numeric breaks. Both components use enter/merge/exit selections to update groups dynamically.

Dec 13, 2021

Loading thumbnail…

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

A choropleth map of Spain displays COVID-19 cases as proportional circles and vaccination percentages via a sequential YlOrRd color scale, with hover tooltips revealing province names. Using d3.csv and d3.json, the visualization merges external COVID data with TopoJSON geographic boundaries from es-atlas. d3.geoMercator projects the map, while d3.geoPath draws province paths, and d3.scaleSqrt sizes circles based on case counts. The d3.scaleSequential color scale encodes vaccination rates, with interactive hover effects changing province fill colors.

Dec 13, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This example shows a bar chart intended to display the percentage of cases by Spanish province for June 2021, though the rendering logic in `index.js` is incomplete and only logs the loaded data to the console. The code loads data from `data.csv` using `d3.csv` and selects an SVG element via `d3.select`. It defines placeholder accessor functions and a `render` function that is never called, leaving the visualization blank. The page includes a D3 v5 script and a stylesheet that styles any `rect` elements in steelblue.

Dec 11, 2021