Roque Luís Pina

@anip68·4 public vizzes

Fork of A week in San Francisco - Line chart

This visualization shows temperature readings in San Francisco over a week, using a smooth line chart with time on the x-axis and temperature on the y-axis. The chart includes labeled axes, gridlines, and a title, with the line rendered in a thick maroon stroke. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with curveBasis to generate the path. Axes are drawn with d3.axisBottom and d3.axisLeft, while the SVG structure and styling are managed through d3 selections and CSS.

Feb 15, 2021

Loading thumbnail…

grafico_Mapa

A choropleth map of world countries rendered as SVG paths, colored with teal strokes on a black background. The visualization uses the D3.js `geoPath` projection and `geoMercator` to transform geographic coordinates into screen coordinates, with country boundaries drawn from the World Atlas 110m GeoJSON dataset. The map fills the SVG canvas without axes or labels, showcasing the geometry of national borders. Topological features are loaded via `topojson.feature` from the `world-atlas` package, and the resulting map emphasizes the global distribution of landmasses.

Feb 2, 2021

Loading thumbnail…

let's make a face with d3.js

A yellow circle with black eyes and an arc-based mouth forms a simple cartoon face in an SVG canvas. The code uses d3-selection to append and position the circles, while the mouth is drawn with d3.arc() using inner and outer radii plus start and end angles. All shapes are rendered directly as SVG elements, with dimensions derived from the SVG attributes. The face is centered within a 680×500 viewport, demonstrating basic geometric composition without data binding or interaction.

Feb 1, 2021

Loading thumbnail…

HTML cars Report

This example shows a basic SVG scene with geometric shapes and custom line styling, rendered in an HTML page. The visualization uses raw SVG elements—circles, rectangles, lines, and a path—grouped and transformed with scale and translate operations. The code applies fills to shapes in one group and uses a CSS class to control stroke width and line join on the lines group, with a teal stroke on the path. The page runs a small script that logs a message to the browser’s developer console, indicating interactive debugging. The data source is not external; the shapes and their positions are manually defined in the markup.

Feb 1, 2021