SalmanHamdouchi

@SalmanHamdouchi·10 public vizzes

Temperature in San Francisco Line Chart

A line chart visualizes one week of hourly temperature data in San Francisco, with each point representing a timestamp and its temperature in Celsius. The D3.js code uses `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for gridlines, and `line` with `curveBasis` to draw the smooth maroon curve. Tooltips display the exact temperature and date on mouseover, supported by the `d3.bisector` for nearest-point lookup and an SVG overlay rect that captures mouse events. Data is loaded via `csv` from a remote URL and rendered into an SVG canvas.

Feb 6, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays a week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. It shows the temperature trend over time, with the x-axis representing time and the y-axis representing temperature. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, d3.axisBottom and d3.axisLeft for the axes, and d3.line with a curveBasis to generate a smooth path. The data is loaded via d3.csv and rendered as SVG elements.

Jan 31, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v5 with SVG rendering, implementing scales via `scaleTime` and `scaleLinear`, axes via `axisBottom` and `axisLeft`, and a smooth curve through `line` with `curveBasis`. The chart includes a title, labeled axes, and a thick maroon line path, with data loaded from a CSV file and parsed into Date and numeric values.

Jan 30, 2020

Loading thumbnail…

HTML Starter

A bare minimum HTML page serves as a blank canvas for a single empty SVG element. The code declares an unstyled HTML document with an empty `<svg>` tag, offering no visual output or interaction. This starter template provides the simplest possible structure for users to begin experimenting with data visualization from scratch. The example uses no external libraries or data sources, focusing solely on the raw HTML and SVG foundation.

Jan 30, 2020

Loading thumbnail…

HTML Starter

This example presents a minimal, empty HTML page as a foundation for visualization projects. It establishes a basic document structure with an HTML file that includes a linked JavaScript file for functionality. The JavaScript file initiates an import of the 'd3' library, indicating an intended use of D3 for future data-driven graphics, though no specific visualization or data is currently rendered. The example serves as a clean slate for building interactive charts or graphs using the React framework and D3's utilities.

Jan 30, 2020

Loading thumbnail…

HTML Starter

This example presents a minimal HTML page set up through React, with a stylesheet section and an empty body ready for content. It imports the D3 library via `script.js` but does not execute any data visualization or DOM manipulation. The page demonstrates the foundational structure for a web-based visualization project, with the `index.html` file serving as the entry point and D3 available for future use. No rendering or data binding occurs beyond the basic HTML scaffold.

Jan 30, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time using a smooth curved line, with labeled axes for time and temperature. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisLeft/axisBottom to render the SVG chart. Data is loaded via d3.csv, with timestamps parsed as Date objects and temperatures converted to numbers before rendering.

Jan 28, 2020

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, showing all cities with populations greater than 50,000. The visualization uses React for rendering, combined with d3.v5 for geographic projections and data handling, including d3.geoPath to draw country boundaries and graticules from World Atlas TopoJSON. City coordinates and population data come from Simplemaps, with circle size encoded through a d3.scaleLinear function. The map uses a light, polished color scheme with semi-transparent teal circles over gray landmasses.

Jan 28, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with axes labeled accordingly. The visualization is built with D3 v5, using `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data, scale positions, and render axes as SVG elements. The code explicitly parses all numeric fields, including mpg, cylinders, and acceleration, before plotting.

Jan 28, 2020

Loading thumbnail…

HTML Starter

This example renders an empty HTML page as a starter template for visualization projects. The code uses a minimal HTML structure with an embedded CSS style block that centers content and sets a 13em font size. It demonstrates the baseline setup for a web-based visualization, with the body element left empty for future content. The page is built on plain HTML and CSS without any JavaScript libraries or frameworks.

Jan 15, 2020