syedmdbuhari

@syedmdbuhari·6 public vizzes

Temperature in SFO Line Chart

This line chart visualizes one week of temperature readings in San Francisco, plotting time on the x-axis against temperature on the y-axis. The visualization loads CSV data from a remote dataset and renders both a connected line path and semi-transparent green circles for each data point. Built with D3 v5, the code uses scaleTime and scaleLinear for axes, axisBottom and axisLeft for ticks, and the line generator to create the path. SVG is the rendering approach, with custom axis labels and a title.

Dec 7, 2019

Loading thumbnail…

Temperature in SFO Clusterplot

This clusterplot displays one week of temperature data in San Francisco, plotting time along the x-axis and temperature along the y-axis. Red semi-transparent circles mark individual readings, creating dense clusters where values repeat. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft with gridlines. Circles are rendered as SVG elements with opacity set in CSS.

Dec 7, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using data from the 2017 United Nations World Population Prospects. Each country is represented by a circle positioned along a linear scale for population and a point scale for country names. The visualization is built with D3 v5, using `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart, with SVG circles for marks. Axis tick lines extend across the plot, and the x-axis labels are formatted using `format` with a custom tick formatter.

Dec 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. D3 v5 renders the visualization in SVG, using `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` with custom tick sizes and formats, and circles instead of bars. The code customizes axes by removing tick domains, adjusting tick text styles, and adding an axis label, while `d3.csv` loads the data.

Dec 3, 2019

Loading thumbnail…

Making BAR Chart

A horizontal bar chart displays population figures for eight countries, with bars sorted by country name. It uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and SVG `rect` elements for the bars. Data is loaded from a CSV file via `csv()`, and axes are generated with `axisLeft` and `axisBottom`. Population values are multiplied by 1000, and bars are styled with a steelblue fill.

Dec 3, 2019

Loading thumbnail…

Let's make a face with D3.js!

A cheerful cartoon face is drawn on an SVG canvas using D3.js. The face features a yellow circle for the head, two eyes, and animated eyebrows that move up and down over time. The code constructs the shapes using D3's `append` and `attr` methods, with the eyebrow animation driven by chained `transition().duration()` calls. A static mouth is rendered as an arc path using D3's `arc` generator, which calculates the curved shape based on inner and outer radii and start/end angles. All drawing occurs within a group element translated to the canvas center.

Dec 1, 2019