rpadron8

@rpadron8·4 public vizzes

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature readings in Celsius for cities worldwide, using data from the Data Canvas - Sense Your City dataset. The chart plots timestamps on the x-axis against temperatures on the y-axis, with each city represented by a distinct colored line from the d3.schemeCategory10 palette. Built with d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and a custom colorLegend module, it renders smooth curves via d3.line with curveBasis. A sorted legend and gridlined axes, created with d3.axisLeft and d3.axisBottom, complete the SVG output.

Oct 7, 2021

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their economic classification using a spectral color scale, with an interactive SVG legend displaying the categories. The map uses the Natural Earth 50m dataset, loaded via the `d3.json` and `d3.tsv` functions, and renders geographic paths with `d3.geoPath`. It employs `d3.scaleOrdinal` for color mapping and `d3.zoom` for pan/zoom interactions, with hover effects highlighting countries in red.

Oct 7, 2021

Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a simple smiling face entirely in SVG. It appends a yellow circle for the head, two black circles for eyes, and a mouth path created with the `d3.arc` generator, using inner and outer radii with specified start and end angles. The `select` function targets the SVG element, and attribute values like height and width are read directly from the markup. No external data is loaded; all shapes are positioned based on the SVG’s dimensions and fixed pixel offsets.

Oct 7, 2021

Loading thumbnail…

Fork of Cars Report

This fork demonstrates a modular JavaScript approach to generating a text-based car report. It stores a hardcoded array of car objects in JSON, parses it with `JSON.parse`, and uses a Promise-based `getCars` function with a simulated 2-second delay. The `generateReport` function filters cars below a maximum price, maps them through `formatCar`, and joins the formatted strings with newlines. The page uses an `index.html` with a `pre` element, where the final output is rendered by setting `textCont` on that element.

Oct 6, 2021